@font-face {
        font-family: Motiva-Medium;
        src: url(/fonts/MotivaMedium.ttf);
}

@font-face {
        font-family: Motiva-Black;
        src: url(/fonts/MotivaBlack.ttf);
}

@font-face {
        font-family: lulo;
        src: url(/fonts/Lulo_Clean_One_Bold.ttf);
}

:root {
        --red: #CE0000;
        --motion-ease: cubic-bezier(0.68, -0.6, 0.32, 1.6);
        --motion-duration: 0.3s;
}

* {
        box-sizing: border-box;
}

html {
        height: 100%;
}

body {
        padding: 0;
        margin: 0;
        width: 100vw;
        height: 100vh;
        background-image: url(/bg.jpeg);
        background-size: cover;
        background-position: 0 40%;
}

div {
        margin: auto;
        width: 70vw;
        margin-top: 10vh;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-content: center;
        border-radius: 2vw;
        background-color: rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(10px) saturate(120%);
        -webkit-backdrop-filter: blur(10px) saturate(180%);
        box-shadow: inset 0 0 0 200px rgba(255,255,255,0.2);
}

div img {
        margin: auto;
        width: 50vw;
        margin-bottom: 4vh;
}

div h1 {
        margin: auto;
        font-family: Motiva-Black;
}

div p {
        margin: auto;
        margin-top: 2vh;
        margin-bottom: 3vh;
        font-family: Motiva-Medium;
        text-align: center;
}

div div {
        margin: auto;
        width: 20vw;
        height: 7.5vh;
        border-radius: 2.5vh;
        background-color: #fff;
        text-align: center;
}

form { 
        margin: auto;
}

button {
        appearance: none;
        background: transparent;
        border: 0;
        color: #fff;
        cursor: pointer;
        font-family: Motiva-Medium;
        font-weight: 500;
        font-size: 20pt;
        line-height: 1;
        padding: 1em 1.5em;
        position: relative;
        transition: filter var(--motion-duration);
}

button:hover {
        filter: brightness(1.1);
}

button:active {
        filter: brightness(0.9);
}

button>span {
        display: block;
        position: relative;
        transition: transform var(--motion-duration) var(--motion-ease);
        z-index: 1;
}

button:hover>span {
        transform: scale(1.05);
}

button:active>span {
        transform: scale(0.95);
}

button>svg {
        fill: var(--red);
        position: absolute;
        top: -5%;
        left: -5%;
        width: 110%;
        height: 110%;
}

button>svg>path {
        transition: var(--motion-duration) var(--motion-ease);
}

button:hover>svg>path {
        d: path("M0,0 C0,-5 100,-5 100,0 C105,0 105,100 100,100 C100,105 0,105 0,100 C-5,100 -5,0 0,0");
}

button:active>svg>path {
        d: path("M0,0 C30,10 70,10 100,0 C95,30 95,70 100,100 C70,90 30,90 0,100 C5,70 5,30 0,0");
}