#title {
    background-image: url('../res/bg1.jpg');
}
#linktree {
    background-image: url('../res/univr_blur.png');
}


body>div:not(:last-of-type) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2em;
}


[cont] {
    z-index: 10;
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    box-shadow: 0 0 2rem 0 #000000;
    padding: 2rem;
}
[cont]>div {
    max-width: 80ex;
}
[cont]>div>:first-child {
    margin-top: 0;
}
[cont]>div>:last-child {
    margin-bottom: 0;
}


#title {
    height: 100vh;
    -webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;      
    user-select: none;
}
#logocont {
    filter: drop-shadow(0 0 .5ex black);
}
[preview] #logocont {
    background-color: white;
    border-radius: 100%;
    padding: 2rem;
}
#logo {
    width: calc(min(90vh, 90vw, 360px));
    height: calc(min(90vh, 90vw, 360px));
    object-fit: contain;
    transform: translateX(-0.33rem);
}
[preview] #_socials {
    display: none;
}
#_socials {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 0;
    width: calc(32px * 4 + 16px * 3);
    filter:
        drop-shadow(0 0 .4ex #000000cc)
        ;
}
#_socials img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    transition-delay: 0s, 0s;
    transition-duration: 0.25s, 0.25s;
    transition-property: all;
    transition-timing-function:
        cubic-bezier(0.08, 0.6, 0.3, 1),
        cubic-bezier(0.08, 0.6, 0.3, 1);
}
#_socials a:nth-child(1) { transform: scale(1.1); }
#_socials a:nth-child(3) { transform: scale(0.8); }
#_socials a:nth-child(4) { transform: scale(1.1); }
#_socials img:hover,
#_socials img:focus,
#_socials img:active {
    transform: scale(1.4);
}


#write1 h1 {
    letter-spacing: -1px;
}


#linktree>div {
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgb(235, 238, 241);
    color: black;
    border-radius: 1rem;
    width: 680px;
    max-width: calc(100vw - 2rem * 2);
    margin: 0 1rem;
    /* backdrop-filter: blur(10px); */
    padding: 1rem;
}
#linktree>div>h1 {
    margin: 0 0 1rem 0;
    text-shadow: 0 0 1ex white;
}
[btns] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
[btn] {
    background-color: white;
    border-radius: 100vw;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    box-shadow: rgba(28, 32, 93, 0.24) 0px 2px 8px 0px;
    transform: matrix(1, 0, 0, 1, 0, 0);
    transition-delay: 0s, 0s;
    transition-duration: 0.25s, 0.25s;
    transition-property: transform, box-shadow;
    transition-timing-function:
        cubic-bezier(0.08, 0.6, 0.3, 1),
        cubic-bezier(0.08, 0.6, 0.3, 1);
}
[btn]:hover {
    box-shadow: rgba(28, 32, 93, 0.24) 0px 4px 12px 0px;
    transform: scale(1.01);
}
[btn]>a {
    display: block;
    padding: 16px 20px;
    font-size: 16px;
    text-decoration: none;
    color: black !important;
}


#footer {
    font-size: 12pt;
    text-align: center;
    padding: calc(1rem + 16px);
}


@media (max-width: 1023px) {
    #linktree>div {
        background: unset;
        margin: unset;
        border: unset;
        backdrop-filter: unset;
    }
    #linktree>div>h1 {
        color: white;
        text-shadow: 0 0 1ex black;
    }
    
    [btn]>a {
        font-size: 0.85rem;
        font-weight: bold;
    }
    
    #footer {
        text-align: justify;
        font-size: 10pt;
    }
}