@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,900&display=swap');

body 
{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #071c24;
}
#userWrapper
{
    position: absolute;
    top:3vh;
    left:50%;
    transform: translateX(-50%);
    height: 15vh;
    width: 80%;
}
#avatar
{
    background-color: ivory;
    height: 10vh;
    width: 10vh;
    background-size: 10vh 10vh;
    position: relative;
    top:2vh;
    left: 10%;
}
#userName
{
    position: relative;
    left: 50%;
    top:-25%; 
    font-size: larger;
    font-family: 'Lato';
    font-weight: bolder;
    color: rgb(15, 98, 131);
}
#guilds
{
    position: relative;
    top:20vh;
    background-color: rgba(210, 252, 253, 0.541);
    width: 80%;
    height: 70%;
    font-family: 'Lato';
    font-weight: bolder;
    text-align: center;
    border-radius: 2%;
    border: 2px solid #020608;
}
.DiscordAddBtn
{
    position: relative;
    transform: translateY(calc(50% - 1vh));
    left:calc(50% - 6vw); 
    height: 2vh;
    width:9vw;
    background-image: url("../images/add-to-discord.png");
    background-repeat: no-repeat;
    background-size: 9vw 2vh;
    cursor:pointer;
    
    
}
.material-symbols-outlined
{
    cursor: pointer;
}
.popup .material-symbols-outlined
{
    position: relative;
    top:-0.1em;
    right:1vh;
    float:right;
}
.popup
{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 30%;
    width: 50%;
    background-color: rgba(210, 252, 253, 0.541);
    border-radius: 1%;
    border: 2px solid #020608;
    z-index: 10;
    text-align: center;
}
h1
{
    font-family: 'Lato';
    position: relative;
    top: -50%;
}
h3
{
    font-family: 'Lato';
}
p
{
    font-family: 'Lato';
    padding-top: 1vh;
    padding-bottom: 1vh;
}
p:nth-child(even)
{
    background-color: #071c2498;
}
.hidden
{
    display: none;
}
#close_bt
{
    position: relative;
    top:1vh;
    right:1vh;
}