@font-face {
    font-family: 'ROG LyonsType Regular';
    font-style: normal;
    font-weight: normal;
    src: local('ROG LyonsType Regular'), url('fonts/rog-lyonstype-webfont/ROGLyonsTypeRegular3.woff') format('woff');
    }

:root {
    --box-size: min(50vw, 50vh);
    --box-center: calc(var(--box-size) / 2)
}

* {
    font-family: 'ROG LyonsType Regular', "Tenorite", "Open Sans", 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    box-sizing: border-box;
    border: 0px solid grey;  
    color: white;  
}

html {
    height: 100%;
}

@media (min-width: 1500px) {
    html {
        font-size: 14pt;
    }
}

@media (max-width: 1499px) {
    html {
        font-size: 12pt;
    }
}

@media (max-width: 1100px) {
    html {
        font-size: 8pt;
    }
}

@media (max-width: 810px) {
    html {
        font-size: 6pt;
    }
}

@media (max-width: 412px) {
    html {
        font-size: 3pt;
    }
}

.firework {
    position: absolute;
    height: 10px;
    width: 10px;
    background-color: rgb(256,256,256);
}

.particle {
    position: absolute;
    height: 5px;
    width: 5px;
}

body {
    height: 100%;
    width: 100%;
    margin: 0;
    background-color: black;    
}

div {
    display: flex;
    text-align: center;
    justify-content: space-around;
    align-items: center;
}

#firework-base {
   position:fixed;
   left:0px;
   bottom:0px;
   height:0px;
   width:100%;
}

#card {
    animation: card 5s normal;
}

@keyframes card {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 100;
    }
}

.fw1 {
    animation: fw1_fade 3s normal;
    opacity: 0;
}

@keyframes fw1_fade {
    0% {
        opacity: 100;
    }
    90% {
        opacity: 100;
    }
    100%{
        opacity: 0;
    }
}

.box {
    width: var(--box-size);
    height: var(--box-size);
}

#present {    
    animation: present_drop 0.5s;
    animation-timing-function: linear;
    position: absolute;
    left: calc(50vw - var(--box-center));
    top: calc(50vh -  var(--box-center));
}

@keyframes present_drop {
    0% {
        top: -100vh;
    }
    70% {
        top: calc(50vh - calc(var(--box-center) - 10px));
    }
    85%{
        top: calc(50vh - calc(var(--box-center) + 50px));
    }
    100%{        
        top: calc(50vh - var(--box-center));
    }
}

@keyframes lift_present_top{
    0%{
        top: 0;
    }
    100%{
        top: -100vh
    }
}

#open-present {
    position: absolute;
    top: 0;
    left: 0;
}

#present-lid {
    position: absolute;
    top: 0;
    left: 0;
}

#present-box-back{
    position: absolute;
    top: 0;
    left: 0;
}

#present-box-front{
    position: absolute;
    top: 0;
    left: 0;
}

#pat-head-front {
    position: absolute;
    visibility: visible;
    width: calc(var(--box-size) * (0.1 * 0.685));
    height: calc(var(--box-size) * 0.1);
    top: calc(var(--box-center) + calc(var(--box-size) * 0.3));
    left: calc(var(--box-center) - calc(var(--box-size) * 0.01));
    z-index: 0;
}

@keyframes pat-emerges {
    0%{
        width: calc(var(--box-size) * (0.1 * 0.685));
        height: calc(var(--box-size) * 0.1);
        top: calc(var(--box-center) + calc(var(--box-size) * 0.3));
        left: calc(var(--box-center) - calc(var(--box-size) * 0.01));
        z-index: 0;
    }
    40%{
        width: calc(var(--box-size) * (0.4 * 0.685));
        height: calc(var(--box-size) * 0.4);
        top: calc(var(--box-center) - calc(var(--box-size) * 0.4));
        left: calc(var(--box-center) - calc(var(--box-size) * 0.1));
        z-index: 0;
    }
    59%{
        z-index: 1;
    }
    60%{
        width: calc(var(--box-size) * (0.8 * 0.685));
        height: calc(var(--box-size) * 0.8);
        top: calc(var(--box-center) - calc(var(--box-size) * 0.8));
        left: calc(var(--box-center) - calc(var(--box-size) * 0.22));
        z-index: 1;
    }
    100%{
        width: calc(var(--box-size) * (1.5 * 0.685));
        height: calc(var(--box-size) * 1.5);
        top: calc(var(--box-center) - calc(var(--box-size) * 0.5));
        left: calc(var(--box-center) - calc(var(--box-size) * 0.5));
        z-index: 1;
    }
}

#glasses-front-on{
    position: absolute;
    visibility: hidden;
    z-index: 2;
    top: calc(var(--box-center) - calc(var(--box-size) * 0.15));
    left:  calc(var(--box-center) - calc(var(--box-size) * 0.19));
    width: calc(var(--box-size) * (0.2 * 2.198));
    height: calc(var(--box-size) * 0.23);
}

#glasses-front-on-lenses, #glasses-front-on-frame{
    position: absolute;
    height: 100%;
    width: 100%;
}

@keyframes glasses-slide-in {
    0%{
        visibility: visible;        
        left:  200vw;
    }
    100%{
        left:  calc(var(--box-center) - calc(var(--box-size) * 0.19));
    }
}

#pat-head-angled{
    visibility: hidden;
    position: absolute;
    z-index: 3;
    width: calc(var(--box-size) * (1.4 * 0.856));
    height: calc(var(--box-size) * 1.4);
    top: calc(var(--box-center) - calc(var(--box-size) * 0.6));
    left: calc(var(--box-center) - calc(var(--box-size) * 0.6));    
}

#pat-head-angled-head{    
    position: absolute;
    width: 100%;
    height: 100%;
}

#pat-head-angled-mouth{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 6;
}

@keyframes head-jitter {
    0%{
        transform: rotate(2deg);
    }    
    100%{
        transform: rotate(-2deg);
    }    
}

@keyframes mouth-open {
    0%{
        top: 0px;
        left: 0px;
    }
    90%{
        top: 58px;
        left: 17px;
    }
    100%{
        top: 0px;
        left: 0px;
    }
}

#voucher{
    position: absolute;
    z-index: 4;
    width: calc(var(--box-size) * (0.1 * 2.25));
    height: calc(var(--box-size) * 0.1);
    top: calc(var(--box-center) + calc(var(--box-size) * 0.5));
    left: calc(var(--box-center) - calc(var(--box-size) * 0));
    transform: rotate(75deg);    
    font-size: 0.5em;
}

#voucher-img{
    position: absolute;
    width: 100%;
    height: 100%;
}

@keyframes voucher-emit {
    0%{
        width: calc(var(--box-size) * (0.1 * 2.25));
        height: calc(var(--box-size) * 0.1);
        top: calc(var(--box-center) + calc(var(--box-size) * 0.5));
        left: calc(var(--box-center) - calc(var(--box-size) * 0));
        transform: rotate(75deg);
        z-index: 4;
        font-size: 0.5em;
    }
    80%{
        width: calc(var(--box-size) * (0.23 * 2.25));
        height: calc(var(--box-size) * 0.23);
        top: calc(var(--box-center) + calc(var(--box-size) * 0.02));
        left: calc(var(--box-center) - calc(var(--box-size) * 0.3));
        transform: rotate(75deg);
        z-index: 4;
        font-size: 0.5em;
    }
    81%{
        z-index: 7;
    }
    100%{
        width: calc(var(--box-size) * (0.7 * 2.25));
        height: calc(var(--box-size) * 0.7);
        top: calc(var(--box-center) - calc(var(--box-size) * 0.1));
        left: calc(var(--box-center) - calc(var(--box-size) * 0.65));
        transform: rotate(0deg);
        z-index: 7;
        font-size: 4em;
    }
}

#glasses-angled{
    visibility: hidden;
    position: absolute;
    z-index: 4;
    width: calc(var(--box-size) * (0.6 * 2.198));
    height: calc(var(--box-size) * 0.6);
    top: calc(var(--box-center) - calc(var(--box-size) * 0.2));
    left: calc(var(--box-center) - calc(var(--box-size) * 0.65));    
}

#glasses-angled-lenses, #glasses-angled-frames{
    position: absolute;
    height: 100%;
    width: 100%;
}

#flash {
    visibility: hidden;
    z-index: 100;
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: white;
}

@keyframes flash_anim {
    0%{
        visibility: hidden;
    }
    50%{
        visibility: visible;
    }
    100%{
        visibility: hidden;
    }
}

.text {
    z-index: 10;
    padding: auto;
    margin: auto;
    display: flex;
}

#voucher-text {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;    
    width: 100%;
    height: 100%;
}

#text1{
    display: none;
    font-size: 0.6em;
}
#text2{
    display: none;
}
#text3{
    display: none;
}
#text4{
    display: none;
}
#text5{
    display: none;
}
#text6{
    display: none;    
}