* {
    margin: 0;
    padding: 0;
}

h1, h2, p, .fontLora, .fontLoraSemiBold, .fontLoraBold {
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-style: normal;
}
.fontLora {
    font-weight: 400;
}
p, .fontLoraSemiBold{
    font-weight: 500;
    color: rgb(108, 84, 58);
}
h1, h2, .fontLoraBold {
    font-weight: 700;
    color: rgb(140, 74, 48);
}

body {
    background-color:rgb(93, 107, 86);
    background-image:
    radial-gradient(circle at 100% 150%, rgb(93, 107, 86) 24%, rgb(69, 50, 32) 24%, rgb(69, 50, 32) 28%, rgb(93, 107, 86) 28%, rgb(93, 107, 86) 36%, rgb(69, 50, 32) 36%, rgb(69, 50, 32) 40%, transparent 40%, transparent),
    radial-gradient(circle at 0    150%, rgb(93, 107, 86) 24%, rgb(69, 50, 32) 24%, rgb(69, 50, 32) 28%, rgb(93, 107, 86) 28%, rgb(93, 107, 86) 36%, rgb(69, 50, 32) 36%, rgb(69, 50, 32) 40%, transparent 40%, transparent),
    radial-gradient(circle at 50%  100%, rgb(69, 50, 32) 10%, rgb(93, 107, 86) 10%, rgb(93, 107, 86) 23%, rgb(69, 50, 32) 23%, rgb(69, 50, 32) 30%, rgb(93, 107, 86) 30%, rgb(93, 107, 86) 43%, rgb(69, 50, 32) 43%, rgb(69, 50, 32) 50%, rgb(93, 107, 86) 50%, rgb(93, 107, 86) 63%, rgb(69, 50, 32) 63%, rgb(69, 50, 32) 71%, transparent 71%, transparent),
    radial-gradient(circle at 100% 50%, rgb(69, 50, 32) 5%, rgb(93, 107, 86) 5%, rgb(93, 107, 86) 15%, rgb(69, 50, 32) 15%, rgb(69, 50, 32) 20%, rgb(93, 107, 86) 20%, rgb(93, 107, 86) 29%, rgb(69, 50, 32) 29%, rgb(69, 50, 32) 34%, rgb(93, 107, 86) 34%, rgb(93, 107, 86) 44%, rgb(69, 50, 32) 44%, rgb(69, 50, 32) 49%, transparent 49%, transparent),
    radial-gradient(circle at 0    50%, rgb(69, 50, 32) 5%, rgb(93, 107, 86) 5%, rgb(93, 107, 86) 15%, rgb(69, 50, 32) 15%, rgb(69, 50, 32) 20%, rgb(93, 107, 86) 20%, rgb(93, 107, 86) 29%, rgb(69, 50, 32) 29%, rgb(69, 50, 32) 34%, rgb(93, 107, 86) 34%, rgb(93, 107, 86) 44%, rgb(69, 50, 32) 44%, rgb(69, 50, 32) 49%, transparent 49%, transparent);
    background-size: 100px 50px;
    /* Background pattern courtesy of https://projects.verou.me/css3patterns/ */
    display: flex;
    justify-content: center;
    align-items: center;
}

.main {
    background-color: rgb(189, 189, 160);
    position: relative;
    padding: 15px;
    padding-top: 0px;
    width: 1300px;
}

/* -- Navbar Styles -- */

#navbar {
    background-color: rgb(189, 189, 160);
    height: 150px;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbarTitle {
    font-size: 50px;
}

.navbarButtons {
    display: flex;
    gap: 2vmin;
    padding: 5px;
    align-self: center;
}

.navbarButtons > button {
    background-color: rgb(189, 189, 160);
    padding: 10px;
    border-color: transparent;
    outline: 0;
}

.navbarButtons button > h1 {
    -webkit-transition: color 0.1s;
    -moz-transition: color 0.1s;
    -o-transition: color 0.1s;
    transition: color 0.1s;
    
    font-size: 40px;
}

.navbarButtons button > h1:hover {
    color: rgb(196, 109, 94);
}

/* -- Title Section Styles -- */

#title {
    padding-bottom: 15vmin;
    position: relative;
    text-align: center;
    font-size: 70px;
    border-bottom: 2px solid black;
}

.titleContent {
    padding-top: 5vmin;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.titleContent > img {
    border-radius: 50%;
    object-fit: cover;
    object-position: center 30%;
    width: 350px;
    height: 350px;
}

.titleContent > p {
    max-width: 50vw;
    padding-left: 30px;
    font-size: 33px;
}

/* -- Projects Section Styles -- */

#projects {
    padding: 2vmin;
    border-bottom: 2px solid black;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2vmin;
}

.projectsTitle {
    padding: 1vmin;
    font-size: 85px;
    text-align: center;
    width: 100%;
}

.projectContainer {
    background-color: rgb(224, 224, 195);
    -webkit-transition: background-color 0.2s;
    -moz-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
    transition: background-color 0.2s;

    padding: 5px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 450px;
    height: 450px;
    border: 2px solid black;
}

.projectContainer:hover {
    background-color: rgb(218, 218, 208);
}

.projectMedia {
    display: flex;
    height: 65%;
}

.projectMedia > video, .projectMedia > img {
    display: flex;
    object-fit: contain;
    object-position: 50% 50%;
    width: 100%;
    height: 100%;
}

.projectContent {
    background-color: transparent;
    padding: 5px;
    height: 35%;
    width: 90%;
}

.projectContent > h1 {
    font-size: 35px;
}

.projectContent > h1.smallerTitle {
    font-size: 27px;
} 

.projectContent > p {
    font-size: 17px;
    padding-top: 5px;
}

/* -- About Me Section Styles -- */

#aboutMe {
    display: flex;
    border-bottom: 2px solid black;
}

.aboutMeTitle {
    text-align: center;
    font-size: 35px;
    width: 30%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 2px solid black;
}

.aboutMePages {
    width: 70%;
}

.aboutMePages div > h1 {
    font-size: 80px;
}

.aboutMePages div > p {
    width: 90%;
    font-size: 25px;
    line-height: 1.6;
    padding-top: 2vmin;
    padding-bottom: 2vmin;
}

.aboutMePageOne {
    justify-content: space-evenly;
}

.aboutMePageOne, .aboutMePageTwo {
    display: flex;
    flex: 0 1 auto;
    max-height: 100%;
    flex-direction: column;
    align-items: center;
}

.aboutMePageTwoImages {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 2vmin;
    padding-bottom: 2vmin;
}

.aboutMePageTwoImages > img {
    width: 20%;
    height: auto;
}

/* Contact Me Styles */

#contactMe {
    padding: 5px;
    text-align: center;
}

#contactMe > h1 {
    font-size: 65px;
}

#contactMe > p {
    font-size: 25px;
}

.contactMeButtons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding-top: 4vmin;
}

.contactContainer, #emailContainer {
    background-color: rgb(224, 224, 195);
    -webkit-transition: background-color 0.2s;
    -moz-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
    transition: background-color 0.2s;

    display: flex;
    width: 450px;
    height: 250px;
}

.contactContainer:hover, #emailContainer:hover {
    background-color: rgb(218, 218, 208);
}

.contactMedia {
    padding: 5px;
    max-width: 40%;
    height: 100%;
    object-fit: contain;
}

.contactContainer > h1, #emailContainer > h1 {
    width: 60%;
    text-align: center;
    align-self: center;
    font-size: 50px;
}

@media only screen and (min-width: 830px) and (max-width: 1299px) {
    .main {
        width: 100%;
    }

    /* -- Navbar Styles -- */

    #navbar {
        gap: 2vmin;
    }

    .navbarTitle {
        display: flex;
        align-items: center;
        font-size: 25px;
    }
    
    .navbarButtons {
        gap: 0vmin;
    }
    
    .navbarButtons > button {
        position: relative;
        top: 5px;
    }
    
    .navbarButtons button > h1 {
        font-size: 30px;
    }

    /* -- Title Section Styles -- */

    #title {
        font-size: 65px;
    }

    .titleContent {
        padding-top: 3vmin;
        flex-direction: column;
        gap: 2vmin;
    }

    .titleContent > img {
        width: 300px;
    }

    .titleContent > p {
        padding-left: 0vmin;
        max-width: 600px;
        font-size: 30px;
    }

    /* -- Projects Section Styles -- */

    .projectsTitle {
        font-size: 80px;
    }

    .projectContainer {
        width: 370px;
        height: 370px;
    }

    .projectContent > h1 {
        font-size: 30px;
    }

    .projectContent > h1.smallerTitle {
        font-size: 25px;
    } 

    .projectContent > p {
        font-size: 13px;
        padding-top: 0px;
    }

    /* -- About Me Section Styles -- */

    .aboutMeTitle {
        font-size: 27px;
    }

    /* -- Contact Me Section Styles -- */

    .contactContainer, #emailContainer {
        width: 350px;
        height: 200px;
    }
    
    .contactContainer:hover, #emailContainer:hover {
        background-color: rgb(218, 218, 208);
    }
    
    .contactMedia {
        max-width: 35%;
    }
    
    .contactContainer > h1, #emailContainer > h1 {
        width: 65%;
        font-size: 45px;
    }
}

@media only screen and (max-width: 829px) {
    .main {
        padding: 0px;
        width: 100%;
    }

    /* -- Navbar Styles -- */

    #navbar {
        gap: 2vmin;
    }

    .navbarTitle {
        display: flex;
        flex-wrap: wrap;
        width: 20vmin;
        align-items: center;
        font-size: 3.7vmin;
    }
    
    .navbarButtons {
        gap: 0vmin;
    }
    
    .navbarButtons > button {
        padding: 1vmin;
        position: relative;
        left: 2vmin;
    }
    
    .navbarButtons button > h1 {
        font-size: 4vmin;
    }

    /* -- Title Section Styles -- */

    #title {
        font-size: 8vmin;
    }

    .titleContent {
        padding-top: 3vmin;
        flex-direction: column;
        gap: 2vmin;
    }

    .titleContent > img {
        width: 80vmin;
    }

    .titleContent > p {
        padding-left: 0vmin;
        max-width: 600px;
        font-size: 6vmin;
    }

    /* -- Projects Section Styles -- */

    .projectsTitle {
        font-size: 12vmin;
    }

    .projectContainer {
        width: 100vmin;
        height: 100vmin;
    }

    .projectContent > h1 {
        font-size: 7.5vmin;
    }

    .projectContent > h1.smallerTitle {
        font-size: 6.75vmin;
    } 

    .projectContent > p {
        padding-top: 0px;
        font-size: 3.5vmin;
    }

    /* -- About Me Section Styles -- */

    .aboutMeTitle {
        font-size: 4vmin;
    }

    .aboutMePages div > h1 {
        font-size: 12vmin;
    }

    .aboutMePages div > p {
        font-size: 4vmin;
    }

    .aboutMePageTwoIcon {
        padding: 20px;
        width: 30%;
        height: auto;
    }

    /* -- Contact Me Section Styles */

    #contactMe > h1 {
        font-size: 12vmin;
    }
    
    #contactMe > p {
        font-size: 5vmin;
    }

    .contactMeButtons {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        padding-top: 4vmin;
    }
    
    .contactContainer, #emailContainer {
        width: 40vmin;
        height: 30vmin;
    }
    
    .contactMedia {
        max-width: 25%;
    }
    
    .contactContainer > h1, #emailContainer > h1 {
        width: 65%;
        font-size: 6vmin;
    }
}