body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    /*background: rgba(0,0,0,0.5);*/
}

.unselectable{
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}
#ferretVideoContainer {
    position: relative;
    overflow: hidden;
    width: 100vw;
    height: 56vw;
    left: 0px;
    top: 0px;
    max-height: 100vh;
    max-width: 175vh;
}

#player {
    top: 0;
    /*position: absolute;*/
    left: 0;
    width: 100%;
    height: 100%;
}


.buttons{
    position: absolute;
    top: 38%;
    left: 1%;
    width: 47vw;
    z-index: 15;
    transition: 0.5s;
}
.button{
    width: 42%;
    font-size: 1.5vw;
    background: #6f509c;
    color: white;
    font-family: sans-serif;
    padding: 1vw;
    border-radius: 1vw;
    cursor: pointer;
    transition: 0.5s;
    display: inline-flex;
    margin: 0.5vw;
    height: 3vw;
    text-align: center;
    vertical-align: top;
    box-shadow: 0.5vw 0.5vw 0.5vw #00000070;
    align-items: center;
    justify-content: center;
    border: white solid 0vw;
    position: relative;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}
.button.wrong{
    background: red;
}
.button.right{
    background: green;
}

.button:hover{
    border: white solid 0.25vw;
}
.button.clickAnswer{
    border: white solid 0.25vw;
    color:  #fcd501;
}
.hidden{
    opacity: 0;
    visibility: hidden;
}
.visible{
    opacity: 1;
    visibility: visible;
}
.type2{
    width: 90%;
    padding: 2vw;
}
.type3{
    width: 90%;
    padding: 1vw;
    font-size: 1.5vw;
    height: 3vw;
}
#question6{
    top:24%;
}
.button p{
    margin: 0;
}
.button.static{
    position: absolute;
    z-index: 11;
    top: 1%;
    left: 1%;
    width: unset;
    height: unset;
}
h2{
    font-size: 3vw;
    font-family: sans-serif;
    color: #6f509c;
}

#navigation{
    width: 52%;
    top: 11%;
    left: 8%;
}

#navigation .button{
    width: 57%;
}

#navigationClose{
    width: unset;
    top: 1%;
    z-index: 40;
    left: 1%;
    display: none;
}

.navigation #navigationClose{
    display: block;
}

.static.skip{
    left: 79%;
    z-index: 16;
    bottom: 8%;
    top: unset;
    display: none;
}

.check{
    visibility: hidden;
    opacity: 0;
    position: absolute;
    right: -6%;
    top: -35%;
    width: 6vw;
}
.buttons.answered .check{
    visibility: visible;
    opacity: 1;
}
#locker{
    position: absolute;
    z-index: 13;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.star{
    width: 7vw;
    height: 7vw;
    margin-bottom: 3vw;
    transition: 0.5s;
    display: inline-block;
    cursor: pointer;
    background: url('star.png');
    margin-right: 0.5vw;
    background-size: contain!important;
}
.star.active{
    background: url("starFilled.png");
}
.star:hover{
    transform: scale(1.1);
}

#final{
    top: 9vw;
}

.timer{
    display: block;
    transition: 0.5s;
    width: 96%;
    background: #fcd501;
    vertical-align: top;
    box-shadow: 0.5vw 0.5vw 0.5vw #00000070;
    border-radius: 1vw;
    margin: 0.8vw;
}

.timer .content{
    background: #6f509c;
    height: 3vw;
    border-radius: 0.5vw;
    width: 100%;
    transition: 3s;
    transition-timing-function: linear;
}

.allRight{
    display: none;
    border: white solid 0.25vw;
    background: #62b01e;
}


#question5{
    top: 25%;
}
.buttons.answered .allRight{
   display: flex;
}

#question3{
    top: 14vw;
}

#question3 .check{
    right: -4%;
}


.navigation #player{
    filter:blur(10px);
}

.navigation #locker{
    display: block!important;
}