body, html {
    min-height: 100%;
}

@property --preReg-font-color-from {
    syntax: "<color>";
    inherits: true;
    initial-value: #7361e9;
}

@property --preReg-font-color-to {
    syntax: "<color>";
    inherits: true;
    initial-value: #d84baa;
}

#pre-registration {
    position: relative;
    height: 100vh;
    min-height: 600px;
	opacity: 0;
    pointer-events: none;


    --preReg-font-color-from: #7361e9;
    --preReg-font-color-to: #d84baa;
    --preReg-font-color: #ffffff;
    --preReg-font-color-label: #333333;
    --preReg-font-size: 34px;
    --preReg-font-size-button: 22px;
    --preReg-bg-color-window: #ffffff;
    --preReg-bg-color-window-border: #cccccc;

    & > .page-wrapper {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        & > .background {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;

            & > video {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                object-fit: cover;
                z-index: -1;
                pointer-events: none;
            }
        }

        & > .window {
            position: relative;
            background: var(--preReg-bg-color-window);
            height: 518px;
            border: 10px solid var(--preReg-bg-color-window-border);
            border-radius: 30px;
            width: 726px;
            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);

            & > .logo {
                position: relative;
                background: url("/static/img/desktop/logo.png");
                width: 176px;
                height: 176px;
                margin: 57px auto 0;
            }

            & > .label {
                position: relative;
                text-align: center;
                font-size: var(--preReg-font-size);
                color: var(--preReg-font-color-label);
                font-weight: bold;
                padding-top: 42px;
                line-height: 1.20588em;
                letter-spacing: 0.01470588em;
                user-select: none;
            }

            & > .button {
                position: relative;
                cursor: pointer;
                margin: 34px auto 0;
                width: 284px;
                height: 65px;
                box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
                border-radius: 10px;
                background: linear-gradient(90deg, var(--preReg-font-color-from), var(--preReg-font-color-to));
                font-size: var(--preReg-font-size-button);
                text-align: center;
                color: var(--preReg-font-color);
                font-weight: bold;
                line-height: 63px;
                letter-spacing: 0.01704545em;
                user-select: none;
                transition: --preReg-font-color-to 1s, --preReg-font-color-from 1s, box-shadow 0.1s;

                &:hover {
                    --preReg-font-color-to: #3399ff;
                    --preReg-font-color-from: #37e251;
                }

                &:active {
                    box-shadow: 0 0 0;
                }
            }
        }
    }
	
	&.show {
		opacity: 1;
		pointer-events: auto;
	}
}

.intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
    opacity: 1;
    transition: opacity 0.6s ease;
    & > video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    &.hidden {
        opacity: 0;
        pointer-events: none;
    }
}

@media only screen and (max-width: 816px) {
    #pre-registration > .page-wrapper > .window {
        width: calc(100% - 80px);
        min-width: 440px;
    }
}