html, body {
    overflow-x: hidden;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* full viewport height */
}

main {
    flex: 1; /* takes all available vertical space */
    margin-top: 90px;
}

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

/* Initially hide the header */
.fade-in-header {
    opacity: 0;
    transition: opacity 1.72s ease-in-out;
}

header {
    background: linear-gradient(#158a69, #20cd9c);
    color: #000;
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1000;
}

h1 {
    margin: 0;
    width: 30%;
}

h1 a {
    text-decoration: none;
    color: #000;
    font-size: 1.25em;
}

h1 a:hover {
    color: #fff;
    font-size: 1.26em;
}

nav {
    width: 70%;
    display: flex;
    justify-content: flex-start;
    padding-right: 10px;
}

nav ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

nav li {
    margin: 0 20px;
    font-size: 1.15em;
    font-weight: 600;
}

nav li a {
    display: block;
    color: #000;
    text-decoration: none;
    padding: 5px 10px;
}

nav li a:hover {
    color: #fff;
    background-color: #111;
}

.menu-container {
    display: none;
    cursor: pointer;
}

h2 {
    text-align: center;
    font-size: 3em;
    margin: 40px auto 50px;
    animation: fadeInAnimation 1.2s ease-in-out forwards;
    opacity: 0;
}

/* Spacing between main sections */
.flexbox-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* center containers horizontally */
    gap: 50px; /* space between container blocks */
    min-height: 400px;
}

/* Individual container styling */
.container {
    background-color: rgba(17, 24, 39, 1);
    text-align: left;
    padding: 50px;
    margin: 0 auto;
    max-width: 800px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: white;
    font-size: 1.5em;
    font-weight: 700;
    border: 2px solid rgba(17, 24, 39, 1);
    border-radius: 8px;
    animation: fadeInAnimation 1s ease-in-out forwards;
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start; /* left align text */
    max-width: 800px; /* all containers same width */
    width: 100%;       /* responsive */
}

/* Spacing between items inside container */
.container .item {
    width: 80%;
    margin: 0 auto 25px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    line-height: 1.3;
    padding: 0 10px;
}

.item {
    white-space: normal;
}

/* Headings and italicized text spacing */
.item i {
    display: block;
    margin-bottom: 25px; /* spacing after italic paragraphs */
    line-height: 1.3;
}

/* Hobbies, links, and portfolio items spacing */
.item ul li {
    line-height: 1.3;
}

.item h3 {
    margin: 0 auto 10px auto;
    text-align: center;
}

/* Lists spacing */
.container ul {
    padding-left: 3em;
    margin-top: 10px;
    margin-bottom: 10px;
}

.container ul li {
    margin-bottom: 5px; /* vertical spacing between list items */
}

.container .disclaimer {
    display: block;
}


#js-disclaimer {
    text-align: center;
}

.summary {
    font-size: 1em;
    font-weight: 475;
    width: auto;
    margin: 0 auto;
}

.social-links {
    color: #189975;
    text-decoration: none;
}

.social-links:hover {
    color: #20cd9c;
}

.inhouse-links {
    color: #189975;
    text-decoration: dotted;
    font-size: 1.25em;
}

.inhouse-links:hover {
    text-decoration: underline;
    text-transform: none;
    font-size: 1.25em;
    font-weight: 550;
    ;
}

.project-links {
    color: #189975;
    text-decoration: dotted;
    font-size: 1.25em;
    margin: 0 auto;
}

.project-links:hover {
    color: #20cd9c;
    font-size: 1.255em;
    text-transform: uppercase;
    text-align: center;
    line-height: 90%;
}

iframe {
    display: block;
    margin: 55px auto 65px;
    width: 560px;
}

#info {
    margin: 50px 0 35px;
    text-align: center;
    color: #000;
}

#mobile {
    display: none;
    color: #000;
    font-size: 1.5em;
}

#mobile:hover {
    color: white;
    background: linear-gradient(#20cd9c, #189975);
}

#desktop {
    display: inline;
    color: #000;
}

footer {
    padding: 1em;
    border-top: 2px solid #000;
    background: linear-gradient(#20cd9c, #189975);
    color: rgba(17, 24, 39, 1);
    font-size: 1em;
    text-align: center;
    font-weight: 600;
}

#footer-anchor {
    font-size: 1.45em;
    color: rgba(17, 24, 39, 1);
    text-decoration: none;
}

#footer-anchor:hover {
    font-size: 1.48em;
}

/* Animation */

@keyframes fadeInAnimation {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade-in-header.show {
    opacity: 1;
}

/* MEDIA QUERIES */

@media screen and (max-width: 1334px) {

    main {
        margin-top: 155px;
    }

    .container {
        margin: 0 auto 30px auto;
    }

    h1 {
        margin-top: 10px;
        width: 40%;
    }

}



@media screen and (max-width: 1122px) {

    main {
        margin-top: 155px;
    }

    h1 {
        width: 50%;
    }

}


@media screen and (max-width: 1054px) {

    header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 15px 25px 10px 25px
    }

    h1 {
        width: 100%;
        margin-top: 10px;
        text-align: center;
    }

    nav {
        width: 70%;
        height: 60px;
        border: #111;
        background-color: #1caa82;
        display: flex;
        justify-content: center;
        position: relative;
    }

    /*
    .menu-text {
        display: none;
    }

    */

    nav ul {
        display: flex;
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    nav li {
        margin: 0;
        display: block;
        text-align: center;
        border-top: 1px solid #158a69;
        border-bottom: 1px solid #158a69;
    }

    nav li a {
        display: block;
        padding: 10px;
        color: #000;
        text-decoration: none;
    }

    /*
    .dropdown:hover ul {
        display: flex;
    }
        */

    main {
        margin-top: 155px;
    }

    .container {
        margin: 0 5% 30px 5%;
        font-size: 1.25em;
    }

    .container .item {
        margin: 0 auto;
        padding: 0 30px;
    }

    .project-links {
        margin-bottom: 20px;
    }

    #desktop {
        display: block;
        font-size: 1.5em;
    }

    #mobile {
        display: none;
    }
}

@media screen and (min-width: 799px) {
    .menu-text {
        display: none;
    }

    nav ul {
        display: flex;
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
}

@media screen and (max-width: 800px) {

    main {
        margin-top: 135px;
    }

    header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 15px 15px 10px 15px;
        margin: 0 auto 0 auto;
        width: 100%;
    }

    .menu-container {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 7px;
    }

    .menu-container div {
        width: 35px;
        height: 5px;
        background-color: #333;
        margin: 6px 0;
        transition: 0.4s;
    }

    h1 {
        width: 100%;
        margin-top: 10px;
        margin-bottom: 5px;
        text-align: center;
        font-size: 6vw;
    }

    nav {
        width: 70%;
        height: 0px;
        border: #198711;
        background-color: #1caa82;
        display: flex;
        justify-content: center;
        position: relative;
        text-align: center;
        padding: 0;
        margin-top: 5px;
    }

    nav ul {
        display: none;
        padding: 0;
        text-align: center;
        flex-direction: column;
        background-color: #20cd9c;
        position: absolute;
        top: 100%;
        width: 100%;
        left: 0;
        margin: 0;
        z-index: 999;
    }

    nav li {
        margin: 0;
        display: block;
        text-align: center;
        border-top: 1px solid #158a69;
        border-bottom: 1px solid #158a69;
    }

    nav li a {
        display: block;
        padding: 10px;
        color: #000;
        text-decoration: none;
    }

    /*
    .dropdown:hover ul {
        display: flex;
    }
        */

    h2 {
        font-size: 6.5vw;
        font-weight: 900;
    }

    .container {
        width: calc(100% - 20px);
        margin: 0 5% 30px 5%;
        font-size: 1.05em;
        padding: 30px 20px;
    }

    .container .item {
        margin: 10px auto;
        padding: 0 5px;
        width: 100%;
    }

    .project-links {
        margin: 15px auto 30px auto;
    }

    #desktop {
        display: block;
        font-size: 1.5em;
    }

    #mobile {
        display: none;
    }

    .menu-container .bar1,
    .menu-container .bar2,
    .menu-container .bar3 {
        width: 35px;
        height: 5px;
        background-color: #333;
        margin: 3px 0;
        transition: 0.4s;
    }

    .change .bar1 {
        transform: translate(0, 11px) rotate(-45deg);
    }

    .change .bar2 {
        opacity: 0;
    }

    .change .bar3 {
        transform: translate(0, -11px) rotate(45deg);
    }

    .menu-container ul {
        display: none;
        list-style-type: none;
        padding: 0;
        height: 35px;
        margin-top: 10px;
    }

    .menu-container ul li {
        width: 100%;
        height: 70px;
        background-color: #1caa82;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        text-align: center;
        padding: 0 25px;
        border-bottom: 2px solid #111;
    }

    .menu-container ul li:first-child {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }
    
    .menu-container ul li:last-child {
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }

    .menu-container ul li:hover {
        color: #fff;
    }

    .menu-container ul li a {
        height: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #111;
        background-color: #1caa82;
        font-size: 1.25em;
        font-weight: 900;
    }

    .menu-container ul li a:hover {
        text-decoration: none;
        color: #fff;
        background-color: #111;
    }

    .menu-container.show ul {
        display: block;
    }

    nav ul {
        display: none;
        padding: 0;
        text-align: center;
        flex-direction: column;
        background-color: #20cd9c;
        position: absolute;
        top: 100%;
        width: 100%;
        left: 0;
        margin: 0;
        z-index: 999;
    }

    #info {
        line-height: 95%;
    }

    #mobile {
        display: inline;
        color: #000;
        font-size: 1.5em;
    }

    #mobile:hover {
        color: white;
        background: linear-gradient(#20cd9c, #189975);
    }

    #desktop {
        display: none;
        color: #000;
    }

}


@media screen and (max-width: 575px) {

    header {
        margin: 0 auto 0 auto;
        padding: 10px 0 5px 0;
    }

    iframe {
        width: 90%;
    }

}


@media screen and (max-width: 500px) {

    main {
        margin-top: 95px;
    }

    .item h3 {
        text-align: center;
    }

    .project-links {
        text-align: center;
        line-height: 80%;
    }

    h2 {
        margin: 40px auto;
    }
}

@media screen and (max-width: 400px) {

    h2 {
        font-size: 7.5vw;
    }
}