@font-face {
    font-family: "etter-sans";
    src: url("../rsc/Etter-Sans.woff2") format("woff2"),
        url("../rsc/Etter-Sans.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "etter-medium";
    src: url("../rsc/Etter-Medium.woff2") format("woff2"),
        url("../rsc/Etter-Medium.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    font-size: 0;
    font-family: "etter-sans", sans-serif;
    color: #000;
    background-color: #fff;
}

stage,
svg,
path,
rect,
layer,
circle {
    left: 0px;
    top: 0px;
    position: absolute;
    overflow: visible;
    user-select: none;
}

svg {
    width: 100%;
    height: 100vh;
}


/*canvas*/

.hero {
    position: relative;
    width: 100%;
    height: calc(100% - 144px);
}

bg {
    position: absolute;
    background-color: #2f00ff;
    width: 100%;
    height: calc(100% - 144px);
}

.cut {
    height: calc(100% - 144px);
}


/*imgs*/

img,
video {
    width: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    display: block;
}

img.l,
video.l {
    max-width: 900px;
}

img.m,
video.m {
    max-width: 450px;
}

img.s,
video.s {
    max-width: 240px;
}

img.t,
video.t {
    max-width: 120px;
    padding-right: 50px;
}

img.loaded,
video.loaded {
    opacity: 1;
}


/* titles */

tit {
    position: absolute;
    z-index: 1;
    font-size: 64px;
    padding: 0px 0px 0px 0px;
    user-select: none;
    cursor: pointer;
}

sub {
    position: absolute;
    z-index: 1;
    font-size: 40px;
    padding: 96px 0px 0px 0px;
    user-select: none;
    cursor: pointer;
}

.centered {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
}

.middle {
    text-align: center;
}

white {
    display: flex;
    background-color: #fff;
    justify-content: center;
    overflow: hidden;
}

black {
    display: flex;
    /*background-color: #001e96;*/
    background-color: hsl(0, 0%, 75%);
    justify-content: center;
    overflow: hidden;
}

txt {
    padding: 24px;
    width: 100vw;
    max-width: 900px;
}

/*text sizes*/

txl {
    display: block;
    font-size: 40px;
    letter-spacing: -0.25px;
}

txm {
    display: block;
    font-size: 24px;
}

txm.f {
    font-size: 24.5px;
}

txs {
    display: block;
    max-width: 480px;
    font-size: 16px;
}

txs.f {
    font-size: 17px;
}


/*colors*/

.c {
    color: #2f00ff;
}

.g {
    color: #999;
}

.w {
    color: #fff;
}

/*fat*/

.f {
    font-family: "etter-medium", sans-serif;
}


/*links*/

a {
    color: #00f;
    transition: 0.5s;
    text-decoration: none;
}

a:hover {
    color: #000;
}

.g a {
    color: #000;
}

.g a:hover {
    color: #00f;
}

.w a {
    color: #fff;
}

.w a:hover {
    color: #ff0000;
}


/*hidden*/

.hide {
    display: none;
}

.buto {
    cursor: pointer;
    user-select: none;
}


/*spacing*/

spl {
    display: flex;
    width: 100%;
    height: 96px;
}

spm {
    display: flex;
    width: 100%;
    height: 48px;
}

sps {
    display: flex;
    width: 100%;
    height: 24px;
}

/*button*/

pot {
    display: block;
    text-align: left;
}

edit {
    display: block;
    border-radius: 2px;
    padding: 20px;
    width: 350px;
    text-align: left;
    outline: none;
    color: #000;
    background-color: #fff;
}

button {
    padding: 17px 25px 20px 25px;
    border-radius: 4px;
    font-size: 24px;
    letter-spacing: 1px;
    border: 0px solid;
    transition: all 0.5s ease;
    user-select: none;
    color: #fff;
    background-color: #2f00ff;
    cursor: pointer;
}

button:hover {
    background: #5404a0;
}

button.cancel {
    background-color: #555;
}

button.cancel:hover {
    background: #777;
}

form {
    align-items: center;
    width: 340px;
    height: 38px;
    padding: 25px;
    border-radius: 3px;
    font-size: 32px;
    transition: all 0.25s ease-out;
    user-select: none;
    color: #fff;
    background-color: #2f00ff;
    cursor: pointer;
}

form.expand {
    background-color: rgb(23, 0, 99);
    width: 400px;
    height: 1080px;
}


/*tables*/

table {
    width: 100%;
    border-collapse: collapse;
    border: 0px solid purple;
    font-size: 15px;
    text-align: left;
}

th,
td {
    padding: 10px;
    vertical-align: top;
}

table tr:nth-child(even) {
    background-color: #f9f9f9;
}

table tr {
    transition: background-color 0.5s ease;
}

table tr:hover {
    background-color: #e0e0e0;
}

td img {
    width: 100px;
}


/*animation*/

.missing {
    animation: miss 1s ease both;
}

@keyframes miss {
    0% {
        background-color: #f00;
    }

    100% {
        background-color: #fff;
    }
}

.blink {
    animation: blinker 2s linear infinite;
}

@keyframes blinker {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }


    100% {
        opacity: 0;
    }
}

.fadeIn {
    animation: fade_in 0.75s ease both;
}

@keyframes fade_in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fadeOut {
    animation: fade_out 0.75s ease both;
}

@keyframes fade_out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


/*mobile*/

@media only screen and (max-width:750px) {

    bg {
        height: calc(100% - 120px);
    }

    .cut {
        height: calc(100% - 120px);
    }

    txt {
        padding: 16px;
    }


    /*spacing*/

    spl {
        height: 64px;
    }

    spm {
        height: 24px;
    }

    sps {
        height: 12px;
    }


    /*titel*/

    tit {
        font-size: 36px;
    }

    sub {
        font-size: 24px;
        padding: 64px 0px 0px 0px;
    }


    /*img video*/

    img.t,
    video.t {
        max-width: 100px;
        padding-right: 40px;
    }


    /*text*/

    txl {
        font-size: 24px;
        line-height: 31px;
    }

    txm {
        font-size: 20px;
    }

    txm.f {
        font-size: 20.5px;
    }

    txs {
        font-size: 15px;
    }

    txs.f {
        font-size: 15.5px;
    }


    /*buttons*/

    form {
        width: 300px;
        height: 32px;
        padding: 20px;
        border-radius: 3px;
        font-size: 25px;
    }

    form.expand {
        width: calc(100% - 40px);
        height: 750px;
    }

    edit {
        padding: 15px;
        width: calc(100% - 30px);
    }

    button {
        padding: 13px 20px 15px 20px;
        font-size: 20px;
    }

}