body {
    background-color: rgb(20, 20, 20);
}

h1 {
    color: rgb(9, 12, 170);
    text-align: center;
    font-family: Pacifico, serif;
    font-size: 40px;
    text-shadow: 3px 3px rgb(0, 0, 0);
    animation: shadowanim 1s;
}
.tab {
    margin-right: 40px;
}

p {
    color: white;
    font-family: Nunito, serif;
    font-size: 20px;
    text-align: center;
    text-shadow: 2px 2px #000000;
}

p.center {
    color: rgb(255, 255, 255);
    font-family: Nunito, serif;
    font-size: 20px;
    text-align: center;
    text-shadow: 2px 2px #000000;
    position: center;
    margin: 0 0 0 0;
}

p.button {
    color: white;
    font-family: Nunito, serif;
    font-size: 20px;
    text-align: left;
    text-shadow: 2px 2px #000000;
    top: 30%;
    left: 2.5%;
    position: absolute;
    margin: 0 0 0 0;
}

p.longtext {
    color: white;
    font-family: Nunito, serif;
    font-size: 20px;
    text-align: left;
    text-shadow: 2px 2px #000000;
    top: 0;
    left: 13.5%;
    position: relative;
    margin: 0 25% 0 0;
}


a {
    color: rgb(255, 255, 255);
    font-size: 20px;
    font-family: Nunito, serif;
    text-decoration: none;
    transition: color 0.5s;
}
a.none {
    color: rgb(255, 255, 255);
    font-size: 28px;
    font-family: Pacifico, serif;
    margin-left: 2%;
    margin-right: 2%;
}

a.opened {
    text-decoration-line: underline;
    color: rgb(255, 255, 255);
    font-size: 40px;
    font-family: Pacifico, serif;
    margin-left: 1%;
    margin-right: 1%;
}

a.none:hover {
    color: rgb(255, 255, 255);
}

a.opened:hover {
    color: rgb(255, 255, 255);
}
a:hover {
    color: rgb(255, 255, 255);
}

ul {
    color: white;
    font-family: Nunito, serif;
    font-size: 20px;
    margin: 0 45% 0 45%;
    text-align: left;
    position: relative;
    text-shadow: 2px 2px #000000;
}

div.center {
    width: 100vw;
    height: 50vh;
    top: 50%;
    left: 50%;
    position: absolute;
    margin: -25vh 0 0 -50vw;
    animation: showanim 0.5s;
}


div.top {
    width: 90vw;
    height: 10vh;
    top: 0%;
    left: 50%;
    position: relative;
    margin: 0 0 0 -45vw;
    animation: showanim 0.5s;
}

div.longtext {
    width: 90vw;
    height: auto;
    top: 0;
    left: 50%;
    position: relative;
    margin: 25px 0 0 -45vw;
    animation: showanim1 1s;
}

div.projects {
    background-color: rgb(25, 25, 25);
    width: 100vw;
    height: auto;
    top: 50%;
    left: 50%;
    position: relative;
    margin: 15% 0 0 -50.6vw;
    animation: showanim1 1.2s;
}

div.podval {
    background-color: rgb(255, 255, 255);
    width: 100vw;
    height: 10%;
    top: 50%;
    left: 50%;
    position: relative;
    margin: 50px 0 0 -50.6vw;
    animation: showanim1 1.2s;
}

div.language {
    width: 200px;
    height: 8%;
    top: 0%;
    left: 50%;
    position: absolute;
    margin: 88vh 15% 0;
    animation: showanim1 1s;
}


div.screenshots {
    width: 45%;
    text-align: center;
    height: auto;
    top: 0;
    left: 50%;
    position: relative;
    margin: 25px 0 0 -22%;
    animation: showanim1 1s;
}

div.description {
    width: 80vw;
    height: auto;
    top: 1 5%;
    left: 50%;
    position: relative;
    margin: 20% 0 0 -40vw;
    animation: showanim1 1.2s;
}

img {
    filter: drop-shadow(4px 4px 1px rgba(0, 0, 0, 0.479));
    margin-left: auto;
    margin-right: auto
}

@keyframes showanim {
    0% {
        left: 40%;
        opacity: 0%;
    }

    100% {
        left: 50%;
        opacity: 100%;
    }
}

@keyframes showanim1 {
    0% {
        left: 0%;
        opacity: 0%;
    }

    35% {
        left: 40vw;
        opacity: 0%;
    }

    100% {
        left: 50%;
        opacity: 100%;
    }
}

@keyframes shadowanim {
    0% {
        text-shadow: 0px 0px rgba(131, 0, 103, 0);
    }

    65% {
        text-shadow: 0px 0px rgba(131, 0, 103, 0);
    }

    100% {
        text-shadow: 3px 3px rgb(255, 0, 100);
    }
}