style.css

#home-background, #other-background{
    background-image: url(images/background.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

#other-background{
    filter: blur(2px);
}

#home-background{
    animation: backgroundin 1s;
    animation-fill-mode: forwards;
    animation-delay: 1.8s;
}

@keyframes backgroundin{
    from { filter: blur(0px); }
    to { filter: blur(2px); }
}

html{
    color: #ececec;
    font-size: 2vw;
    font-family: monospace;
    text-align: center;
}

.title{
    background-color: #1e1e1e;
    border-style: solid;
    border-radius: 10px;
    margin-bottom: 1vw;
}

.title h1{
    max-width: min-content;
    overflow: hidden;
    border-right: 2.5vw solid #9d9d9d;
    white-space: nowrap;
    margin: 0 auto;
}

#home-title{
    width: 0%;
    animation: typing 1.5s steps(22, end);
    animation-fill-mode: forwards;
    animation-delay: 0.5s;
}

@keyframes typing{
    from { width: 0% }
    to { width: 54% }
}

#home-nav, #home-main{
    opacity: 0;
    animation: fadein 1s;
    animation-fill-mode: forwards;
    animation-delay: 1.8s;
}

@keyframes fadein{
    from { opacity: 0; }
    to { opacity: 1; }
}

nav table{
    width: 40%;
}

nav table td{
    width: 33%;
}

nav a{
    color: #ececec;
    text-decoration: none;
    padding: 0.5vw;
}

.project-container{
    width: 80%;
    margin: 1vw auto;
}

.project-container img{
    width: 25vw;
    height: 15vw;
}

.border{
    border: solid;
    border-radius: 10px;
}

.project-container div{
    max-width: 40%;
    font-size: 1.5vw;
    padding: 3vw;
    margin: 1vw auto;
}

nav a, .project-container div{
    border-style: solid;
    border-radius: 10px;
    border-color: transparent;
}

nav a:hover, .project-container div:hover{
    background-color: rgba(192,192,192,0.3);
    border-color: #ececec;
}

.project-container{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#about-list ul{
    text-align: center;
    list-style-position: inside;
    margin-top: 5vw;
    list-style-type: square;
}

#about-list h2{
    font-size: 2.5vw;
    margin: 0.5vw;
}

#contacts table{
    width: 80%;
    border: solid;
    border-radius: 10px;
    border-color: #ececec;
    margin-top: 2vw;
}

#contacts td{
    font-size: 1.5vw;
    height: 2vw;
}

@media only screen and (orientation: portrait){
    html{
        font-size: 4vw;
    }

    .title h1{
        max-width: max-content;
        border-right-width: 4vw;
    }

    @keyframes typing{
        from { width: 0% }
        to { width: 100% }
    }

    nav table{
        width: 100%;
    }

    .project-container{
        width: 100%;
        flex-direction: column;
    }

    .project-container img{
        width: 50vw;
        height: 30vw;
    }

    .project-container div{
        max-width: 100%;
        font-size: 2vw;
    }

    #about-list h2{
        font-size: 4vw;
    }

    #contacts thead{
        display: none;
    }

    #contacts tr{
        display: block;
        border-top: solid;
        padding-top: 1.5vw;
    }

    #contacts #first-row{
        border-top: none;
    }

    #contacts td{
        display: block;
        font-size: 3.5vw;
        height: 7vw;
    }
}