@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: 18px;
    width:95%;
	font-family: 'Neue Haas Grotesk Text Pro';
}

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

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

/* selected link */
a: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;
}

nav ul{
    list-style-type: none;
    padding:0;
    margin:0;
	font-family: 'ocr_aregular';
}

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 {
    float: none;
    display: block;
    text-align: left;
    
  }

.topnav.responsive li a{
    display:block;
    padding: 15px;
}


.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;
    }

    .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:80%;
        margin-top: 5%;
}    

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

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

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

nav ul li a{
    padding: 5px;
}


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

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

.content{
    margin-left:100px;
}

}