@font-face {
    font-family: 'Light';
    src: url('../fonts/secondfont.ttf');
}

/* font */

body {
    background-color: rgb(0, 0, 0);
}

/* body */

#overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.9;
    background-color: #000;
    z-index: 10000;
}

.overlaybtn {
    background-color: transparent;
    border: transparent;
    cursor: pointer;
    color: #fff;
    font-family: 'Light';
    font-size: 6vh;
    text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #fff,
    0 0 82px #fff;
}

/* overlay */

.center {
    display: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: -1vh;
    margin-bottom: 5vh;
    max-height: 500px;
    animation: fadeIn 3s ease-in-out forwards;
}

.nodrag {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

#text-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.text {
    display: none;
    text-align: center;
    margin: 0;
    font-family: Light;
    color: #fff;
    animation: fadeIn 3s ease-in-out forwards;
    white-space: nowrap;
}


.anim {
    animation: blinker 4s linear infinite;
}

/* landing */

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

    2% {
        opacity: 1;
    }

    4% {
        opacity: 0;
    }

    6% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}

.animated {
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animatedfast{
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
}

@-webkit-keyframes swing {

    50% {
        -webkit-transform: rotate3d(0, 0, 1, -6deg);
        transform: rotate3d(0, 0, 1, -6deg);
    }


    to {
        -webkit-transform: rotate3d(0, 0, 1, 6deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

@keyframes swing {
    50% {
        -webkit-transform: rotate3d(0, 0, 1, -6deg);
        transform: rotate3d(0, 0, 1, -6deg);
    }


    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

.swing {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
}

/* effects */