html.sr .load-hidden {
    visibility: hidden;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    font-family: 'Poppins', Verdana, sans-serif;
    font-size: 1.2rem;
    color: #261B11;
}
#content {
    width: 1120px; /* when screen size >= 1400px */
    margin: 3rem auto 5rem auto;
}

/* NAV */
#navbar {
    text-align: right;   
    background-color: #787D76;
}
#navbar-btn {
    display: none;
    color: white;
    padding: 1rem 2rem;
    width: 1em;
    margin-left: auto;
    margin-right: 0;
}
#navbar-btn:hover {
    background-color: #A3A697;
}
#nav {
    display: flex;
    justify-content: right;
    background-color: #f1f1f1;
    transition: all 300ms;
}
a {
    font-family: 'Noto Sans Mono', monospace;
    font-weight: bold;
    color: #261B11;
    transition: all 300ms;
}
#nav a {
    padding: 1rem 2rem;
    color: #787D76;
}
#nav a:hover {
    color: #A3A697;
}
#active-nav {
    background-color: #e7e7e7;
    border-bottom: 2px solid #787D76;
}
#active-nav a {
    color: #787D76;
}

/* HEADER */
#header {
    display: flex;
    flex-wrap: wrap;
    padding-top: 3em;
    align-items: flex-end;
}
#header-text-div {
    flex: 9999 0 65%;
    margin-top: 3em;
    font-family: 'Zilla Slab', serif;
}
#header-img-div {
    width: 30%;
    flex: 1 0 30%;
    margin-left: auto;
    margin-right: auto;
}
h1 {
    margin-top: 0;
    font-size: 7rem;
    color: #826f61;
}
#header p {
    font-size: 1.4em;
}

/* OTHER HEADINGS */
h2 {
    font-family: 'Zilla Slab', serif;
    color: #787D76;
    font-size: 4rem;
    margin: 0.3em 0;
    text-shadow: 3px 3px #ddd;
}
h3 {
    font-style: italic;
    text-transform: uppercase;
}

/* CONTENT ROWS */
.row {
    margin: 5rem 0 3em 0;
    padding: 4rem;
}
.bg-gray {
    background-color: #f1f1f1;
}

/* BUTTONS */
.btn {
    padding: 0.8rem;
    border-radius: 1.2rem;
    box-shadow: 2px 2px gray;
    background-color: #c5bdb8;
    border: 2px solid #261B11;
    color: #261B11;
}
.btn-div a:hover {
    background-color: #826f61; 
    color: white;
}
.btn-div a {
    transition: all 300ms;
}

/* LINE/DIVIDER */
.line {
    flex-grow: 1;
    flex-shrink: 1;
    height: 2px;
    background-color: #787D76;
    margin: 0 2em;
}


/* FOOTER */
#footer {
    text-align: center;
    font-size: 2rem;
    padding: 1em;
    margin-top: 2em;
}
#footer i {
    color: #b1a59c;
    margin: 0 0.3em;
    transition: all 300ms ease-out;
}
#footer i:hover {
    color: #826f61;
    margin: 0 0.3em;
    font-size: 1.2em;
}

/* SHOW MORE/LESS */
.clickable {
    font-family: 'Noto Sans Mono', monospace;
    color: #826f61;
    transition: all 500ms;
}
.clickable:hover {
    background-color: #b1a59c;
    color: white;
    cursor: pointer;
}
.clicked {
    background-color: #826f61;
    color: white;
}
.clicked:hover {
    background-color: #826f61;
}

/* FLEXBOX */
.flex {
    display: flex;  
    align-items: center;
    justify-content: center;
}
.flex-align-start {
    align-items: flex-start;
}
/* for flex containers with text and image*/
.flex-img-s {
    flex: 1 0 20%;
}
.flex-img-m {
    flex: 1 0 30%;
}
.flex-text {
    flex: 9999 1 50%;
}
.left-img {
    margin-right: 5%;
}
.right-img {
    margin-left: 5%;
}

/* GENERAL STYLING */
.width-100 {
    width: 100%;
    height: auto;
}
.mt-0 {
    margin-top: 0;
}
.mb-0 {
    margin-bottom: 0;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.circle {
    border-radius: 50%;
}
.text-align-center {
    text-align: center;
}

@media(max-width: 1400px) {
    #content {
        width: 80%;
    }
}
@media(max-width: 1000px) {
    #header {
        flex-direction: column;
        align-items: flex-start;
    }
    #navbar-btn {
        display: block;
    }
    #nav {
        display: none;
        flex-direction: column;
    }
    #active-nav {
        border: 2px solid #787D76;
    }
}

@media(max-width: 600px) {
    #content {
        width: 90%;
    }
    h1 { 
        font-size: 20vw !important;
    }
    h2 {
        font-size: 10vw !important;
    }
    .row {
        padding-left: 8% !important;
        padding-right: 8% !important;
    }
    .optional-img {
        display: none;
    }
}