@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@keyframes headerStart {
    0% {background-size: 200%;}
    25% {background-size: 200%;}
    100% {background-size: 100%;}
}
@keyframes mainStart {
    0% {row-gap: 5rem; opacity: 0%; /*background: #111;*/}
    25% {row-gap: 5rem; opacity: 25%; /*background: #111;*/}
    100% {row-gap: 0.75rem; opacity: 100%; /*background: #000;*/}
}

html{height: 100%;}
body{
    padding: 0;
    margin: 0;
    min-height: 100%;
    font-family: "Roboto", sans-serif;
    background: #000;
    color: #fff;
    display: grid;
    grid-template: auto 1fr auto/1fr;
}
header{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5rem;
    background: #000;
    background-image: url(../images/Header.svg) ;
    background-size: cover;
    animation-name: headerStart;
    animation-duration: 0.75s;
    background-position: 50%;
}
header h1{
    font-weight: 700;
    text-align: center;
    color: #fff;
}
/* header h1{filter: drop-shadow(0 0 0.25rem #111);} */
main{
    padding: 1rem;
    width: fit-content;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: left;
    row-gap: 0.75rem;
    animation-name: mainStart;
    animation-duration: 0.75s;
}
main h2{
    margin: 0;
    font-size: 2rem;
    font-weight: 400;
}
a{color: #fff;}

div{
    padding: 20px;
}

#MatrixRain:hover{color: #00d17d;}
#ExpandingColor:hover{color: #ee2288;}
#BinaryClock:hover{color: #000; background: white;}
#RussPage:hover{color: #CB061D}
#Spooky:hover{color: #d17e19;}
#Internetturet:hover{color: #094db2}
#SpinningThings:hover{color: #055}
#Pipes:hover{color: #3d49ee}
#Haxor:hover{color: #6ac44b}