* {
    text-align: center;
    color: white;
    font-family: 'Raleway', sans-serif;
    font-size: 30px;
    margin: 0 auto;
}

body {
    background-color: #0c0c0c;
}

body:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    background: linear-gradient(0deg, #e91e63, #ffc107);
    background-size: 400% 400%;
    clip-path: circle(30% at 88% 77%);

    -webkit-animation: AnimationName 14s ease infinite;
    -moz-animation: AnimationName 14s ease infinite;
    -o-animation: AnimationName 14s ease infinite;
    animation: AnimationName 14s ease infinite;
}

.container:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    background: linear-gradient(0deg, #419ae2, #71f55c);
    background-size: 400% 400%;
    clip-path: circle(20% at 15% 15%);

    -webkit-animation: AnimationName 14s ease infinite;
    -moz-animation: AnimationName 14s ease infinite;
    -o-animation: AnimationName 14s ease infinite;
    animation: AnimationName 14s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
@-o-keyframes AnimationName {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
@keyframes AnimationName {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}

header {
    margin-top: 1vh;
    padding: 1vw;
    display: inline-block;
    width: auto;
    backdrop-filter: blur(12px) saturate(182%);
    -webkit-backdrop-filter: blur(12px) saturate(182%);
    background-color: rgba(255, 255, 255, 0.61);
    border-radius: 12px;
    border: 1px solid rgba(209, 213, 219, 0.3);
}

.title-3d {
    font-size: 8vw;
    font-family: Arial Black, Gadget, sans-serif;
    color: white;
}

main {
    backdrop-filter: blur(16px) saturate(176%);
    -webkit-backdrop-filter: blur(16px) saturate(176%);
    background-color: rgb(11 11 20 / 54%);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.125);
    width: 50vw;
}

.menu {
    margin-top: 2%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    position: relative;
}

.button-3d {
    margin-bottom: 5vh;
    text-align: center;
}

button {
    width: 20vw;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    margin: 1vh;
    height: 10vh;
    text-align:center;
    border: none;
    background-size: 300% 100%;
    border-radius: 50px;
    height: 80px;

    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

button:hover {
    background-position: 100% 0;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

button:focus {
    outline: none;
}

button.play {
    background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
    box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
}

button.howto {
    background-image: linear-gradient(to right, #ed6ea0, #ec8c69, #f7186a , #FBB03B);
box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}

button.help {
    background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);
    box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);
}

button.credits {
    background-image: linear-gradient(to right, #667eea, #764ba2, #6B8DD6, #8E37D7);
    box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
}

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

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

.show_back {
    animation: show_back 0.2s forwards ease-in-out;
}

.hide_back {
    animation: hide_back 0.2s forwards ease-in-out;
}

@keyframes hide{
    0% { transform: translate(0);}
    20% { transform: translate(5px);}
    100% { transform: translate(-120vw);}
}

@keyframes show {
    0% { transform: translate(-120vw);}
    80% { transform: translate(-5px);}
    100% { transform: translate(0vw);}
}

.hide {
    animation: hide 0.5s forwards ease-in-out;
    animation-delay: .2s;
}

.show {
    animation: show 0.5s forwards ease-in-out;
}

@media all and (orientation: portrait) {
    * {
        text-align: center;
    }
    header {
        display: block;
    }
    .title-3d {
        font-size: 17vw;
    }

    #subtitle {
        font-size: 5vw;
    }

    main {
        margin: 0 auto;
        margin-top: 10%;
        width: 90vw;
        z-index: 999999;
    }
    .menu {
        margin-top: 8vh;
    }
    .button-3d {
        margin-bottom: 1vh;
    }
    button {
        width: 50vw;
        min-width: 180px;
    }
}