@charset "utf-8";

@font-face {
    font-family: 'ocr_aregular';
    src: url('fonts/ocrastdregular-webfont.woff2') format('woff2'),
        url('fonts/ocrastdregular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'PragmataProFrakturBold';
    src: url('fonts/PragmataProFrakturBold.woff') format('woff'),
        url('fonts/PragmataProFrakturBold.woff2') format('woff2'),
        url('fonts/PragmataProFrakturBold.eot'),
        url('fonts/PragmataProFrakturBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/PragmataProFrakturBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Neue Haas Grotesk Text Pro';
    src: url('fonts/NeueHaasGroteskTextPro.woff2') format('woff2'),
        url('fonts/NeueHaasGroteskTextPro.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    font-family: inherit;
}

:root::-webkit-scrollbar {
    display: none;
}

:root {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body {
    background: #89A892;
    margin: 0 auto;
    padding: 0;
    font-size: 16px;
    width: 95%;
    font-family: 'Neue Haas Grotesk Text Pro';
}


button {
    background: none !important;
    border: none;
    padding: 0;
    font-size: 16px;
    font-family: inherit;
}

/* unvisited/visited link */
a:link,
a:visited,
button {
    color: black;
    text-decoration: none;
    border-bottom: 1px solid #89A892;
}

/* mouse over link */
a:hover:not(header a),
button:hover {
    color: black;
    border-bottom: 1px solid #A51212;
    cursor: pointer;
}

/* selected link */
a:active,
button:active {
    color: #0D070A;
    border-bottom: 1px solid #89A892;
}

.active {
    font-weight: bold;
}

footer {
    margin: auto;
    padding: 50px;
}



/*grid setup; default size is the SMALLEST*/
.main-head {
    grid-area: header;
    height: 50px;
}

.main-head #logo {
    float: left;
    font-family: 'PragmataProFrakturBold';
    font-size: 32px;
}

.content {
    grid-area: content;

}

.main-footer {
    grid-area: footer;
}

nav {
    grid-area: nav;
    font-family: 'ocr_aregular';
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    
}

nav ul li {
    display: none;
}


.main-head {
    margin: 15px 10px 0 0;
}


.icon {
    float: right;
    display: block;
    position: relative;
    font-size: 25px;
    top: 25%;
}

/*activates on pressing burger menu*/
.topnav.responsive {
    position: relative;
}

.topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
}

.topnav.responsive li,
#submenu {
    float: none;
    display: block;
    text-align: left;
}

.topnav.responsive li a,
.dropdown-content {
    display: block;
    padding: 15px;
}

.topnav.responsive #submenu {
    float: none;
}

.topnav.responsive .dropdown-content {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
}

.wrapper {
    display: grid;
    gap: 10px;
    grid-template-areas:
        "header"
        "nav"
        "content"
        "footer";
}

/*middle screen res, for tablets or small desktops*/
@media screen and (min-width: 650px) {


    .wrapper {
        grid-template-columns: auto;
        grid-template-areas:
            "header  nav"
            "content content"
            "footer  footer";
    }

    nav ul {
        display: flex;
        justify-content: space-between;
        float: right;
    }

    nav ul li {
        display: flex;
    }

    nav ul li a {
        display: block;
        padding: 21px 21px 5px 21px;
    }

    #submenu {
        display: none;
        position: absolute;
        z-index: 1;
    }

    #submenu .dropdown-content {
        width: 100%;
        position: relative;
        text-align: left;
    }

    #dropbtn:hover .dropdown,
    #dropbtn:focus-within .dropdown

    /*this pseudoselector allows for tab-only navigation*/
        {
        background: #89A892;
        display: block;
    }

    .main-head {
        margin: 0;
        padding-top: 15px;
        height: 50px;
    }

    .main-head #logo {
        display: block;
        height: 100%;
        width: 100%;
        font-size: 32px;
    }

    .icon {
        display: none;
    }
}


/*full desktop res*/
@media screen and (min-width: 1024px) {
    body {
        width: 90%;
        margin-top: 5%;
    }

    .wrapper {
        grid-template-columns: 1fr 3fr;
        grid-template-rows: 150px auto auto;
        grid-template-areas:
            "header content"
            "nav    content"
            "footer footer";
        column-gap: 5%;
    }

    nav ul {
        flex-direction: column;
        float: none;
        width: 100%;
        position: fixed;
    }

    nav ul li {
        display: flex;
        padding-top: 10px;
    }

    nav ul li a {
        padding: 5px;
    }

    #contact {
        position: fixed;
        top: 80%;
    }

    #submenu {
        display: flex;
        position: static;
        z-index: 0;
    }

    #submenu .dropdown-content {
        width: inherit;
        position: relative;
        text-align: left;
        padding: 5px 0;
    }

    #dropbtn:hover .dropdown {
        background: inherit;
        display: flex;
    }


    .main-head {
        height: 150px;
        padding: 0;
        position: fixed;
    }

    .main-head #logo {
        display: block;
        height: 100%;
        width: 50%;
        float: none;
        font-size: 48px;
    }

}