@font-face {
    font-family: 'SentinelOffice-Regular';
    src: url('./assets/menu/SentinelOffice-Regular.ttf');
}

@font-face {
    font-family: 'SentinelOffice-Bold';
    src: url('./assets/menu/SentinelOffice-Bold.ttf');
}

@font-face {
    font-family: 'National2-Medium';
    src: url('./assets/menu/National2-Medium.otf');
}

#main-tutorial {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    z-index: 999;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.main-tutorial-text-hint {
    position: absolute;
    z-index: 999;
    font-family: 'SentinelOffice-Bold';
    color: white;
    text-shadow: gray 1px 0 10px;
    opacity: 1;
    animation: fade-in 2s ease-out;
    font-size: 3vw;
}

@keyframes fade-in {
    0%   { opacity: 0;}
    60%   { opacity: 0; }
    100% { opacity: 1; }
}

.background-blur {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    position: absolute;
    width: 100%;
    height: 100%;
}

.phone-container {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(50px);
    width: 51vw;
    max-width: 100vh;
    height: 25vw;
    position: absolute;
    border: 10px solid white;
    border-radius: 40px;
    position: relative;
}

.circle {
    position: absolute;
    height: 40px;
    width: 40px;
    border: 5px solid white;
    background-color: #bbb;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle > img {
    width: 300px;
    height: 300px;
}

.i-top-left {
    transform: rotate(180deg);
    margin: -225px 230px 0 0;
    animation: move-top-left 2s ease-out;
}

@keyframes move-top-left {
    0%   { margin: -600px 600px 0 0; }
    60%   { margin: -600px 600px 0 0; }
    100% { margin: -225px 230px 0 0; }
    100% { margin: -225px 230px 0 0; }
}

.i-top-right {
    transform: rotate(-90deg);
    margin: -225px -230px 0 0;
    animation: move-top-right 2s ease-out;
}

@keyframes move-top-right {
    0%   { margin: -600px -600px 0 0; }
    50%   { margin: -600px -600px 0 0; }
    90% { margin: -225px -230px 0 0; }
    100% { margin: -225px -230px 0 0; }
}

.i-bottom-left {
    transform: rotate(90deg);
    margin: 225px 230px 0 0;
    animation: move-bottom-left 2s ease-out;
}

@keyframes move-bottom-left {
    0%   { margin: 600px 600px 0 0; }
    40%   { margin: 600px 600px 0 0; }
    80% { margin: 225px 230px 0 0; }
    100% { margin: 225px 230px 0 0; }
}

.i-bottom-right {
    transform: rotate(0deg);
    margin: 225px -230px 0 0;
    animation: move-bottom-right 2s ease-out;
}

@keyframes move-bottom-right {
    0%   { margin: 600px -600px 0 0; }
    30%   { margin: 600px -600px 0 0; }
    70% { margin: 225px -230px 0 0; }
    100% { margin: 225px -230px 0 0; }
}

.c-empty {
    background: transparent;
    animation: fade 1s infinite ease-in, scale-up 1s infinite ease-in;
}

@keyframes scale-up {
    0%   {transform: scale(1.0);}
    80% {transform: scale(2.0);}
    100% {transform: scale(2.0);}
}

@keyframes fade {
    0%   {opacity: 1;}
    65%  {opacity: 1;}
    80% {opacity: 0;}
    100% {opacity: 0;}
}

.c-yellow {
    background-color: #fbea4e;
}

.c-red {
    background-color: #ea3323;
}

.c-blue {
    background-color: #83c2e4;
}

.c-green {
    background-color: #87ba41;
}

.c-top-right {
    top: 10px;
    right: 10px;
}

.c-top-left {
    top: 10px;
    left: 10px;
}

.c-bottom-right {
    bottom: 10px;
    right: 10px;
}

.c-bottom-left {
    bottom: 10px;
    left: 10px;
}

.grid-container-4-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    width: 100%;
    height: 100%;
    gap: 10px;
}

.grid-container-5-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    width: 100%;
    height: 100%;
    gap: 10px;
}

.grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    font-size: 4vw;
}

.game-ui-container {
    z-index: 500;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}


.ui-controller {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-family: Arial, sans-serif;
    width: 125px;
    height: 125px;
}

.top-left {
    top: 0;
    left: 0;
}

.bottom-left {
    bottom: 0;
    left: 0;
}

.top-right {
    top: 0;
    right: 0;
}

.bottom-right {
    bottom: 0;
    right: 0;
}


.ui-score {
    position: absolute;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    font-family: Arial, sans-serif;
    color: white;
}

.player-one {
    background-color: rgb(255, 0, 0);
    left: 125px;
    bottom: 30px;
    border-radius: 20px;
    max-width: 80px;
    max-height: 80px;
    transform: rotate(45deg);
}

.player-two {
    background-color: rgb(111,196,232);
    right: 125px;
    top: 30px;
    border-radius: 20px;
    max-width: 80px;
    max-height: 80px;
    transform: rotate(225deg);
}

.player-three {
    background-color: rgb(255, 233, 0);
    left: 125px;
    top: 30px;
    border-radius: 20px;
    max-width: 80px;
    max-height: 80px;
    transform: rotate(135deg);
}

.player-four {
    background-color: rgb(120,188,32);
    right: 125px;
    bottom: 30px;
    border-radius: 20px;
    max-width: 80px;
    max-height: 80px;
    transform: rotate(315deg);
}

.intro-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.red-line-container {
    position: absolute;
    display: flex;
    width: 38vw;
    height: 100%;
    justify-content: center;
    align-items: center;
    left: 8%;
    background-color: white;
    z-index: 510;
}

.menu-container {
    width: 100%;
    height: 100%;
}

#page-cgv {
    display: none;
}

#cgv-content {
    position: absolute;
    overflow: scroll;
    margin-top: 5vw;
    height: 50%;
}

#cgv-text {
    font-family: 'National2-Medium';
    color: white;
    text-align: center;
    font-size: 1.5vw;
    margin-right: 17vw;
    margin-left: 17vw;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.menu-background,
#loading-background,
.podium-background {
    background: url('./assets/menu/CIEL.jpg');
    background-size: cover;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 0;
}

.podium-background {
    z-index: 600 !important;
}

.menu-midground {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu-midground-img {
    width: 25px;
    height: 100%;
}

.menu-foreground {
    background: url('./assets/menu/FOREGROUND.png') no-repeat;
    background-size: 100% 100%;
    bottom: -53px;
    position: absolute;
    height: 348px;
    width: 100%;
    z-index: 0;
}

#ref {
    width: 100%;
    opacity: 20%;
    position: absolute;
    z-index: 600;
}

.first-line {
    width: 100%;
    height: 34%;
    display: flex;
    position: relative;
}

.first-line.podium {
    position: absolute;
    z-index: 510;
}

.first-line-portrait-1.podium {
    position: absolute;
    z-index: 510;
    width: 100%;
    margin-left: 1vw;
}

.second-line,
.second-line-portrait-1,
.second-line-portrait-2 {
    height: 46%;
    display: flex;
    flex-direction: row;
    padding-right: 5vw;
    padding-left: 5vw;
}

.third-line {
    width: 100%;
    height: 20%;
    position: relative;
}

.logo-bucket-wrapper {
    width: 35%;
    height: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}

.menu-name-wrapper {
    width: 65%;
    height: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 9;
}

.logo-bucket {
    width: 21vw;
    position: absolute;
    bottom: 0;
}

.title-wrapper {
    height: 7vw;
    width: 50vw;
    border-radius: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 3vw;
    position: absolute;
    bottom: 0;
}

.page-title {
    font-family: 'SentinelOffice-Bold';
    font-size: 4.5vw;
    margin: 0;
    color: red;
}

.ui-score-change {
    font-size:12vh;
    position: absolute;
    font-family: 'SentinelOffice-Bold';
    color:white;
}

.button-wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.red-line-left {
    background-color: red;
    width: 9vw;
    height: 100%;
    position: absolute;
    left: 0;
}

.red-line-middle {
    background-color: red;
    width: 9vw;
    height: 100%;
    position: absolute;
}

.red-line-right {
    background-color: red;
    width: 9vw;
    height: 100%;
    right: 0;
    position: absolute;
}

.intro-logo {
    max-width: 44vw;
    z-index: 1;
    position: absolute;
    margin-bottom: 5vw;
    margin-left: 0.8vw;
}

.intro-bucket {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 500;
}

.intro-bucket.podium {
    position: absolute;
}

#bucky-the-bucket {
    bottom: 0;
    width: 100vw;
    position: absolute;
}

.timer-container {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}

.timer {
    width: 12%;
    min-height: 45px;
    color: red;
    background-color: white;
    border-radius: 20px;
    border: 6px solid red;
    height : 6%;
    font-size: 8vw;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.timer-top {
    position: relative;
    transform: rotate(90deg);
    display: none;
    margin: 0 0 0 10px;
}

.timer-bottom {
    position: relative;
    display: none;
    transform: rotate(90deg);
    margin: 0 10px 0 0;
}

.prevent-portrait-mode {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 9999;
    display: none;
    justify-content: center;
	align-items: center;
    color: white;
    text-align: center;
    top: 0;
    left: 0;
}

.hint-game-one {
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:60%;
}

#hint-container {
    position: absolute;
    display: flex;
    align-content: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    align-content: center;
    align-items: center;
}

#tuto {
    width: 51vw;
    max-width: 100vh;
}

.button-text {
    font-family: 'SentinelOffice-Regular';
    color: white;
    font-size: 3.3vw;
    margin: 0;
    text-align: center;
}

.button-text.cgv {
    font-family: 'National2-Medium';
    font-size: 1.7vw;
    margin: 0;
    text-align: center;
    color: red;
}

.button {
    background-color: transparent;
    border: unset;
    width: 14vw;
    padding: 0;
    margin-top: 1vw;
    margin-right: 3vw;
    margin-left: 3vw;
}

.button-img {
    width: 100%;
}

.button-img.inert {
    filter: grayscale(100%);
    opacity: 30%;
}

.button-container {
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
}

.button-cgv,
.button-return {
    width: 9.8vw;
    height: 3.5vw;
    background-color: white;
    border: 0.3vw solid;
    border-color: red;
    border-radius: 1vw;
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: 1.5vw;
    margin-bottom: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.button-cgv {
    width: 15.8vw;    
}

.manche-text {
    font-family: 'SentinelOffice-Regular';
    color: white;
    font-size: 2.8vw;
    margin: 0;
    text-align: end;
    position: absolute;
    top: 3.2vw;
    margin-right: 3vw;
    margin-top: -3vw;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.351)
}

.button-return {
    top: 1.3vw;
    width: 5.8vw;
    height: 5.8vw;
    position: absolute;
    z-index: 10;
}

.return-img {
    width: 3.4vw;
}

#menu-2,
#menu-3 {
    display: none;
}

.second-line-portrait-1 {
    display: none;
}

.second-line-portrait-2 {
    display: none;
}

.first-line-portrait-1 {
    display: none;
}

.first-line-portrait-2 {
    display: none;
}

.hint-container {
    position: relative;
}

.hint-close-button {
    position: absolute;
    width: 30px;
    top: -8px;
    right: -13px;
}

#menu-podium {
    display: none;
    position: fixed;
    z-index: 500;
}

.game-ui-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.game-bg,
.game-bg-rotated,
.game-table,
.game-table-rotated {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 0;
}

#game-2 {
    width: 100%;
    height: 100%;
    display: none;
    pointer-events: none;
}

.game-table,
.game-table-rotated {
    z-index: 1;
}

.game-table-rotated,
.game-bg-rotated {
    display: none;
}


.spider-web-1 {
    position: absolute;
    top: 35%;
    right: 91%;
    width: 10vw;
    z-index: 2;
}

.spider-web-2 {
    position: absolute;
    width: 20vw;
    margin-left: 28vw;
    margin-top: -0.9vw;
    z-index: 2;
}

.spider-web-3 {
    position: absolute;
    top: 70%;
    right: 40%;
    width: 18vw;
    z-index: 2;
    transform: translate(50%, -50%);
}

.tronc,
.tronc-shadow {
    position: absolute;
    top: 50%;
    right: 50%;
    height: 40vh;
    max-width: 40vw;
    max-height: 40vw;
    z-index: 3;
    transform: translate(50%, -50%);
}

.tronc-shadow {
    top: 61%;
    right: 53%;
    z-index: 2;
    height: 45vh;
}

.liane-1,
.liane-2 {
    position: absolute;
    top: 35%;
    right: -3%;
    width: 18vw;
    z-index: 2;
}

.liane-1 {
    right: 84%;
    rotate: 180deg;
}

.stars-1 {
    position: absolute;
    top: -5%;
    right: 33%;
    width: 15vw;
    z-index: 2;
}

.stars-2 {
    position: absolute;
    top: 61%;
    right: 53%;
    width: 15vw;
    z-index: 2;
    rotate: 180deg;
}

#game-1 {
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 400;
    position: relative;
    display: none;
}

.circusTopL {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 400;
    transform: scale(1, -1);
    width: 33vh;
}

.circusTopR {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 400;
    transform: scale(-1, -1);
    width: 33vh;
}

.circusBottomL {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 400;
    width: 33vh;
}

.circusBottomR {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 400;
    transform: scale(-1, 1);
    width: 33vh;
}

.candyTopR {
    position: absolute;
    top: -1px;
    right: 17%;
    z-index: 400;
    transform: scale(1, -1);
    width: 10vh;
}

.candyBottomL {
    position: absolute;
    bottom: 0;
    left: 19%;
    z-index: 400;
    width: 12vh;
}

.candyBottomR {
    position: absolute;
    bottom: 5%;
    right: 20%;
    z-index: 400;
    width: 14vh;
    rotate: 38deg;
}

.pouletBottomR {
    position: absolute;
    bottom: -5%;
    right: 26%;
    z-index: 400;
    width: 20vh;
    transform: scale(-1, 1);
}

.pouletBottomL {
    position: absolute;
    bottom: -4%;
    left: 26%;
    z-index: 400;
    width: 20vh;
}

.poulet2BottomL {
    position: absolute;
    bottom: -4%;
    left: 23%;
    z-index: 400;
    width: 16vh;
}

.pouletTopR {
    position: absolute;
    top: -5%;
    right: 26%;
    z-index: 400;
    width: 20vh;
    transform: scale(-1, -1);
}

.pouletTopL {
    position: absolute;
    top: -4%;
    left: 26%;
    z-index: 400;
    width: 20vh;
    transform: scale(1, -1);
}

.poulet2TopL {
    position: absolute;
    top: -4%;
    left: 23%;
    z-index: 400;
    width: 16vh;
    transform: scale(1, -1);
}

#the-podium {
    bottom: 0;
    width: 100%;
    position: absolute;
    margin-left: 4vw;
    opacity: 90%;
}

#podium-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

#podium-container{
    position: absolute;
    width: 88%;
    height: 70%;
    bottom: 6vw;
}

.podium-element,
.player-element {
    position: absolute;
    bottom: 0;
    transform: translate(-50%);
}

.podium-element#place-1 {
    left: 67%;
    width: 45%;
}

.podium-element#place-2 {
    left: 96%;
    width: 31%;
    bottom: 2vw;
}

.podium-element#place-3 {
    left: 38%;
    width: 31%;
    bottom: 2vw;
}

.podium-element#place-4 {
    left: 16%;
    width: 26%;
    bottom: 3vw;
}

.player-element#player-1 {
    left: 65%;
    width: 40%;
    bottom: 15.7vw;
}

.player-element#player-2 {
    left: 95%;
    width: 23%;
    bottom: 12.8vw;
}

.player-element#player-3 {
    left: 38%;
    width: 23%;
    bottom: 12.8vw;
}

.player-element#player-4 {
    left: 16%;
    width: 18%;
    bottom: 9.1vw;
}

.ground-container {
    position:relative;
    width: 100%;
    height: 100%;
}

.podium-ground {
    position: absolute;
    width: 100%;
    bottom: -97vw;
}

a-scene {
    z-index: 100;
}

.winner-crown {
    display: none;
    transform: rotate(45deg);
    max-height: 130px;
    pointer-events: none;
    position: fixed;
}

#crownGreen {
    transform: rotate(315deg);
    margin-bottom: 86px;
    margin-right: 89px;
}

#crownBlue {
    transform: rotate(-135deg);
    margin-bottom: -86px;
    margin-right: 89px;
}

#crownRed {
    transform: rotate(45deg);
    margin-bottom: 86px;
    margin-right: -89px;
}

#crownYellow {
    transform: rotate(135deg);
    margin-bottom: -86px;
    margin-right: -89px;
}

@media (min-aspect-ratio: 373/142) {
    .logo-bucket {
        width: 17vw;
      }

      .title-wrapper {
        bottom: unset;
      }

      .menu-name-wrapper {
        align-items: center;
      }

      .button {
        width: 11vw;
      }

      .button-text {
        font-size: 1.9vw;
      }

      .title-wrapper {
        height: 5.5vw;
        width: 40vw;
      }

      .page-title {
        font-size: 3.7vw;
      }
}

@media (max-aspect-ratio: 4/3) {
    .second-line {
        display: none;
    }

    .second-line-portrait-1 {
        display: flex;
        height: 25%;
    }

    .second-line-portrait-2 {
        display: flex;
        height: 25%;
    }

    .button-text {
        font-size: 6.3vw;
    }

    .button {
        width: 33vw;
        max-width: 135px;
    }

    .button-cgv {
        width: 25vw;
        height: 5.5vw;
    }
    
    .button-return {
        width: 8vw;
        height: 8vw;
    }

    .return-img {
        width: 4.7vw;
    }

    .button-text.cgv {
        font-size: 2.9vw;
    }

    .first-line {
        display: none;
    }

    .first-line-portrait-1 {
        display: flex;
        height: 22%;
        justify-content: center;
    }

    .menu-name-wrapper {
        align-items: center;
        width: 100%;
        height: 65%;
    }
    
    .first-line-portrait-2 {
        display: flex;
        height: 17%;
        justify-content: center;
        flex-direction: column;
    }

    .logo-bucket {
        width: 38vw;
    }

    .manche-text {
        font-family: 'SentinelOffice-Regular';
        color: white;
        font-size: 5.8vw;
        margin: 0;
        z-index: 9;
        text-align: center;
        position: unset;
      }

    .title-wrapper {
        bottom: unset;
        margin-right: unset;
    }

    .third-line {
        height: 10%;
    }

    #cgv-text {
        font-size: 4vw;
    }

    .spider-web-1 {
        top: -2%;
        right: 34%;
        width: 30vw;
        rotate: 90deg;
      }

    .spider-web-2 {
        rotate: 90deg;
        margin-left: 81vw;
        margin-top: 32.1vh;
    }
    
    .game-table,
    .game-bg {
        display: none;
    }

    .game-table-rotated,
    .game-bg-rotated {
        display: block;
    }

    .stars-1 {
        rotate: 90deg;
        top: 45%;
        right: 4%;
        width: 35vw;
    }

    .stars-2 {
        right: 77%;
        width: 23vw;
        rotate: 270deg;
    }

    .liane-1 {
        right: 27%;
        rotate: 270deg;
        position: absolute;
        top: -2%;
        width: 42vw;
    }

    .liane-2 {
        right: 27%;
        rotate: 90deg;
        position: absolute;
        top: unset;
        width: 42vw;
        bottom: -2%;
    }

    .circusTopL {
        width: 16vh;
    }
    
    .circusTopR {
        width: 16vh;
    }
    
    .circusBottomL {
        width: 16vh;
    }
    
    .circusBottomR {
        width: 16vh;
    }

    .candyTopR {
        top: 537px;
        right: 0%;
        width: 5vh;
        rotate: 45deg;
    }
    
    .candyBottomL {
        position: absolute;
        bottom: 56%;
        left: 4%;
        z-index: 400;
        width: 5vh;
        rotate: 70deg;
    }
    
    .candyBottomR {
        bottom: 27%;
        right: 80%;
        width: 7vh;
        rotate: 137deg;
    }

    .pouletBottomR {
        bottom: 16%;
        left: 0;
        right: unset;
        width: 10vh;
        rotate: 90deg;
    }
    
    .pouletBottomL {
        bottom: 61%;
        left: 0;
        right: unset;
        width: 10vh;
        rotate: 90deg;
    }
    
    .poulet2BottomL {
        bottom: 66%;
        left: 0;
        right: unset;
        width: 8vh;
        rotate: 90deg;
    }
    
    .pouletTopR {
        bottom: 16%;
        right:0;
        left: unset;
        width: 10vh;
        rotate: 90deg;
        top: unset;
    }
    
    .pouletTopL {
        bottom: 59%;
        right:0;
        left: unset;
        width: 10vh;
        rotate: 90deg;
        top: unset;
    }
    
    .poulet2TopL {
        bottom: 63%;
        right:0;
        left: unset;
        width: 7vh;
        rotate: 90deg;
        top: unset;
    }
}

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
    .intro-container {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
    }

    #application-container {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 10;
    }

    .red-line-container {
        left: unset;
    }

    .space-intro, .intro-bucket {
        display: none;
    }

    .intro-bucket.podium {
        display: unset;
    }

    .player-four, .player-two {
        right: 105px;
    }

    .player-one, .player-three {
        left: 105px;
    }

    #hint-container {
        rotate: 90deg;
    }

    .winner-crown {
        max-width: 100px;
        max-height: 100px;
    }

    #crownGreen {
        margin-bottom: 70px;
        margin-right: 70px;
    }
    
    #crownBlue {
        margin-bottom: -70px;
        margin-right: 70px; 
    }
    
    #crownRed {
        margin-bottom: 70px;
        margin-right: -70px;
    }
    
    #crownYellow {
        margin-bottom: -70px;
        margin-right: -70px;
    }

    #main-tutorial {
        transform: rotate(90deg);
    }

    .main-tutorial-text-hint {
        font-size: 4vw;
    }

    .phone-container {
        width: 78vw;
        height: 50vw;
    }

    .background-blur {
        transform: rotate(-90deg);
    }
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */

    .logo-bucket {
        width: 17vw;
    }

    .menu-name-wrapper {
        align-items: center;
    }

    .button {
        width: 11vw;
    }

    .button-text {
        font-size: 1.9vw;
    }

    .title-wrapper {
        bottom: 2vw;
        height: 5.5vw;
        width: 45vw;
    }

    .page-title {
        font-size: 3.7vw;
    }

    .timer-container {
        justify-content: center;
        align-items: self-end;
    }

    .timer {
        height: 10%;
        width: 7%;
        font-size: 4vw;
    }

    .timer-top {
        position: absolute;
        transform: rotate(0deg);
        margin: 5px 0 0 0;
        align-self: start;
    }

    .timer-bottom {
        transform: rotate(0deg);
        margin: 0 0 5px 0;
    }
}

/* Media querry is an a mobile phone */
@media only screen and (max-width: 768px) {
    /* Styles for devices that have a maximum width of 768px */
    #tapGreen, #tapBlue, #tapRed, #tapYellow  {
        width: 75px;
        height: 75px;
    }
 }
 

 @media screen and (max-width: 768px) and (orientation:portrait) {

    .podium-ground {
        bottom: -103vw;
        height: 77vh;
        min-height: 171vw;
    }

    #podium-container {
        bottom: 59vw;
      }

    #tuto {
        width: 94vw;
    }

    .ui-controller {
        width: 80px;
        height: 80px;
    }

    .player-one, .player-three {
        left: 85px;
    }

    .player-two, .player-four {
        right: 85px;
    }

    .player-two, .player-three, .player-one, .player-four {
        border-radius: 15px;
        max-width: 40px;
        max-height: 40px;
    }

    .player-one {
        bottom: 10px;
    }

    .player-two {
        top: 10px;
    }

    .player-three {
        top: 10px;
    }

    .player-four {
        bottom: 10px;
    }


    .ui-score {
        font-size: 15px;
    }

    .menu-midground-hide-on-mobile {
        display: none;
    }

    .menu-midground {
        left: 50%;
        transform: translate(-50%, 0);
        width: 75%;
    }

    .title-wrapper {
        height: 12vw;
        width: 75vw;
    }

    .page-title {
        font-size: 6.25vw;
    }
 }

 @media (max-height: 650px) and (orientation:landscape) {
    #bucky-the-bucket {
        bottom: -7vw;
      }

    .intro-logo {
        max-width: 33vw;
        margin-bottom: 0vw;
    }

    #podium-container {
        bottom: 1vw;
      }

    .podium-ground {
        bottom: -101vw;
    }
 }

 @keyframes pulse {
    0%   {transform: scale(0.85)}
    50%  {transform: scale(1.0) }
    100% {transform: scale(0.85)}
}

@keyframes pulse45 {
    0%   {transform: scale(0.85) rotate(45deg);}
    50%  {transform: scale(1.0)  rotate(45deg);}
    100% {transform: scale(0.85) rotate(45deg);}
}
 
@keyframes pulse90 {
    0%   {transform: scale(0.85) rotate(90deg);}
    50%  {transform: scale(1.0)  rotate(90deg);}
    100% {transform: scale(0.85) rotate(90deg);}
}

@keyframes pulse135 {
    0%   {transform: scale(0.85) rotate(135deg);}
    50%  {transform: scale(1.0)  rotate(135deg);}
    100% {transform: scale(0.85) rotate(135deg);}
}

@keyframes pulse180 {
    0%   {transform: scale(0.85) rotate(180deg);}
    50%  {transform: scale(1.0)  rotate(180deg);}
    100% {transform: scale(0.85) rotate(180deg);}
}

@keyframes pulse225 {
    0%   {transform: scale(0.85) rotate(225deg);}
    50%  {transform: scale(1.0)  rotate(225deg);}
    100% {transform: scale(0.85) rotate(225deg);}
}

@keyframes pulse270 {
    0%   {transform: scale(0.85) rotate(270deg);}
    50%  {transform: scale(1.0)  rotate(270deg);}
    100% {transform: scale(0.85) rotate(270deg);}
}

@keyframes pulse315 {
    0%   {transform: scale(0.85) rotate(315deg);}
    50%  {transform: scale(1.0)  rotate(315deg);}
    100% {transform: scale(0.85) rotate(315deg);}
}