/* ======= DARK MODE STYLES ======= */
html.dark-mode,
html.dark-mode body {
  background-color: #141414;
  color: #f8f7f3;
}

html.dark-mode .info {
  background-color: #141414;
}

html.dark-mode .info a {
  color: #f8f7f3;
}
/* ========= ============ ========= */

body, html {
    font-family: "Schibsted Grotesk", sans-serif;
    margin-left: 5vw;
    margin-right: 5vw;
    background-color: #f8f7f3;
}

p, a {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    font-family: "Newsreader";
    color: inherit;
}

.about-img {
    width: 400px;
    max-width: 100%;
    border-radius: 10px;
    border: 0.8px solid #000;
    align-self: center;
}

.about-img-wide {
    width: 600px;
    display: block;
    border-radius: 10px;
    border: 0.8px solid #000;
}

.citeref-link {
    color: inherit;
    text-decoration: none;
    margin: 7px;
    font-weight: 700;
    font-family: "Schibsted Grotesk", sans-serif;
}

.citeref-link:hover {
    color: inherit;
    text-decoration: underline;
}

li {
    font-family: "Schibsted Grotesk";
    font-size: 19.5px;
}

h1 {
    text-align: left;
    font-weight: 400;
    padding: 0.05rem;
    margin: 0.05rem;
    padding-bottom: 5px;
}

h3 {
    text-align: left;
    font-weight: 100;
    padding: 0.05rem;
    margin: 0.05rem;
    padding-bottom: 10px; /* Pad the bottom of the main content h3 */
}

.content h3 {
    padding: 0.01rem; /* Reduce the margins above and below sub content h3*/
    margin: 0.01rem;
    color: rgb(130, 130, 130); 
}

h2 {
    font-weight: 200;
    padding: 0.05rem;
    margin: 0.05rem;
    color: rgb(130, 130, 130); 
}

hr {
    margin-top: 0;
    width: 85%;
    height: 1px;
    border: none;
    flex-shrink: 0;
    background-color: rgb(70, 70, 70); 
}

/* This is a mobile "Close" button that is is 
un-hidden when window is smaller than the max-width. */
button {
    display: none;
    font-family: "Schibsted Grotesk", sans-serif;
    font-weight: 500;
    border-radius: 10px;
    background-color: #f8f7f3;
    border-color: #949393;
    padding: 10px 20px;
}

.navbar {
    padding-top: 1vh;
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* Justify Navbar elements equally */
}

.nav_button {
    display: flex;
    width: 38px;
    height: 38px;
    padding: 10px;
    transition: transform 0.5s;
}

.nav_button:hover {
    transform: scale(1.5, 1.5);  
}

.main-content {
    display: flex;
    flex-direction: column;
    justify-content: right;
    align-items: center;
    width: 80vw;
    height: 100vh;
    padding: 2vw;
    margin-left: 20vw;
    transition: margin-left 0.5s; /* Create a smooth transition when sidebar is toggled */
    font-size: 18px;
}

.main-content p {
    max-width: 40vw;
    font-size: larger;
}

/* Optional styling to bump the end card in the main content down some */
.end-card {
    margin-top: 40vh;
    margin-bottom: 5vh;
}

.content {
    display: flex;
    flex-direction: column;
}
 
/* Styling for flexboxes to be side-by-side. */
.layout {
    display: flex;
    flex-direction: row;
}

.sidebar h2 {
    font-weight: 200;
    padding: 0.05rem;
    margin: 0.05rem;
    margin-bottom: 10vh;
}

.sidebar hr {
    width: 100%;
    background-color: rgb(55, 55, 55); 
}

.sidebar {
    display: flex;
    position: absolute;
    width: 20vw;
    height: 100vh;
    justify-content: flex-start;
    align-items: flex-start;
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.4s, transform 0.4s;
}

.sidebar p {
    font-size: 17px;
    font-family:Georgia, 'Times New Roman', Times, serif;
}

.info a{
    color: #1a1a1a;
    text-decoration: none;
    margin: 0.5px;
    font-weight: 700;
    font-family: "Schibsted Grotesk", sans-serif;
}

/* TODO: From 550px up to 1000px you get some weird sidebar behavior. FIX. */
@media (max-width: 550px) {
    p, a {
        font-size: medium;
        line-height: 1.4;
        font-family: "Newsreader";
        color: inherit;
        font-size: 17px;
    }

    li {
        font-size: 17px;
        font-weight: 300;
        font-family: "Newsreader";
    }

    h1 {
        font-size: x-large;
        text-align: left;
        font-weight: 400;
        padding: 0.05rem;
        margin: 0.05rem;
        padding-bottom: 5px;
    }

    h3 {
        font-size: larger;
        text-align: left;
        font-weight: 500;
        padding: 0.01rem;
        margin: 0.01rem;
        padding-bottom: 5px;
    }

    h2 {
        font-size: larger;
        font-weight: 200;
        padding: 0.05rem;
        margin: 0.05rem;
    }

    hr {
        margin-top: 0;
        width: 98%;
        height: 1px;
        border: none;
        flex-shrink: 0;
    }
    
    .sidebar {
        width: 80vw;
        height: 98vh;
        padding: 2vw;
        border: solid 0.2px rgb(65, 65, 65);
    }
 
    .nav_button {
        width: 29px;
        height: 29px;
        padding: 10px;
    }
 
    .main-content {
        margin-left: 0vw;
    }
 
    .main-content .content p {
        padding-top: 1.5vh;
        max-width: 100vw;
        font-size: 17px;
    }
 
    button {
        margin-top: 1.2vh;
        display: block;
    }
 
    .sidebar h2 {
        margin-bottom: 2vh;
    }

    .sidebar p {
        font-size: 14px;
    }

    .end-card {
        margin-top: 40vh;
        width: 100%;
    }
    
    .end-card p {
        font-size: 17px;
        margin: 0 auto;
        margin-bottom: 5vh;
        
    }

    .about-img,
    .about-img-wide {
        width: auto;
        max-width: 90vw;
        align-self: center;
    }

}