*{
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    -webkit-tap-highlight-color: rgb(0, 0, 0, 0);
    font-family: 'Roboto Mono', monospace;
}

:root{
    --teal: rgb(10, 116, 109);
    --white: white;
    --black: black;
    --dark-letters: rgb(0, 26, 24);
    --alt-dark-letters: rgb(70, 78, 76);
    --progress-circles: rgb(184, 218, 213);
    --selected-progress-circle: rgb(136, 165, 162);
}

body, html{
    overflow-x: hidden;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

/* Track for scrollbar */
::-webkit-scrollbar-track {
    background: rgb(32, 34, 36); 
}

/* Handle of scrollbar */
::-webkit-scrollbar-thumb {
    background: rgb(136, 165, 162); 
    border-radius: 5px;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
}

/* All the main four containers */
.container{
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    min-height: 100svh;
    background: var(--white);
}

/* All the main four backgrounds */
.background{
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    background: var(--white);
}

/******************* Start of name container stuff *******************/

#name-bg{
    position: relative;
    background: var(--teal);
    border-radius: 0 0 0 100px;
    margin-left: 10vw;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow: hidden;
}

.palette{
    margin: 3%;
    font-size: 1.7rem;
    align-self: flex-end;
    margin-right: 6%;
    color: white;
    background: transparent;
    cursor: pointer;
    opacity: 0.7;
}

.palette:hover{
    opacity: 1 !important;
}

/* Container of all four change color buttons */
.btns-container{ 
    display: none;
    position: absolute;
    top: 8%;
    right: 8.5%;
    flex-wrap: wrap;
    justify-content: center;
    min-height: calc(3rem + 4%);
    width: 13rem;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 2rem;
    border-top-right-radius: 0;
}

/* Both of the groups of two change colour buttons */
.button-group{ 
    min-height: calc(3rem + 4%);
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-width: 5rem;
    margin-right: 2%;
    margin-left: 2%;
}

.color-btn{
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    margin-top: 5%;
    margin-right: 5%;
    cursor: pointer;
}

@media screen and (max-width: 650px) {
    .btns-container{
        top: 4%;
        right: 12.5%;
        width: 10rem;
    }

    .button-group{
        min-width: 4rem;
    }

    .color-btn{
        width: 1.75rem;
        height: 1.75rem;
        margin: 3% 4%;
    }
}

.color-btn:hover{
    opacity: 0.7;
}

#red-mode-btn, #blue-mode-btn{
    margin-left: 5%;
    margin-right: 0;
}

#dark-mode-btn{
    background: rgb(0, 14, 17);
}

#red-mode-btn{
    background: rgb(155, 7, 7);
}

#blue-mode-btn{
    background: rgb(0, 255, 242);
}

/******************* End of name container stuff *******************/

/******************* Start of portfolio container stuff *******************/

#portfolio-container{
    background: var(--teal);
}

#portfolio-bg{
    margin-right: 10vw;
    border-radius: 0 100px 100px 0;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    padding: 3rem;
}

#cover{
    background: var(--teal);
    width: 10vw;
    margin-left: -10vw;
    z-index: 10;
}

.my-projects{
    color: var(--dark-letters);
    font-size: min(3.5rem, 5vw);
    /* margin: 2% 0; */
    font-family: 'Rubik Mono One', sans-serif;
    font-weight: 100;
    justify-self: center;
    text-align: center;
    width: 100%;
}

.all-projects{
    min-height: 70%;
    width: 90%;
    margin-left: 7%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.project-container{
    width: 100%;
    height: fit-content;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    display: flex;
    left: 0;
}

.all-projects > .project-container ~ .project-container{
    display: none;
    left: 200%;
}

.project{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    min-height: fit-content;
}

.project-title{
    font-size: min(2rem, 3vw);
    color: var(--alt-dark-letters);
    margin-bottom: 3%;
    text-align: center;
    padding: 0 10%;
}

.linked-title{
    cursor: pointer;
}

.project-description{
    color: var(--dark-letters);
    width: 25%;
    margin-bottom: 1%;
    margin-right: 1%;
    margin-left: 5%;
    text-align: right;
    align-self: center;
    justify-self: end;
    font-size: min(1.23rem, 2vw);
}

#enph253-description{
    width: 32%;
}

#enph353-description{
    width: 35%;
}

.site-btn{
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site:hover{
    opacity: 85%;
}

.site{
    cursor: pointer;
    width: 100%;
}

.arrow{
    background: transparent;
    font-size: 2rem;
    color: var(--black);
    position: absolute;
    top: 150%;
    left: 88%;
    cursor: pointer;
    z-index: 5;
}

.all-projects > .arrow ~ .arrow{
    left: 200%
}

.photos{
    width: 45%;
    margin-right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
}

#pong-photo-container{
    width: 60%;
}

#chess-photo-container{
    width: 40%;
}

#claw-photos-container, #chair-photos-container, #egg-photos-container{
    width: 60%;
}

.project-photo{
    margin: 3%;
    width: min(78%, 16rem);
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border: 1px solid var(--black);
    border-radius: 5px;
}

#pong-photo{
    aspect-ratio: auto;
    width: min(100%, 40rem);
}

#pong-photo-2{
    aspect-ratio: auto;
    display: none;    
}

#chess-photo{
    aspect-ratio: auto;
    width: min(85%, 20rem);
    margin: 0;
}

#enph253-photo{
    aspect-ratio: auto;
    width: min(90%, 25rem);
    /* margin: 0; */
}

#enph353-photo{
    aspect-ratio: auto;
    width: min(110%, 35rem);
    /* margin: 0; */
}

.project-progress{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.progress-circle{
    border-radius: 50%;
    width: min(1rem, 3vw);
    height: min(1rem, 3vw);
    margin: 0 0.3rem;
    background: var(--selected-progress-circle);
}

.project-progress > .progress-circle ~ .progress-circle{
    background: var(--progress-circles);
}

@media screen and (max-width: 1025px) {
    #portfolio-bg{
        padding: 10%;
    }
    
    .my-projects{
        font-size: max(1.5rem, 4vw);
    }

    .project{
        flex-direction: column;
    }

    .project-container{
        align-self: center;
    }

    .project-title{
        font-size: max(1rem, 3.5vw);
        width: 115%;
    }

    .project-description, #enph253-description, #enph353-description{
        width: 95%;
        text-align: center;
        font-size: max(0.85rem, 2.5vw);
        margin: 1rem 0;
    }

    #enph353-description{
        width: 100%;
        padding-left: 2%;
    }

    .photos, #enph353-photo, #pong-photo-container, #chess-photo-container, 
    #claw-photos-container, #chair-photos-container, #egg-photos-container{
        width: 98%;
        align-self: center;
    }

    .project-photo{
        width: 70%;
        align-self: center;
    }

    #enph253-photo{
        width: 90%;
        align-self: center;
    }

    #pong-photo{
        display: none;
        width: 90%;
    }

    #pong-photo-2{
        display: flex;
        width: 60%;
    }

    .photo-2{
        display: none;
    }

    #chess-photo{
        width: 80%;
    }

    #portfolio-bg{
        padding-bottom: 0;
        padding-top: 1%;
    }

    .arrow{
        font-size: max(1.5rem, 4vw);
    }

    .progress-circle{
        margin-bottom: 1rem;
    }
}

/******************* Start of contact container stuff *******************/

#contact-bg{    
    background: var(--teal);
    margin-left: 10vw;
    border-radius: 100px 0 0 0;
    flex-direction: column;
    justify-content: space-evenly;
}

.all-info{
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.my-info{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 2%;
    padding-left: 15%;
    padding-right: 8%;
}

.email{
    user-select: none;
    color: white;
    font-size: min(3rem, 10vw);
    margin-bottom: 5%;
    font-family: 'Rubik Mono One', sans-serif;
    font-weight: 100;
}

.my-email{
    color: white;
    font-size: min(2rem, 5vw);
    font-weight: 100;
}

.your-info{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 2%;
    padding-left: 7%;
}

.your-email, .your-message, .send{
    border: 2px solid black;
    border-radius: 5px;
    width: min(27rem, 60vw);
    padding: 2% 4%;
    font-size: min(1.3rem, 5vw);
    margin-bottom: 3%;
    background: white;
    opacity: 0.8;
}

.send{
    width: min(10rem, 20vw);
    border-radius: 10px;
    background: rgb(255, 255, 255, 0.9);
    cursor: pointer;
}

.send:hover{
    opacity: 1;
    background: rgb(255, 255, 255, 1);
}

.your-message{
    height: 12rem;
    resize: none;
}

.your-email:focus, .your-message:focus{
    outline: 0;
    opacity: 1;
}

#coding-for{
    color: rgb(255, 255, 255, 0.85);
    font-size: min(4.5vw, 1.3rem);
    font-weight: 550;
    text-align: center;
    margin-bottom: 5vh;
    padding: 0 10%;
    user-select: none;
}

@media screen and (min-width: 1450px) {
    .all-info{
        justify-content: flex-start;
    }
}

@media screen and (max-width: 600px) {
    .all-info{
        padding-top: 5rem;
    }
}

/******************* End of contact container stuff *******************/