@property --rotation {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false
}
@keyframes rotate { to { --rotation: 1turn } }

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
}

.video-wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 110vw;
    height: 110vh;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

#Video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.1s ease;
}

.main {
    background: linear-gradient(180deg, #161616 0%, #b4b4b4 100%);
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.wrapper {
    backdrop-filter: blur(3px);
    padding: 100px;
    border-radius: 25px;
    display: flex;
    width: fit-content;
    height: fit-content;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.title {
    filter: drop-shadow(0 0 10px #000);
    font-family: "Bebas Neue";
    font-size: 62px;
    color: #fff;
}

.buttons {
    display: flex;
    gap: 10px;
    flex-direction: row;
}

.button {
    transition: all 0.2s ease-in-out;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #303030a2;
    border-radius: 8px;
    width: 50px;
    height: 50px;
    overflow: hidden;
}

.button:hover {
    background: #3d3d3da2;
    transform: translateY(-5px) matrix3d(1,0,0.00,0,0.00,1,0.00,-.003,0,0,1,0,0,0,0,1);
}

.button:hover::before {
    content: "";
    z-index: -1;
    position: absolute;
    inset: -1em;
    filter: blur(.2em);
    border: solid 1.1em;
    border-image: conic-gradient(from var(--rotation), #fff0 15%, #fff 25%, #fff0 35%, #fff0 65%, #fff 75%, #fff0 85%) 1;
    animation: rotate 4s linear infinite;
}

.button > a {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
}

svg {
    width: 60%;
    height: 60%;
}

.loader-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
    background: #444444;
}

.loader {
    width: 40px;
    height: 40px;
    --c:no-repeat linear-gradient(#1f1f1f 0 0);
    background: var(--c),var(--c),var(--c),var(--c);
    background-size: 21px 21px;
    animation: l5 1.5s infinite cubic-bezier(0.3,1,0,1);
}

@keyframes l5 {
   0%   {background-position: 0    0,100% 0   ,100% 100%,0 100%}
   33%  {background-position: 0    0,100% 0   ,100% 100%,0 100%;width:60px;height: 60px}
   66%  {background-position: 100% 0,100% 100%,0    100%,0 0   ;width:60px;height: 60px}
   100% {background-position: 100% 0,100% 100%,0    100%,0 0   }
}