@font-face {
  font-family: "Arvo";
  src: url(assets/Arvo/Arvo-Regular.ttf) format("truetype");
}
@font-face {
  font-family: "Lato";
  src: url(assets/Lato/Lato-Regular.ttf) format("truetype");
}

html{
  scroll-behavior: smooth;
}

.wrapper {
    position: relative;
    overflow-x: hidden;
    width: 100%;
}

body{
    overflow-x: hidden;
    margin:0;
    font-family: Lato, arial;
}

header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
}

.header-logo{
  height:2rem;
  width:2rem;
}

.header-text{
  font-variant: small-caps;
  letter-spacing: 0.05rem;
  font-weight: 400;
  margin:0;
  top:3.4rem;
  left:8rem;
}

.nav-container {
    padding:3rem 3rem;
    padding-bottom: 0;
    display:flex;
    justify-content:space-between;
}

nav{
}

nav ul{
    margin-top:0.6rem;
    padding: 0;
    display:flex;
    list-style:none;
}

.mobile-nav {
    margin:0;
    text-align: right;
    position: fixed;
    bottom: 7rem;
    right: 0;
    display:block;
    opacity:1;
    transition-property: opacity, bottom;
    transition: 1s ease;
}

.mobile-nav li{
    margin:1rem;
    z-index:2;
}

.hide{
    z-index: -1;
    opacity:0;
    bottom:-5rem;
}

.mobile-nav-button{
    height:4rem;
    width: 4rem;
    /* border-radius: 50%;
    border: 2px solid blue; */
    position:fixed;
    bottom: 0rem;
    right: -0.2rem;
}

.nav-link{
    padding:0.25rem 0.6rem;
    margin:0 0.5rem;
    border-radius: 5rem;
    transition-property: background-color, color;
    transition: 0.3s ease;
    cursor: pointer;
    color:inherit;
    text-decoration: none;
    font-weight:500;
}

.nav-link:hover{
    background: #00284d;
    color:white;
}

.mobile-nav-link{
  padding:0.3rem 0.7rem;
  margin:0;
  background: #00284d;
  color:white;
  font-size: 150%;
  opacity:1;
  box-shadow: 0 0 0.7rem -0.1rem white;
}

.mobile-nav-link:hover{
    background:#0059b3;
    box-shadow: 0 0 2rem rgba(0, 0, 0, .5);
}

.container {
    display: block;
    width: 95%;
    max-width: 1050px;
    margin-left: auto;
    margin-right: auto;
}

.container-fluid {
    color:maroon;
    width: 100%;
}

/* *, :before, :after {
    box-sizing: border-box;
} */

.col-6{
    display:flex;
    flex-direction: column;
    min-height: 26rem;
    padding-top: 2rem;
}

.spaced-m{
    margin:0 1rem;
    height:100%;
}

.spaced-p{
    flex-direction: column;
    display: flex;
    overflow:auto;
    padding:0 1rem;
    top:0;
    bottom:0;
}

.two-thirds {
    width:66%;
    color:peru;
    border: 2px solid peru;
}

.row{
    color:gray;
    display:block; /*disables single columns on mobile view YIKES*/
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

/* For mobile phones: */
[class*="col-"] {
    float:left;
    width: 100%;
    /*border: 2px solid orange;*/
}

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-s-1 {
        width: 8.33%;
    }

    .col-s-2 {
        width: 16.66%;
    }

    .col-s-3 {
        width: 25%;
    }

    .col-s-4 {
        width: 33.33%;
    }

    .col-s-5 {
        width: 41.66%;
    }

    .col-s-6 {
        width: 50%;
    }

    .col-s-7 {
        width: 58.33%;
    }

    .col-s-8 {
        width: 66.66%;
    }

    .col-s-9 {
        width: 75%;
    }

    .col-s-10 {
        width: 83.33%;
    }

    .col-s-11 {
        width: 91.66%;
    }

    .col-s-12 {
        width: 100%;
    }
}

@media only screen and (min-width: 768px) {
    /* For desktop: */

    .container {
        display: block;
        width: 80%;
    }

    .row{
        color:gray;
        display:flex; /*disables single columns on mobile view YIKES*/
    }

    .col-1 {
        width: 8.33%;
    }

    .col-2 {
        width: 16.66%;
    }

    .col-3 {
        width: 25%;
    }

    .col-4 {
        width: 33.33%;
    }

    .col-5 {
        width: 41.66%;
    }

    .col-6 {
        width: 50%;
    }

    .col-7 {
        width: 58.33%;
    }

    .col-8 {
        width: 66.66%;
    }

    .col-9 {
        width: 75%;
    }

    .col-10 {
        width: 83.33%;
    }

    .col-11 {
        width: 91.66%;
    }

    .col-12 {
        width: 100%;
    }
}