home.css

body{
    align-items: center;
    padding:0;
    margin:0;
}

#welcomescreen{
    position: absolute;
    height: 100vh;
    width: 0;
    float: left;
    opacity: 0;
    background-color: #000000;
    animation: skinny 2s ease-out;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 106;
}

@keyframes skinny {
    0%{opacity: 1; width: 100vw;}
    75%{opacity: 1; width: 100vw;}
    100%{width: 0vw; opacity: 0;}
}

#spinnylogo{
    height: 300px;
    opacity: 1;
    animation: spin 10s linear infinite;
}

#initialslogo{
    height: 200px;
    position: absolute;
    top: calc(50vh - 110px);
}

@keyframes spin {
    100%{transform: rotate(365deg);}
}

#part1{
    display: flex;
    text-align: center;
    justify-content: center;
    justify-items: center;
    align-items: center;
    background: #faebd7;
    z-index: 0;
    height: 100vh;
    width: 100vw;
}

#blackdiv{
    position: fixed;
    height: 8px;
    width: 100vw;
    top: 0px;
    background-color: rgb(45, 45, 45);
    z-index: 100;
}

#scroller {
    height: 8px;
    width: 150px;
    background-color: #157ddf;
    position: fixed;
    left: 0;
    top: 0;
    animation: move-right 1s linear infinite;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);
    animation-iteration-count: 1;
    animation-fill-mode: both;
}
  
@keyframes move-right {
    to {
      transform: translate(calc(100vw - 150px), 0);
    }
}

#main{
    height: 60vh;
    animation: fade-in 2.5s ease;
}

@keyframes fade-in {
    0%{opacity: 0;}
    75%{opacity: 0;}
    100%{opacity: 1;}
}

#about{
    position: absolute;
    left: 50px;
    top: 4.2vh;
    color: #033a5b;
    text-decoration: none;
    font-family: 'Inconsolata';
    font-weight: 400;
    font-size: 22px;
    animation: fade-in 2.5s ease;
}

#projects{
    position: absolute;
    left: 150px;
    top: 4.2vh;
    color: #033a5b;
    text-decoration: none;
    font-family: 'Inconsolata';
    font-weight: 400;
    font-size: 22px;
    animation: fade-in 2.5s ease;
}

#contact{
    position: absolute;
    left: 280px;
    top: 4.2vh;
    color: #033a5b;
    text-decoration: none;
    font-family: 'Inconsolata';
    font-weight: 400;
    font-size: 22px;
    animation: fade-in 2.5s ease;
}

.underlines{
    border-radius: 10px;
    height: 2px;
    width: 0px;
    opacity: 0;
    background: #033a5b;
    transition: all 0.3s;
}

#one{
    position: absolute;
    left: 48px;
    top: 7.7vh;
}

#two{
    position: absolute;
    left: 148px;
    top: 7.7vh;
}

#three{
    position: absolute;
    left: 278px;
    top: 7.7vh;
}

#about:hover ~ #one{
    opacity: 1;
    width: 58px;
}

#projects:hover ~ #two{
    opacity: 1;
    width: 92px;
}

#contact:hover ~ #three{
    opacity: 1;
    width: 79px;
}

#logobackground{
    border-radius: 100%;
    width: 70px;
    height: 70px;
    position: absolute;
    top: 15px;
    left: calc(50vw - 35px);
    background-color: #033a5b;
}

#spinnylogo2{
    width: 80px;
    position:absolute;
    top: 10px;
    left: calc(50vw - 40px);
    animation: spin 10s linear infinite;
}

#initialslogo2{
    width: 30px;
    position: absolute;
    top: 16px;
    left: calc(50vw - 15px);
}

#outerdarkmode{
    position: absolute;
    top: 3.5vh;
    right: 30px;
    cursor: pointer;
    border: 4px solid #393939;
    background-color: white;
    border-radius: 25px;
    height: 35px;
    width: 60px;
    color: #393939;
    font-size: 2em;
    z-index:105;
    animation: fade-in 2.5s ease;
}

#innerdarkmode{
    position: relative;
    top: 2px;
    left: 2.5px;
    height: 31px;
    width: 31px;
    background-color: #393939;
    border-radius: 50%;
    transform: "";
    display: flex;
    justify-items: center;
}

#sunmoon{
    position: relative;
    top: -2px;
    margin:0;
    padding-left: 3px;
    font-size: 24px;
    color: white;
}

#part2{
    height: 600px;
    width: 100vw;
    background: #0b3243;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
    flex-direction: column;
}

#aboutbox{
    height: auto;
    width: 750px;
    border-radius: 5px;
    background-color: #0b3243;
    display: flex;
    align-items: center;
}

@keyframes bob{
    0%{transform: translate(0,0); }
    50%{transform: translate(0,7px);}
    100%{transform: translate(0,0);}
}

#aboutme{
    font-size: 50px;
    font-family: "Jost";
    padding-left: 50px;
    padding-right: 5vw;
    color: #faebd7;
    font-weight: bolder;
    margin-bottom: 0px;
    margin-top: 0px;
}

#abouttext{
    font-size: 17px;
    font-family: "Jost";
    padding-left: 50px;
    margin:0;
    color: white;
}

#part3{
    width: 100vw;
    height: 700px;
    display: flex;
    overflow: hidden;
}

#projtitlecontainer{
    height: auto;
    width: 100vw;
    background-color: #e2725a;
    text-align: center;
}

#projtitle{
    position: relative;
    left: -130px;
    top: 62px;
    padding: 0;
    margin:0;
    color: #033a5b;
    font-family: "Jost";
    font-size: 55px;
    z-index: 3;
}

#projscontainer{
    width: 100vw;
    height: auto;
    background-color: #e2725a;
    display: flex;
    justify-content: center;
    align-items: center;
}

.projswrapper{
    width: 50%;
    height: 90%;
    background-color: #e2725a;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.items{
    margin: 0.6vw;
}

.card{
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.front, .back{
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: "Jost";
    flex-direction: column;
}

.front{
    background-color: #efcaad;
    font-family: "Inconsolata";
    font-weight: bolder;
    font-size: 22px;
}

.back{
    background-color: rgb(33, 33, 33);
    transform: rotateY(180deg);
    color: white;
    font-size: 15px;
}

.items:hover > .card{
    cursor: pointer;
    transform: rotateY(180deg);
}

#box1{
    grid-column: 1/3;
    grid-row: 1/2;
    font-size: 16px;
}

#box2{

    grid-column: 3/4;
    grid-row: 1/2;
    font-size: 15px;
}

#box3{
    grid-column: 4/5;
    grid-row: 1/3;
}

#box4{
    grid-column: 1/2;
    grid-row: 2/3;
}

#box5{
    grid-column: 2/4;
    grid-row: 2/3;
    
}

#box6{
    grid-column: 1/3;
    grid-row: 3/4;
}

#box7{
    grid-column: 3/5;
    grid-row: 3/4;
}

#front1{
    background-color: #c1e1d2;
}

#front2{
    background-color: #f6f8e8;
}

#front3{
    background-color: #fec994;
}

#front4{
    background-color: #fed9c9;
}

#front5{
    background-color: #ffefd8;
}

#front6{
    background-color: #c8cfd6;
}

#front7{
    background-color: #ffb7a1;
}

.backtext{
    margin-bottom: 0;
    margin-left: 10px;
    margin-right: 10px;
}

.linkicon{
    padding:0;
}

#part4{
    height: auto;
    width: 100vw;
    display: flex;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    place-items: center;
    flex-direction: column;
    background-color: #4a6274;
    padding-top: 5vh;
    padding-bottom: 7vh;
}

#contactpic{
    height: 55vh;
}


#resume {
    padding-top: 6px;
    width: 130px;
    height: 30px;
    border: none;
    cursor: pointer;
    background-color: #fdd8d6;
    box-shadow: 0 6px #545454;
    border-radius: 40px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.2s;
    color: black;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
}


#resume:hover {
	box-shadow: 0 2px #352e27;
	transform: translate(0, 7px);
}

.arrows{
    position: absolute;
    top: 90vh;
    width: 40px;
    height: 40px;
}

#arrow{
    animation: scrolldown 2.1s linear infinite;
}

#arrow2{
    opacity: 0;
    animation: scrolldown 2.1s linear infinite 0.7s;
}

#arrow3{
    opacity: 0;
    animation: scrolldown 2.1s linear infinite 1.4s;
}

@keyframes scrolldown {
    0%{
        opacity: 1;
    }

    30%{
        opacity: 1;
        
    }

    70%{
        opacity: 1;
    }

    100%{
        opacity: 0;
        transform: translate(0, 26px);
    }
}

.slideshow {
    overflow: hidden;
    height: 290px;
    width: 2050px;
}

.sliding-background {
    background-image: url("./figma-images/mepics.png");
    height: 290px;
    width: 2050px;
    background-size: 2050px 290px;
    animation: slide 45s linear infinite;
}
  
@keyframes slide{
    0% {background-position-x: 0;}
    100% {background-position-x: -2050px;}
}


@media screen and (max-width: 1250px){
    .projswrapper{
        width: 60%;
    }
}

@media screen and (max-width: 1000px){
    #main{
        width: 80vw;
    }
}

@media screen and (max-width: 990px){
    .projswrapper{
        width: 75%;
    }
}

@media screen and (max-width: 990px){
    .projswrapper{
        width: 90%;
    }
    #projtitle{
        position: static;
        padding-top: 30px;
    }
}

@media screen and (max-width: 800px){
    #aboutbox{
        width: 95vw;
    }
    #aboutme{
        padding-left: 5vw;
    }
}

@media screen and (max-width: 583px){
    .slideshow{
        display: none;
    }
    .sliding-background{
        display: none;
    }
    #tiny-contacts{
        font-size: 18px;
    }
    #contactpic{
        width: 95vw;
    }
    .front{
        font-size: 3vw;
    }
    .back{
        font-size: 3vw;
    }
}

@media screen and (max-width: 513px){
    .underlines{
        display: none;
    }
    #about{
        display: none;
    }
    #projects{
        display: none;
    }
    #contact{
        display: none;
    }
}

@media screen and (max-width: 420px){
    #main{
        width: 126vw;
    }
    #part1{
        overflow: hidden;
    }
    
}