body {
    background-color: black;
    height:100vw;
    width:100vw;
    overflow-y: scroll;
    overflow-x: hidden;
    background-image: url('backgrounds/pattrn.png');
    background-size:20vw;
}

::-webkit-scrollbar {
    display: none;
}

#blackhole {
    position:absolute;
    width:50vw;
    height:50vw;
    top:10vw;
    left:25vw;
}

#yellow {
   color:#E5B054;
}

#red {
    color:#EE5156;
}

@font-face {
   font-family: 'chopinscript';
   src: url("ChopinScript.otf");

}

@font-face {
   font-family: 'connectionserif';
   src: url("ConnectionSerif-d20X.otf");

}

* {
    color:#283b16;
    font-size: 1vw;
    padding-left: 1vw;
    padding-right: 1vw;
    text-align: center;
    font-family: connectionserif;
}

h1:hover,
h1:focus {
    filter:brightness(2);
}

p:hover,
p:focus {
    filter:brightness(2);
}

p {
    background-color: antiquewhite;
}



.chopin {
   font-family: chopinscript;
}



h1 {
    font-size: 4vw;
    color:antiquewhite;
}

h2 {
    font-size: 2vw;
}

#title {
    position:absolute;
    top:-2vw;
    width:40vw;
    left:30vw;
    animation-name: myAnimation;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}

@keyframes myAnimation {
  from {top:-2vw; filter:brightness(1);}
  to {top:0vw; filter:brightness(1.5);}
}




div {
    overflow-y: scroll;
}

#intr {
    position: absolute;
    top:7vw; 
    width:30vw;
    left:35vw;
    
}