index.css

@font-face { 
    font-family: PressStart2P; 
    src: url('fonts/PressStart2P.ttf'); 
} 

:root{
    --darkgray: rgb(31,31,31);
    --gray:rgb(192,192,192);
}

*{
    font-family:  PressStart2P;
    color:var(--gray);
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
}

#wrapper{
    width: 100vw;
    height:100vh;
    background:black;
    display: grid;
    place-content: center;
}

.start{
    width:900px;
    height:600px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-size: cover;
}

#startimg{
    background-image: url(img/czołówka.jpg);
}

#starttext1{
    background-image: url(img/opis_A.jpg);
}

#starttext2{
    background-image: url(img/opis_B.jpg);
}

#content{
    width:900px;
    height:600px;
    background: var(--darkgray);
}

#content>*{
    font-size: 20px;
    margin:15px;
}

#img{
    width:384px;
    height:240px;
    background-size: cover;
    border:3px solid var(--gray);
    float:left;
}

#imganimation{
    width: 100%;
    height:0;
    background-size: cover;
    z-index: 5;
}

#compass{
    background-image: url(img/kompas.png);
    background-size: cover;
    width:384px;
    height:180px;
    float:left;
    margin-top:70px;
    margin-left:50px;
    position: relative;
}

.compasshide{
    position: absolute;
    background: none;
    width:24px;
    height:23px;
}

#n{
    left:170px;
    top:-4px;
}

#e{
    left:340px;
    top:47px;
}

#s{
    left:178px;
    top:158px;
}

#w{
    left:22px;
    top:47px;
}

#direction{
    clear: both;
    line-height: 1.6;
}

#question{
    float:left;
}

#content>input{
    background: var(--darkgray);
    border:none;
}

#content>input:focus{
    outline:none;
}

#end{
    width:900px;
    height:600px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-size:contain;
    background-image: url(img/sus.png);
}