@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Jersey+10&display=swap');
body{
    background-color: black;
}
#hi{
    color: white;
    font-size:2.5vw;
    font-family: "Source Code Pro", monospace;
    transform: rotate(340deg);  
    position: absolute;
    left: 33%;
    top: 12.5%;
    letter-spacing: -2px;
}
#terminal{
    color: rgb(0, 255, 0);
    font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    position:absolute;
    top:47%;
    left:33%;
}
#p{
    color: rgb(255, 255, 255);
    font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    position:absolute;
    top:47%;
    left:42%;
}
#c{
    color: rgb(255, 255, 255);
    font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    position:absolute;
    top:51%;
    left:33%;
}
#d{
    color: rgb(255, 255, 255);
    font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    position:absolute;
    top:55%;
    left:41%;
}
#note{
    color: rgb(255, 255, 255);
    font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    position:absolute;
    top:93%;
    left:1%;
}
#home{
    color: white;
    font-size: 3.5vw;
    font-family: "Jersey 10", sans-serif;
    text-decoration: underline;
    position: absolute;
    left:46%;
    top:2.5%;
    text-shadow: -1px -1px 5px white;
    transition: 0.5s ease-in-out;
}
#home:hover{
    font-size:4vw;
    top:1.5%;
    left:45.5%;
    transition: 0.5s ease-in-out;
}
#projects{
    color: white;
    font-size:2.5vw;
    font-family: "Jersey 10", sans-serif;
    text-decoration: underline;
    position: absolute;
    left:36%;
    top: 5%;
    text-shadow: -1px -1px 5px white;
    transition: 0.5s ease-in-out;
}
#projects:hover{
    font-size:3vw;
    top:4%;
    left:35.5%;
    transition: 0.5s ease-in-out;
}
#about{
    color:white;
    font-size:2.5vw;
    font-family:"Jersey 10", sans-serif;
    text-decoration: underline;
    position:absolute;
    left: 56%;
    top:5%;
    text-shadow: -1px -1px 5px white;
    transition: 0.5s ease-in-out;
}
#about:hover{
    font-size:3vw;
    top:4%;
    left:55.5%;
    transition: 0.5s ease-in-out;
}
h1{
    color: rgb(0, 255, 0);
    font-size: 10vw;
    font-family: "Jersey 10", sans-serif;
    font-weight: 300;
    position: absolute;
    text-shadow: -1px -1px 5px rgb(0, 255, 0);
    top: 6%;
    left: 40%;
    transition: 0.5s ease-in-out;
}
h1:hover{
    font-size: 10.5vw;
    top:4%;
    left:39.5%;
    animation-name: coloring;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    transition: 0.5s ease-in-out;
    text-shadow: -1px -1px 5px rgb(0, 255, 0);
}
#img{
    image-rendering: pixelated;
    width: 40vw;
    height: 30vw;
    position: absolute;
    left:31%;
    top:40.8%
}
#imgm{
    width:0vw;
    height:0vw;
}
#notem{
    width: 0vw;
    height: 0vw;
}
#hc{
    width: 20vw;
    height: 20vw;
    position:absolute;
    left:0%;
    top:0%;
}
#cursor{
    top:17.5%;
    left:63.5%;
    color: rgb(0, 255, 0);
    font-size: 10vw;
    font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    position: absolute;
    text-shadow: -1px -1px 5px rgb(0, 255, 0);
    transition: 0.5s ease-in-out;
    animation-name: blink;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
@keyframes blink{
    0%{
        opacity: 0%;
    }
    50%{
        opacity: 100%;
    }
    100%{
        opacity: 0%;
    }
}
@keyframes coloring{

0%{
    color: rgb(0, 255, 0);
    text-shadow: -1px -1px 5px rgb(0, 255, 0);
}
10%{
    color: rgb(0, 255, 100);
    text-shadow: -1px -1px 5px rgb(0, 255, 100);
}
20%{
    color: rgb(0, 180, 255);
    text-shadow: -1px -1px 5px rgb(0, 180, 255);
}
30%{
    color: rgb(80, 100, 255);
    text-shadow: -1px -1px 5px rgb(80, 100, 255);
}
40%{
    color: rgb(140, 60, 255);
    text-shadow: -1px -1px 5px rgb(140, 60, 255);
}
50%{
    color: rgb(200, 40, 255);
    text-shadow: -1px -1px 5px rgb(200, 40, 255);
}
60%{
    color: rgb(255, 40, 200);
    text-shadow: -1px -1px 5px rgb(255, 40, 200);
}
70%{
    color: rgb(255, 60, 100);
    text-shadow: -1px -1px 5px rgb(255, 60, 100);
}
80%{
    color: rgb(255, 120, 40);
    text-shadow: -1px -1px 5px rgb(255, 120, 40);
}
90%{
    color: rgb(255, 200, 30);
    text-shadow: -1px -1px 5px rgb(255, 200, 30);
}
100%{
    color: rgb(136, 255, 0);
    text-shadow: -1px -1px 5px rgb(220, 255, 40);
}
}

@media (max-width:768px){
body{
    background-color: black;
}
#hi{
    color: white;
    font-size:5vw;
    font-family: "Source Code Pro", monospace;
    transform: rotate(340deg);  
    position: absolute;
    left: 13%;
    top: 11.5%;
    letter-spacing: -2px;
}
#terminal{
    color: rgb(0, 255, 0);
    font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    position:absolute;
    top:33%;
    left:7.5%;
    font-size: 5vw;
}
#p{
    color: rgb(255, 255, 255);
    font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    position:absolute;
    top:33%;
    left:31.5%;
    font-size: 5vw;
}
#c{
    color: rgb(255, 255, 255);
    font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    position:absolute;
    top:35.5%;
    left:7.5%;
    font-size: 5vw;
}
#d{
    color: rgb(255, 255, 255);
    font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    position:absolute;
    top:40.71%;
    left:29%;
    font-size: 5vw;
}
#note{
    color: rgb(255, 255, 255);
    font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    position:absolute;
    top:93%;
    left:1%;
    display:none;
}
#notem{
    color: rgb(255, 255, 255);
    font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    width:100vw;
    position:absolute;
    top:93%;
    left:1%;
}
#home{
    color: white;
    font-size: 9vw;
    font-family: "Jersey 10", sans-serif;
    text-decoration: underline;
    position: absolute;
    left:40.2%;
    top:6%;
    text-shadow: -1px -1px 5px white;
    transition: 0.5s ease-in-out;
}
#projects{
    color: white;
    font-size:5.5vw;
    font-family: "Jersey 10", sans-serif;
    text-decoration: underline;
    position: absolute;
    left:26%;
    top: 8.5%;
    text-shadow: -1px -1px 5px white;
    transition: 0.5s ease-in-out;
}
#about{
    color:white;
    font-size:5.5vw;
    font-family:"Jersey 10", sans-serif;
    text-decoration: underline;
    position:absolute;
    left: 59%;
    top:8.5%;
    text-shadow: -1px -1px 5px white;
    transition: 0.5s ease-in-out;
}
h1{
    color: rgb(0, 255, 0);
    font-size: 25vw;
    font-family: "Jersey 10", sans-serif;
    font-weight: 300;
    position: absolute;
    text-shadow: -1px -1px 5px rgb(0, 255, 0);
    top: 6%;
    left: 24%;
    transition: 0.5s ease-in-out;
}
h1:hover{
    font-size: 26.5vw;
    top:5%;
    left:22.5%;
    animation-name: coloring;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    transition: 0.5s ease-in-out;
    text-shadow: -1px -1px 5px rgb(0, 255, 0);
}
#img{
    image-rendering: pixelated;
    width: 80vw;
    height: 70vw;
    position: absolute;
    left:10%;
    display:none;
}
#imgm{
    image-rendering: pixelated;
    width: 95vw;
    height: 120vw;
    position: absolute;
    left: 2.6%;
    top:30%;
}
#hc{
    width: 30vw;
    position:absolute;
    left:0%;
    top:0%;
}
#cursor{
    top:13.35%;
    left:82%;
    font-size:23vw;
    color: rgb(0, 255, 0);
    font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    position: absolute;
    text-shadow: -1px -1px 5px rgb(0, 255, 0);
    transition: 0.5s ease-in-out;
    animation-name: blink;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
@keyframes blink{
    0%{
        opacity: 0%;
    }
    50%{
        opacity: 100%;
    }
    100%{
        opacity: 0%;
    }
}
@keyframes coloring{

0%{
    color: rgb(0, 255, 0);
    text-shadow: -1px -1px 5px rgb(0, 255, 0);
}
10%{
    color: rgb(0, 255, 100);
    text-shadow: -1px -1px 5px rgb(0, 255, 100);
}
20%{
    color: rgb(0, 180, 255);
    text-shadow: -1px -1px 5px rgb(0, 180, 255);
}
30%{
    color: rgb(80, 100, 255);
    text-shadow: -1px -1px 5px rgb(80, 100, 255);
}
40%{
    color: rgb(140, 60, 255);
    text-shadow: -1px -1px 5px rgb(140, 60, 255);
}
50%{
    color: rgb(200, 40, 255);
    text-shadow: -1px -1px 5px rgb(200, 40, 255);
}
60%{
    color: rgb(255, 40, 200);
    text-shadow: -1px -1px 5px rgb(255, 40, 200);
}
70%{
    color: rgb(255, 60, 100);
    text-shadow: -1px -1px 5px rgb(255, 60, 100);
}
80%{
    color: rgb(255, 120, 40);
    text-shadow: -1px -1px 5px rgb(255, 120, 40);
}
90%{
    color: rgb(255, 200, 30);
    text-shadow: -1px -1px 5px rgb(255, 200, 30);
}
100%{
    color: rgb(136, 255, 0);
    text-shadow: -1px -1px 5px rgb(220, 255, 40);
}
}
}