/*@font-face kit by Fonts2u (http://www.fonts2u.com) */ @font-face {font-family:"KG Primary Penmanship Alt";src:url("KGPrimaryPenmanshipAlt.eot?") format("eot"),url("KGPrimaryPenmanshipAlt.woff") format("woff"),url("KGPrimaryPenmanshipAlt.ttf") format("truetype"),url("KGPrimaryPenmanshipAlt.svg#KGPrimaryPenmanshipAlt") format("svg");font-weight:normal;font-style:normal;}

@keyframes scroll {
    0%   {transform: translate3d(0,0,0);}
    100% {transform: translate3d(-1920px,0,0);}
}

@keyframes flag-movement {
    0% {transform: translate3d(9600px,0,0);}
    100% {transform: translate3d(-960px,0,0);}
}

body {
    margin : 0;
    background : black;
    width : 100vw;
    height : 100vh;
    position: relative;
    overflow: hidden;
    font-family: "KG Primary Penmanship Alt";
    font-size: 8vh;
    color: white;
    text-shadow: 0 0 15px #ffffaa;
}

p {
    background: #000000a0;
    border-radius: 10px;
    box-shadow: 0 0 10px #000000a0;
}

.option {
    min-width: 7vh;
    text-align: center;
}

.option:hover {
    color: gold;
    cursor: pointer;
}

.competitor {
    position: absolute;
    left: 0;
    width: 100%;
    height : 100%;
    transition: transform 1s;
    background-position: center;
    background-repeat: no-repeat;
}

#flag {
    position : absolute;
    left: 0;
    width: 100%;
    height: 20%;
    bottom: 10%;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(flag.svg);
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-duration: 66s;
}

#fade-overlay {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background : black;
    pointer-events: none;
    transition: opacity 1.5s;
}
    
.wrapper {
    position: absolute;
    left: 0;
    width: 100%;
    height : 15%;
    transition: transform 5s;
}

.bg-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% + 1920px);
    height: 100%;
    background-repeat: repeat-x;
    background-position: bottom;
}

.bg-animation {
    animation-name: scroll;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#answers {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-evenly;
}

#question {
    flex: 1;
}

#overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#layer1 {
    background-image: url(01.png);
    animation-duration: 4s;
    opacity: 0.5;
}


#layer2 {
    background-image: url(02.png);
    animation-duration: 7s;
}


#layer3 {
    background-image: url(03.png);
    animation-duration: 12s;
}

#competitor4-wrapper {
    bottom: 40%;
}

#competitor3-wrapper {
    bottom: 35%;
}

#player-wrapper {
    bottom: 30%;
}

#competitor2-wrapper {
    bottom: 25%;
}

#competitor1-wrapper {
    bottom: 20%;
}

#competitor-red {
    background-image: url(witch-red.svg);
}

#competitor-orange {
    background-image: url(witch-orange.svg);
}

#competitor-yellow {
    background-image: url(witch-yellow.svg);
}

#competitor-green {
    background-image: url(witch-green.svg);
}

#competitor-blue {
    background-image: url(witch-blue.svg);
}

#competitor-purple {
    background-image: url(witch-purple.svg);
}

#competitor-rainbow {
    background-image: url(witch-rainbow.svg);
}

#competitor-black {
    background-image: url(witch-black.svg);
}

#layer4 {
    background-image: url(04.png);
    animation-duration: 18s;
}


#layer5 {
    background-image: url(05.png);
    animation-duration: 27s;
}


#layer6 {
    background-image: url(06.png);
    animation-duration: 36s;
}


#layer7 {
    background-image: url(07.png);
    animation-duration: 48s;
}


#layer8 {
    background-image: url(08.png);
    animation-duration: 80s;
}


#layer9 {
    background-image: url(09.png);
    animation-duration: 120s;
}


#layer10 {
    background-image: url(10.png);
}

#choose-screen {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    display: flex;
}

#player-section {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#player-image {
    width: 80%;
    max-height: 80%;
}

#name-input {
    background: #202020;
    color: gold;
    border-radius: 4px;
    border-color: gray;
}

.button {
    padding: 10px;
    margin: 10px;
}

#red-button {
    background: #b20000;
}

#orange-button {
    background: #c85800;
}

#yellow-button {
    background: #efb82a;
}

#green-button {
    background: #0e9c00;
}

#blue-button {
    background: #005c9c;
}

#purple-button {
    background: #552884;
}

#rainbow-button {
    background: linear-gradient(to right, red,orange,yellow,green,blue,purple);
}

#black-button {
    background: black;
}

#competitors-title {
    width: 100%;
    text-align: center;
    font-size: min(5vh,5vw);
}


#competitor-section {
    width: 50%;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    border-left: 1px solid gold;
}

.competitor-box {
    width: 50%;
    max-height: 50%
}

.competitor-image {
    width: min(25vw,25vh);
    padding: 5px;
}

.competitor-name {
    font-size: min(3vh,3vw);
    text-align: center;
}

#player-title {
    width: 100%;
    text-align: center;
    font-size: min(5vh,5vw);
}

#score-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.default-button {
    background: linear-gradient(to top right,green,darkgreen);
    color: lightgreen;
    border-radius: 20px;
}

#accuracy {
    font-size: 4vh;
    padding: 2vh;
    color: gold;
}

#preload {
    width: 100vw;
    height: 100vh;
    margin: 0;
    display: flex;
    color: wheat;
    text-align: center;
    flex-direction: column;
    font-size: 3vh;
}

#preload a {
    color: gold;
}

p.version {
    font-size: 2vh;
}          
    
#progress-holder {
    width: 80%;
    height: 5%;
    margin: auto;
    background: #303030;
}

#progress-bar {
    width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    transition: width 0.2s;
    animation-name: pulse;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes pulse {
  0%   {background: #ffffaa; box-shadow: #ffaaaa 1px 1px 3px, #ffaaaa -1px -1px 3px, #ffaaaa 1px -1px 3px, #ffaaaa -1px 1px 3px;}
  50%  {background: #ffffe0;box-shadow: #ffe0e0 1px 1px 3px, #ffe0e0 -1px -1px 3px, #ffe0e0 1px -1px 3px, #ffe0e0 -1px 1px 3px;}
  100% {background: #ffffaa;box-shadow: #ffaaaa 1px 1px 3px, #ffaaaa -1px -1px 3px, #ffaaaa 1px -1px 3px, #ffaaaa -1px 1px 3px;}
}

.spacer {
    flex: 1;
}