* {
    margin: 0;
    box-sizing: border-box;
    font-family: 'Gabarito', sans-serif;
    filter: none;
}

@view-transition {
    navigation: auto;
}

html,
body {
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
}

a {
    -webkit-tap-highlight-color: transparent;
}

#main-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

#design {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: var(--color-accent);
    z-index: 10;
}

#design:hover:not(:has(#circle:hover)) #circle {
    clip-path: circle(108% at 100% 0);
}

#circle {
    height: 100%;
    width: 100%;
    background-color: white;
    clip-path: circle(110% at 100% 0);
    transition: clip-path 0.5s;
}

#content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#messages-container {
    margin: auto;
    margin-bottom: 10px;
    width: 60vh;
    max-width: 90%;
    z-index: 30;
}

#messages-container div {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background-color: var(--color-accent);
    color: white;
    font-size: 20px;
    border-radius: 3vh;
}

#messages-container div span.icon {
    margin: auto 20px;
    font-size: 40px;
}

#messages-container+#login-container {
    margin-top: 10px;
}

#login-container {
    margin: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 4vh;
    height: 70vh;
    width: 60vh;
    max-height: 70vh;
    max-width: 90%;
    background-color: #ffffffcc;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 8px #00000050, 0px 6px 12px #00000050, 0px 10px 20px #00000050;
    border-radius: 3vh;
    z-index: 20;
}

#title-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;

}

#logo {
    margin: auto 0;
    width: 12vh;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

#title-separator {
    margin: auto 4vh;
    height: 8vh;
    width: 0.5vh;
    min-width: 0.5vh;
    border-radius: 1.5vw;
    background-color: #232323;
}

#title {
    font-size: 5vh;
    font-weight: 400;
    letter-spacing: -0.1vh;
    color: #232323;
    text-wrap: nowrap;
}

/* S è selezionabile ma nascosta */
#title-hidden-s {
    display: inline-block;
    width: 0.001px;
    opacity: 0;
}

#title-wacky-s {
    margin: 0 -1.3vh -1.7vh -1.3vh;
    height: 7vh;
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 10%;
    /* stroke-linecap: round; */
}

#loginbutton-frame {
    flex: 1;
    display: flex;
}

#button-accedi {
    padding: 5vh 10vh;
    margin: auto;
    font-size: 5vh;
    background-color: var(--color-pulsante);
    color: var(--color-accent-text);
    border-radius: 3vh;
    box-shadow: 0 1px 3px #00000050, 0 3px 6px #00000050;
    transition: box-shadow 0.2s, scale 0.1s;
    text-decoration: none;
    user-select: none;
}

#button-accedi:hover {
    box-shadow: 0 5px 10px #00000050, 0 10px 20px #00000050;
}

#button-accedi:active {
    scale: 0.95;
}

#notes-frame p {
    font-size: 16px;
}

#notes-frame a {
    color: var(--color-link);
    text-decoration: none;
    background-image: linear-gradient(to right, var(--color-link), var(--color-link));
    background-size: 0 2px;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s;
}

#notes-frame a:hover {
    background-size: 100% 2px;
    background-position: 0 100%;
}

#pulsanti-legali {
    position: absolute;
    display: flex;
    bottom: 0;
    right: 0;
    margin: 15px;
}

#pulsanti-legali a {
    z-index: 30;
    color: #3f3f3f;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 10px;
    animation: fadein 0.8s;
    transition: all 0.2s;
}

#pulsanti-legali a:hover {
    background-color: #0000001f;
}

#pulsanti-legali .separator {
    margin: auto;
    color: #3f3f3f;
    z-index: 10;
}


@keyframes circle-clip {
    0% {
        clip-path: circle(0 at calc(100% - 50px) 30px);
    }

    100% {
        clip-path: circle(110% at 100% 0);
    }
}

@media (max-width: 700px) {
    #circle {
        clip-path: circle(90% at 80% 0);
    }

    #login-container {
        box-shadow: none;
        margin: 0;
        padding: 4vh 30px 100px 30px;
        width: 100%;
        max-height: 100%;
        max-width: unset;
        background-color: transparent;
        backdrop-filter: none;
    }

    #logo {
        width: 20%;
    }

    #notes-frame {
        margin-top: 10vh;
        color: var(--color-accent-text);
        --color-link: #6fbcff;
    }

    #pulsanti-legali {
        left: 0;
        right: unset;
    }

    #pulsanti-legali a,
    #pulsanti-legali .separator {
        color: var(--color-accent-text);
    }

    @keyframes circle-clip {
        0% {
            clip-path: circle(0 at calc(100% - 50px) 30px);
        }

        100% {
            clip-path: circle(90% at 80% 0);
        }
    }

    body.view-transition #notes-frame *,
    body.view-transition #pulsanti-legali * {
        animation: fade-in .3s .5s backwards !important;
    }
}

@media (max-aspect-ratio: 1/2) {
    #title-frame {
        flex-direction: column;
        gap: 3vh;
    }

    #title-separator {
        display: none;
    }

    #logo {
        width: 20vh;
    }
}


::view-transition-image-pair(root) {
    background-color: var(--color-accent);
}

::view-transition-old(root) {
    animation: fade-out .5s cubic-bezier(.54, 0, .64, .99);
    animation-fill-mode: forwards;
}

::view-transition-new(root) {
    animation: circle-clip .5s cubic-bezier(.26, .23, .4, 1)
}