@import url("adam.css");
@import url("rocketwildness.css");

* {box-sizing: border-box}

body {
    background: #fff url('/images/background_logo.png') no-repeat center top;
    background-size: initial;
    color: #333;
    font: 300 1em courier;
    letter-spacing: 1px;
    margin: 20px auto;
    text-align: center;
}

a {font-size: 1.1rem; text-decoration: none;}
a:link {color: #b8860b;}
a:visited {color: #b8860b;}
a:hover {color: #785004;}
a.current {font-weight: bold;}

.hidden {display: none;}

#wrapper {
    height: 100%;
    margin: 20px auto;
    width: 780px;
}

/*PAGE HEADER*/
.top-header {
    background-color: transparent;
    margin: auto;
    text-align: center;
    width: var(--top-header-width);

    h1, h2 {letter-spacing: 0.4em;}
    h1 {
        font-family: rocketwildness;
        font-size: 3.75rem;
    }
    h1 a {color: #47475d; font-size: inherit;}
    h2 {
        color: #a56e05;
        font-family: adam;
        font-size: 3.75rem;
        margin: 40px auto;
    }

    .top-nav {
        display:inherit;
        margin-top: 40px;
        text-align: center;

        a {
            font-size: 1.1rem;
            margin-right: 0.625rem;
            text-decoration: none;
            text-transform: uppercase;
        }
    }

    .social-nav {
     margin-top: 20px;

         span {
            display: inline-block;
            margin: auto;
            padding: 3px;
            vertical-align: middle;

            img {
                border: 1px solid #b8860b;
                border-radius: 50%;
                box-sizing: initial;
                height: 2rem;
                margin: auto 3px;
                width: 2rem;
            }
        }
    }
}

main {
    margin: 30px auto;
    text-align: left;
}

main.docs {
    .content {
        background-color: #f0f8ff99;
        margin-block: 3rem 5rem;
        padding-inline: 1rem;
        padding-block: 1rem;

        h3 {margin-bottom:0.2rem;}
        h3 + p {margin-top:0.2rem;}
    }
}

.bottom-footer {
    bottom: 0;
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
    margin: auto;
    position: relative;
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: left;

    .company-links {
        grid-column:1;
        font-size: 1.1rem;

        a {text-decoration: none;}
    }

    .stamp {
        grid-column:2;
        text-align:center;

        img {height:150px;}
    }

    .company-social {
        grid-column:3;
        text-align:end;

        p:first-child {padding-right: 80px;}

        .icon {
            display: inline-block;
            margin: auto;
            padding: 3px;
            vertical-align: middle;

            img {
                background-color: #555;
                border: 1px solid #555;
                border-radius: 50%;
                box-sizing: initial;
                height: 32px;
                margin: auto 3px;
                width: 32px;
            }
        }
    }
}

@media only screen and (max-width: 840px) {
	#wrapper {width: 85%;}
    .top-header {
        h1 {font-size: 2.8125rem;}
        h2 {font-size: 2.8125rem;}
    }
}

@media only screen and (max-width:640px) {
	.bottom-footer {
        grid-template-columns: 50% 50%;
        .company-links {
            grid-column:1;
            grid-row:1;
        }
    	.company-social {
            grid-column:2;
            grid-row:1;
        }
    	.stamp {
            grid-column:1 / span 2;
            grid-row:2;
            padding-top:40px;
        }
    }

}

@media only screen and (max-width:530px) {
    .top-header {
        h1 {font-size: 1.875rem;}

        .top-header h2 {font-size: 2.1875rem;}

        .top-nav a {
            display: block;
            margin: 20px auto;
        }
    }
	.bottom-footer {
        grid-template-columns: 100%;

        .company-links {
            grid-column:1;
            grid-row:1;
            text-align:center;
        }

        .company-social {
            grid-column:1;
            grid-row:2;
            text-align:center;
        }
    	.company-social p:first-child {padding-right:0;}

        .stamp {
            grid-column:1;
            grid-row:3;
        }
    }
}


@media only screen and (max-width: 370px) {
    .top-header {
        h1, h2 {letter-spacing:0.1em;}
    }
}

@media only screen and (max-width:270px) {
	.top-header {
        h1, h2 {
            letter-spacing:0.1em;
            font-size: 1.875rem;
        }
    }
}