body {
    overflow-x: hidden;
}

#title {
    position: relative;
    font-size: 5vmax;
    color: white;
    text-align: left;
    margin: 2% 0 4% 3%;
    z-index: 1;
}

ul {
    display: block;
    width: 45%;
    position: relative;
    text-align: left;
    list-style-type: none;
    margin: 0 0 3% 3%;
    padding: 0;
    z-index: 1;
}

li {
    margin-top: 1%;
    font-size: 3vmax;
    font-family: monospace;
}

a, a:focus, a:visited {
    color: white;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

#project-preview {
    display: block;
    position: fixed;
    width: 40%;
    height: 46.5%; /* Credo sia un rapporto 16:9 */
    /*background-color: white;*/
    background-image: url("https://media.giphy.com/media/n8A8omwp1mVAA/giphy.gif");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 2px; /* 160px */
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    box-shadow: 0px 10px 21px -15px #000;
    z-index: -1;
}



@media (max-width: 991.98px)
{

}

@media (max-width: 1199.98px)
{
    #title {
        font-size: 6vmax;
    }

    li {
        font-size: 3.5vmax;
        margin-top: 2%;
    }

    #project-preview {
        display: none;
    }
}

@media (max-width: 1399.98px)
{

}

@media (max-width: 575.98px)
{
    #title {
        font-size: 7vmax;
        text-align: center;
    }

    ul {
        width: 100%;
        text-align: center;
        margin: 0 auto;
        padding: 0 4%;
    }

    li {
        margin-top: 6%;
    }
}