@import url('https://fonts.googleapis.com/css2?family=Stack+Sans+Headline:wght@200..700&family=Stack+Sans+Text:wght@200..700&display=swap');


* {
    font-family: "Stack Sans Text";
}

body {
    background: #111;
    background-image: repeating-linear-gradient(90deg,#101010,#191919 2px);
    color: #ccc;
    font-size: 0;
    line-height: 0;
    margin: 0;
    padding: 0 0 30px 0;
    text-align: center;
}

.container {
    margin: 0 auto;
    width: 1200px;
}

header {
    background: url('header.png') repeat-x left bottom;
    border-bottom: 1px solid #222;
    box-shadow: 0 0 10px #000;
    position: sticky;
    top: 0;
}

#logo {
    background: no-repeat center/80% url('logo.png');
    display: inline-block;
    font-size: 0;
    height: 149px;
    position: relative;
    top: 5px;
    width: 195px;
}

main {
    background: rgb(50 50 50 / 30%);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 5px 10px rgb(0 0 0 / 70%);
    font-size: 17px;
    line-height: 1.6em;
    margin-bottom: 40px;
    padding: 50px 40px;
    text-align: left;
}

footer {
    color: #444;
    font-size: 14px;
    line-height: 1;
}

a {
    color: #018594;
    font-weight: 700;
    text-decoration: underline;

    &:hover {
        color: #3bbfcd;
    }
}

h1 {
    color: #018594;
    font-family: "Stack Sans Headline";
    font-size: 30px;
    font-weight: 700;
    line-height: 1.7em;
    margin: 30px 0 20px 0;
    padding: 0 3px;
}

p {
    margin: 0;
}

ul {
    list-style: none;
    padding: 0 0 0 10px;

    li {
        border-left: 5px solid #242424;
        margin: 0 0 25px;
        padding: 0 25px;
    }
}


@media only screen and (min-width:0) and (max-width:1200px) {
    header {
        height: 110px;
    }
    
    #logo {
        background-size: 100%;
        height: 82px;
        top: 15px;
        width: 107px;
    }

    main {
        padding: 50px 30px;
    }
    
    .container {
        width: 100%;
    }
}