body {
    background: url('./images/background.jpg');
    background-size: cover;
    font-family: Vazirmatn;
}

.content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    box-sizing: content-box;
    flex-direction: column;
    color: #fff;
}

@media screen and (min-width: 400px){
    .content .title { 
        font-size: 4rem;
    }
    .content .sub-title {
        font-size: 2.5rem;
    }
}

.content .title {
    font-size: 4rem;
    font-weight: bold;
    margin-bottom: .2rem;
    margin-bottom: 1.8rem;
    white-space: no-wrap;
}

.content .sub-title {
    font-size: 2.5rem;
}

.links {
    position: fixed;
    top:10px;
    left: 0;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    text-align:center;
}

.links a {
    color: #FFF;
    font-size: 1.4rem;
    padding: .2rem 0; 
    transition: color .3s ease; 
}

.links a svg{ 
    width: 20px;
    height: 20px;

    fill: #FFF;
} 

.links a:hover{
    color: #21ffe0;
}

.links a:hover svg {
    fill: #21ffe0;
}