@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');

body {
    margin: 0;
    background-image: url("https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExbGQ0Zm1yaTB2b2xpN3Z6d2twdjJpOGdteDM1dGVheWI3MTVqeGd4dyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/l3vRbNFMuFt5Zm372/giphy.gif");
    background-size: cover;
    animation: gradient 40s ease infinite;
    user-select: none;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

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

    width: 100dvw;
}

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

    backdrop-filter: blur(5px);

    width: 600px;
    height: 600px;

    border-radius: 10px;
    background-color: #0000009a;

    box-shadow: 0 0 5px 5px #0000009a;

    /* scale: 145%; */
}

.nbody {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100dvw;
    height: 100dvh;

    background-color: #1110108a;
    box-shadow: inset 0 0 4dvh 4dvh #000000eb;
}

.title {
    position: absolute;
    top: 4%;

    font-family: Ubuntu;
    font-size: 37px;
    font-weight: bolder;
    letter-spacing: 4px;
    color: rgba(182, 219, 251, 0.73);
    text-decoration: none;
    transition-duration: 0.5s;
}

.title:hover {
    text-shadow: 0 0 15px rgba(182, 219, 251, 0.73), 0 0 15px rgba(182, 219, 251, 0.73);
    transition-duration: 0.5s;
}

.but_tabs {
    position: absolute;
    top: 16%;
}

.but_name, .but_fun, .but_socia {
    margin: 0 30px 0 30px;
    font-family: Ubuntu;
    font-size: 19px;
    font-weight: bolder;
    letter-spacing: 6px;
    color: rgba(182, 219, 251, 0.73);
    text-decoration: none;
    transition-duration: 0.5s;
}

.but_name:hover, .but_fun:hover, .but_socia:hover {
    text-shadow: 0 0 15px rgba(182, 219, 251, 0.73), 0 0 15px rgba(182, 219, 251, 0.73);
    transition-duration: 0.5s;
}

.boards {
    position: absolute;

    display: flex;
    justify-content: center;
    align-items: center;

    left: -69px;
    top: 30px;

    width: 60px;
    height: 40px;

    border-radius: 5px 0 0 5px;
    background-color: #0000009a;

    box-shadow: 0 0 5px 5px #0000009a;
}

.ver0_5 {
    position: absolute;

    display: flex;
    justify-content: center;
    align-items: center;

    left: -48px;
    top: 90px;

    width: 39px;
    height: 40px;

    border-radius: 5px 0 0 5px;
    background-color: #0000009a;

    box-shadow: 0 0 5px 5px #0000009a;
}

.ver1 {
    position: absolute;

    display: flex;
    justify-content: center;
    align-items: center;

    left: -40px;
    top: 150px;

    width: 31px;
    height: 40px;

    border-radius: 5px 0 0 5px;
    background-color: #0000009a;

    box-shadow: 0 0 5px 5px #0000009a;
}

.boards a, .ver0_5 a, .ver1 a {
    position: relative;
    left: 3px;

    text-decoration: none;
    font-family: Ubuntu;
    font-weight: bolder;
    color: rgba(182, 219, 251, 0.73);
    transition-duration: 0.5s;
}

.boards a:hover, .ver0_5 a:hover, .ver1 a:hover {
    text-shadow: 0 0 3px rgba(182, 219, 251, 0.73);
    transition-duration: 0.5s;
}