@font-face {
    font-family: 'Dawning of a New Day';
    font-style: normal;
    font-weight: 400;
    src: local('Dawning of a New Day'), local('DawningofaNewDay'), url(https://fonts.gstatic.com/s/dawningofanewday/v10/t5t_IQMbOp2SEwuncwLRjMfIg1yYit_nAw8cj2M.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
  
@font-face {
    font-family: 'Raleway';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: local('Raleway Italic'), local('Raleway-Italic'), url(https://fonts.gstatic.com/s/raleway/v16/1Ptsg8zYS_SKggPNyCg4TYFq.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
  
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v16/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
  
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('Raleway SemiBold'), local('Raleway-SemiBold'), url(https://fonts.gstatic.com/s/raleway/v16/1Ptrg8zYS_SKggPNwPIsWqZPAA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
  
@font-face {
    font-family: 'Alex Brush';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Alex Brush Regular'), local('AlexBrush-Regular'), url(https://fonts.gstatic.com/s/alexbrush/v11/SZc83FzrJKuqFbwMKk6EhUXz7Q.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Pacifico';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v16/FwZY7-Qmy14u9lezJ-6H6Mk.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  
html {
    font-size: 20px;
    height: 100vh;
    background-image: url("../images/kevin-bosc-t8tzs7SYooE-unsplash.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

body {
    width: 80%;
    height: 100%;
    min-width: 1080px;
    max-width: 1320px;
    margin: 0 auto;
    font-family: 'Raleway', sans-serif;
    text-align: center;
}

#main {
    margin: 10% 0;
    border-radius: 2rem;
    background-color: rgba(213, 211, 210, 0.75);
}

/* Header */
header {
    width: 100%;
    padding: 2.5%;
}

nav {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

nav li {
    list-style: none;
    color: rgba(177, 182, 184, 1);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.1rem;
    text-transform: lowercase;
    padding: 0 1rem;
}

nav a {
    color: rgba(037, 058, 073, 1);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.1rem;
    text-decoration: none;
}

nav a:hover {
    color:rgba(156, 78, 0, 1);
}

#active {
    border-bottom: 2px solid rgba(156, 78, 0, 1);
}

#left-nav,
#right-nav {
    width: 25%;
    display: inline-flex;
    justify-content: space-evenly;
}

#header-img {
    width: 50%;
    flex-shrink: 3;
}

#date {
    font-family: 'Alex Brush';
    font-size: 2.5rem; 
    letter-spacing: 0.1rem;
}

.brush-num {
    font-size: 2rem;
}

#countdown {
    font-size: 1.25rem;
    letter-spacing: 0.5rem;
}

h1 {
    color: rgba(037, 058, 073, 1);
    line-height: 1.5rem;
}

/* Main Body */
main section {
    margin:1rem 0;
}

.text h2 {
    font-family: 'Pacifico';
    font-weight: 200;
    font-size: 2rem;
    text-transform: capitalize;
    color: rgba(156, 78, 0, 1);
    border-radius: 0.65rem;
}

.text-box {
    font-size: 1rem;
    color: rgba(037, 058, 073, 1);
    background-color: rgba(213, 211, 210, 1);
    border: 3px dashed rgba(037, 058, 073, 1);
    border-radius: 2rem;
    margin-top: -15px;
    padding: 1.5rem 2rem;
}

.img-divider {
    width: 100%;
    height: 15rem;
}

#first-div {
    margin-top: -1rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#second-div {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#third-div {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* Footer */
footer {
    margin-top: 2rem;
    padding: 2.5%;
    color: rgba(037, 058, 073, 1);
}

#hashtag {
    font-family: "Alex Brush";
    font-size: 2rem;
    letter-spacing: .1rem;
}

#credit {
    font-size: 0.6rem;
}

#credit a {
    color: rgba(156, 78, 0, 1);
    text-decoration: none;
}

/* Media Queries */
@media only screen and (max-width: 1080px) {
    body {
        width: 95%;
        min-width: 800px;
    }

    #nav-left, #nav-right {
        width: 35%;
    }

    #header-img {
        width: 30%;
    }
}

@media only screen and (orientation: portrait) {
    html {
        font-size: 15px;
    }
    
    body {
        width: 100%;
        min-width: 590px;
        opacity: 1;
        border-radius: 0;
    }

    nav li {
        font-size: 1.5rem;
    }

    nav a {
        font-size: 1.5rem;
    }
}