@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@1,700&family=Titillium+Web:ital,wght@0,400;0,700;1,400&display=swap');

    /* font-family: "Titillium Web", sans-serif;
    font-family: "Titillium Web", sans-serif;
    font-family: "Space Mono", monospace; */
    

body{
    background: #0D1122;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #EDEDED;
    font-family: "Titillium Web", sans-serif;
    width: 100%;
    height: 100%;
    
}

.main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* header  */
.main header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}
.main header img{
    max-width: 370px;
    margin-bottom: -160px ;
    margin-top: -50px;
}

.main header h1{
    font-family: "Space Mono", monospace; 
    font-size: 42px;
    margin-bottom: 0px;
    font-style: italic;
}
.main header p {
    font-weight: 300;
    font-size: 16px;
    margin-top: 5px;
    font-style: italic;
    margin-bottom: 0;
}

/* end Header  */

.main>p{
    display: flex;
    flex-wrap: nowrap;
    font-size: 24px;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
    margin-bottom: 0;

}
.main>p img{
    width: 20px;
   
}

/* Buttons */

.main .links{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.main .links a{
   width: 320px;
    border-radius: 24px;
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom: 30px;
    padding: 8px 8px 8px 50px;
    text-decoration: none;
    color: #FFF;
 
    background: rgb(0,203,243);
    background: linear-gradient(180deg, rgba(0,203,243,1) 0%, rgba(1,129,223,1) 50%, rgba(2,51,202,1) 100%);
    box-shadow: 0px 4px 15px  #00CCF3;
    transition: .4s all;
}
.main .links a:hover{
    scale: 1.1;
}

.main .links a img{
    width: 50px;
    margin-right: 25px;
}

.main .links a > div > h2{
    color: #fff;
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 0;
}
.main .links a > div > p{
    margin-top: 0;
    font-size: 20px;
}

.main .links a:first-child{
    box-shadow: 0px 4px 15px  #0C7E48;
    background: rgb(12,126,72);
    background: linear-gradient(360deg, rgba(12,126,72,1) 0%, rgba(22,228,129,1) 100%);
    margin-top: 30px;
   
}


/* end buttons */

footer{
    display: flex;
    justify-content: center;
    align-items: center;
}

footer ul{
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

footer ul li{
    font-size: 16px;
    padding-right: 49px;
    color: #ffffff40;
}

@media (max-width: 650px){
    .main .links a{
        width: 250px;
    }

    .main .links a img{
        width: 50px;
        margin-right: 15px;
    }
    .main .links a > div > h2{
        font-size: 18px;
    }
    .main .links a > div > p{
        font-size: 16px;
    }
    
 

    footer ul li{
        font-size: 10px;
        padding-right: 13px;
    }
    footer ul li:last-child{
        padding-right: 30px;
    }

}