:root {
    --second-color: rgb(30, 30, 30);
}
@font-face {
    font-family: 'Roboto';
    src: url('./assets/fonts/Roboto-Medium.ttf') format('truetype');
}
*{
    margin: 0;
    padding: 0;
    list-style: none;
    color: white;
    text-decoration: none;

}
/*bg*/
body{
    background: black;
    font-family: roboto;
}
#bg{
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-image: url("./assets/img/background.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}

/*nav*/
nav{
    height: 3.375rem;
    background: var(--second-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
}
nav .buttons{
    display: flex;
}

nav .buttons .wapp{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.25rem;
    height: 1.5rem;
    padding: 0.3125rem;
    text-align: center;
    background: #4CAF50;
    border-radius:  0.3125rem;
    margin-right: 1.25rem;
}


nav .buttons .tg{
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.25rem;
    padding: 0.3125rem;
    text-align: center;
    background: rgb(28, 147, 227);
    border-radius:  0.3125rem;
}
nav .buttons .tg img{
    margin-right: 0.25rem;
}

/*main*/
main{
    width: 25rem;
    max-width: calc(100% - 1.875rem);
    border-radius: 1rem;
    position: relative;
    top: 2rem;
    background: var(--second-color);
    padding: 2rem 0;
    text-align: center;
    margin: auto;
}
main > div{
    display: inline-block
}
.user {
    width: 7.625rem;
    height: 7.625rem;
    border-radius: 100%;
    overflow: hidden;
    background-image: url("./assets/img/user.jpg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin-bottom: 1rem;
}
main h3 {
    margin-bottom: 1.25rem
}
.contacts{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}
.contact{
    display: flex;
}
.contact:first-child {
    margin-bottom: 1.25rem;

}
.contact div:first-child{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.625rem;
    width: 7.5rem

}
.contact div:first-child img{
    margin-right: 0.375rem;
}

.button{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3125rem;
    background: rgb(28, 147, 227);

    width: 6.875rem;
    border-radius: 0.3125rem
}
.contact:first-child .button{
    background: #4CAF50;
}

@media (max-width: 400px) {
    nav .buttons{
        display: none;
    }
}