@import url("https://fonts.googleapis.com/css?family=Alfa+Slab+One");
* {
    padding: 0;
    margin: 0;
}

body {

}

html {
    scroll-behavior: smooth;
    padding: 0;
    margin: 0;
}


/* home page styling */

#home {
    height: 100vh;
    /* flex-direction: column; */
    background-color: white;
}

#title {
    background: url("images/abstract.gif");
    font-family: Alfa Slab One;
    /* color: black; */
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

#name {
    width: 40vw;
    text-align: justify;
}

h1 {
    font-family: Alfa Slab One;
    text-align-last: justify;
    font-size: 9vw;
}

h4 {
    font-family: Alfa Slab One;
    margin-top: -10%;
    text-align: center;
    font-size: 5vw;
}

#links,
#social {
    font-size: 2vw;
}

.hoverlinks {
    color: black;
    font-weight: bolder;
}

.hoverlinks:hover {
    transform: scale(1.3) rotate(360deg);
    /* transform:  */
    transition-duration: 1s;
    /* transition-property: transform; */
    color: orange;
}


/* About Me styling */

#about {
    height: 100vh;
    color: black;
    
}

#biopic {
    border-radius: 50%;
    border: 3px solid silver;
}

.media {
    padding-top: 10%;
    /* display: flex;
    align-content: center; */
}



#projects {
    height: 100vh;
    background-color: white;
}



#resume {
    height: 100vh;
    background-color: yellowgreen;
}


/* #home {
    display: flex;
    align-items: center;
    justify-content: center;
} */


/* project styling */

ul {
    list-style: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

ul li a {
    color: goldenrod;
    font-weight: bolder;
}

ul li {
    position: absolute;
    width: 33.3%;
    height: 100%;
    text-align: center;
    /* line-height: 100vh; */
    font-size: 5vh;
    transition: .7s;
    z-index: 1;
}

ul li:hover {
    background: magenta;
    opacity: .7;
    color: white;
}

ul li:nth-child(2) {
    left: 33.3%
}

ul li:nth-child(3) {
    left: 66.6%
}

.box {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(images/light.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
}

ul li:nth-child(1):hover~.box {
    background: url(images/cleague.jpg);
    /* background: url(images/championsleague.jpg); */
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
}

ul li:nth-child(2):hover~.box {
    background: url(images/covid.jpg);
    /* background: url(images/covidnstuff.jpg); */
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
}

ul li:nth-child(3):hover~.box {
    background: url(images/S1.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
}



/* Pulsing on projects page */

a p:hover {
    color: white;
}

a p {
    animation: pulse 3s infinite;
    /* margin-top: 50%; */
}



@keyframes pulse {
    0%,
    3%,
    9%,
    15%,
    21% {
        transform: scale(1);
    }
    6%,
    12%,
    18% {
        transform: scale(.95);
    }
}

/* contact styling */

.transform{
    height: 0vh;
    width: 0vw;
    -webkit-transition: all 2s ease;  
    -moz-transition: all 2s ease;  
    -o-transition: all 2s ease;  
    -ms-transition: all 2s ease;  
    transition: all 2s ease;
}

.transform-active{
    background-color: lightsteelblue;
    height: 70vh;
    width: 90vw;
    border: 1px solid black

}

#contact {
    height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    
}




/* media breakpoints */
@media screen and (max-width:320px) {
ul li, label, input{
    font-size: 2vh;
}

}
@media screen and (min-width:321px) and  (max-width:1919px) {
    ul li, label, input{
        font-size: 3vh;
    }
}
/* @media screen and (min-width:640px) and (max-width:959px) {
    ul li, label, input{
        font-size: 3vh;
    }
}
@media screen and (min-width:960px) and (max-width:1279px) {ul li, label, input{
    font-size: 3vh;
}} */
/* @media screen and  (max-width:1919px) {ul li, label, input{
    font-size: 3vh;
}} */

@media screen and (min-width:1920px) {ul li, label, input{
    font-size: 4vh;
}}

#moreProjects {
    height: 100vh;
background-color: mintcream;
}


a:hover{
    color: yellow;    
}

.projImg:hover {
    transform: scale(1.05);
    border: 2px solid crimson
}