/* Body and HTML styling, setting display as flexbox, an height to 100%, as well as font */
body, html {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: "Jost", sans-serif;
}
/* Removing margin from h1, to allow proper centering of text */
h1 {
    margin: 0;
}
/* footer styling */
footer {
    height: auto;
    font-size: 1.25vh;
    text-align: center;
    color: darkgray;
}
.flex-container {
    display: flex;
    flex-wrap: wrap;
    height: 95%;
    min-height: 95%;
    margin: 0;
    padding: 0;
}
.menu-icon {
    display: none;
}
.indented {
    text-indent: 1em;
}
.smaller {
    font-size: 85%;
}
.desc {
    font-size: 70%;
    margin: 0;
    color: rgb(82, 82, 82);
    font-style: italic;
    text-align: left;
    margin-left: 1.5em;
    margin-right: 1.5em;
}
/* Link styling */
a.nav-link:link,
a.nav-link:visited {
    color: black;
    text-decoration: none;
}
a.nav-link:hover {
    color: black;
    text-decoration: underline;
}
a.nav-link:active {
    color: black;
    text-decoration: none;
}
.currentpage {
    color: rgb(100, 100, 100);
    text-decoration: none;
}
#left, #right {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#right {
    animation: fadeInAnimation ease 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
/* Fade in animation code */
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}



/* For tablets and smaller devices
@media (max-width: 768px) {
    #left, #right {
        width: 100%; 
        align-items: normal;
        justify-content: start;
        display: block;
    }
    #left {
        height: 100px;
    }
    h1 {
        margin: 0;
    }

    .desc {
        font-size: 45%;
    }

    img {
        width: 100%;
        height: auto;
    }

    footer {
        font-size: 48pt; 
    }
    .menu-icon {
        display: block;
        color: rgb(100, 100, 100);
        font-size: 80%;
    }
    #nav-menu {
        display: none;
    }
    #nav-menu.open {
        display: block;
        padding: 15px;
        animation: fadeInAnimation ease 0.5s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        text-align: center;

    }
    #head-nav-bar {
        display: flex;
        flex-direction: row;
        padding: 15px;
    }
    #title {
        flex-grow: 10;
    }
    .indented {
        text-indent: 0;
    }
    #hori-rule {
        display: block;
    }
    #right.closed {
        display: none;
    }
}
*/

/* For mobile devices */
@media (max-width: 1200px) {
    h1 {
        font-size: 6vw; /* Adjust font size for headers */
        margin: 0;
    }
    .smaller {
        font-size: 90%; /* Slightly larger font size for better readability */
    }

    .desc {
        font-size: 2vw; /* Larger description text */
    }

    #left, #right {
        width: 100%;
        padding: 3vw; /* Reduce padding on smaller screens */
        align-items: normal;
        justify-content: start;
        display: block;
    }
    #left {
        height: 12.5%;
    }
    #right {
        height: 87.5%;
    }

    img {
        width: 100%; /* Adjust image size on mobile */
    }

    footer {
        font-size: 2vw; /* Larger font for footer */
        height: auto;
    }
    .menu-icon {
        display: block; /* Show menu-icon on mobile devices */
        color: rgb(100, 100, 100);
        font-size: 80%;
    }
    #nav-menu {
        display: none;
    }
    #nav-menu.open {
        display: block;
        animation: fadeInAnimation ease 0.5s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        text-align: center;
        
    }
    #head-nav-bar {
        display: flex;
        flex-direction: row;
        padding: 3.5vw;
    }
    #title {
        flex-grow: 10;
    }
    .indented {
        text-indent: 0;
    }
    a.nav-link, .currentpage {
        font-size: 150%;
    }
    p.nav-link {
        font-size: 0;
        margin-top: 6vw;
    }
    #hori-rule {
        display: block;
    }
    #right.closed {
        display: none;
    }
}