body {
    width:100vw;
    height:100vh;
    overflow:hidden;
    margin:0;
    display:flex;
    justify-content: center;
    align-items: center;
    
}

/* Clases */

.ratio-16-9 {
    display: block;
    width: 100%!important;
    height: calc(100vw*9/16)!important;
}

.flex-center {
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.menuItem {
    font-family: monospace;
    font-size: 5vmin;
    color: white;
    text-shadow: 0 0 6vmin white,
    0 0 1vmin rgba(255,255,255,0.7);
    padding-bottom:0;
    margin: 2vmin 0;
    cursor: default;
    user-select: none;
}

.menuItem.selected {
    margin: 2vmin -1.1em;
}

.menuText {
    font-family: monospace;
    font-size: 3vmin;
    color: white;
    text-shadow: 0 0 4vmin white,
    0 0 0.6vmin rgba(255,255,255,0.7);
    padding-bottom:2vmin;
    margin: 0.3vmin 0;
    cursor: default;
    user-select: none;
}

.blueText {
    color: rgb(127, 146, 255);
    text-shadow: 0 0 4vmin rgb(127, 146, 255),
    0 0 0.6vmin rgba(127, 146, 255,0.7);
}

.redText {
    color: rgb(255, 127, 127);
    text-shadow: 0 0 4vmin rgb(255, 127, 127),
    0 0 0.6vmin rgba(255, 127, 127,0.7);
}

.menuSquare {
    width:22vmin;
    height:22vmin;
    margin:1vmin;
    opacity:0.5;
}

.teamSquare {
    width:47vmin;
    height:22vmin;
    margin:1vmin;
}

.controlsBoxTitle {
    font-size: 3.8vmin;
    margin-bottom: 2.5vmin;
}

.menuItem.selected::after, .controlsBoxKey.selected::after {
    content: " <";
}
.menuItem.selected::before, .controlsBoxKey.selected::before {
    content: "> ";
}

.controlsBox {
    width: 40vmin;
    height: 70vmin;
    margin:2vmin;
}

.whiteBox {
    border: 0.5vmin solid white;
    box-shadow: 0 0 1.5vmin rgba(255, 255, 255, 0.7),
    inset 0 0 1.5vmin rgba(255,255,255,0.7);
}

.blueBox {
    border: 0.5vmin solid rgb(127, 146, 255);
    box-shadow: 0 0 1.5vmin rgba(127, 146, 255, 0.7),
    inset 0 0 1.5vmin rgba(127, 146, 255, 0.7);
}

.redBox {
    border: 0.5vmin solid rgb(255, 127, 127);
    box-shadow: 0 0 1.5vmin rgba(255, 127, 127, 0.7),
    inset 0 0 1.5vmin rgba(255, 127, 127, 0.7);
}

.shipBlue.selected, .weaponBlue.selected {
    opacity:1!important;
    border: 0.5vmin solid rgb(127, 146, 255);
    box-shadow: 0 0 1.5vmin rgba(127, 146, 255, 0.7),
    inset 0 0 1.5vmin rgba(127, 146, 255, 0.7);
}

.shipRed.selected, .weaponRed.selected {
    opacity:1!important;
    border: 0.5vmin solid rgb(255, 127, 127);
    box-shadow: 0 0 1.5vmin rgba(255, 127, 127, 0.7),
    inset 0 0 1.5vmin rgba(255, 127, 127, 0.7);
}

.background-container{
	position: fixed;
	top: 0;
	left:0;
	bottom: 0;
    right: 0;
}

.stars, .twinkling, .gradient {
    position:absolute;
	display:block;
	top:0; bottom:0;
	left:0; right:0;
}

.gradient {
    transition: opacity 7s;
    z-index: 3;
}

.twinkling{
	background:transparent url('../img/twinkling.png') repeat top center;
	animation: move-twink-back 600s linear infinite;
	z-index: 1;
}

.row {
    flex-direction:row;
}

.space-between {
    width:87vmin;
    justify-content:space-between;
}

.p-0 {
    padding:0!important;
}

.mb-0 {
    margin-bottom: 0!important;
}

.w-100 {
    width:100%!important;
}

.opacity-1 {
    opacity:1!important;
}

.opacity-03 {
    opacity:0.3;
}

.display-none{
    display:none!important;
}

.weaponBlue .weapon {
    background-color:white;
    box-shadow: 0 0 2.5vmin 0.5vmin rgba(127, 146, 255, 0.8),
    0 0 0.5vmin 0.2vmin rgb(127, 146, 255),
    inset 0 0 0.5vmin 0.3vmin rgb(127, 146, 255);
}

.weaponRed .weapon {
    background-color:white;
    box-shadow: 0 0 2.5vmin 0.5vmin rgba(255, 131, 127, 0.8),
    0 0 0.5vmin 0.2vmin rgb(255, 131, 127),
    inset 0 0 0.5vmin 0.3vmin rgb(255, 131, 127);
}

.weapon {
    transform: rotate(45deg);
}

.weapon1 {
    width:4%;
    height:60%;
    border-radius: 50em;
}

.weaponBlue .weapon2, .weaponRed .weapon2 {
    background:none;
    box-shadow:none;
}

.weaponBlue .weapon2 > div {
    width:2%;
    height:35%;
    margin:0 15%;
    background-color: white;
    box-shadow: 0 0 2.5vmin 0.5vmin rgba(127, 146, 255, 0.8),
    0 0 0.5vmin 0.2vmin rgb(127, 146, 255),
    inset 0 0 0.2vmin 0.15vmin rgb(127, 146, 255);
}

.weaponRed .weapon2 > div {
    width:2%;
    height:35%;
    margin:0 15%;
    background-color: white;
    box-shadow: 0 0 2.5vmin 0.5vmin rgba(255, 131, 127, 0.8),
    0 0 0.5vmin 0.2vmin rgb(255, 131, 127),
    inset 0 0 0.2vmin 0.15vmin rgb(255, 131, 127);
}

.weapon2 {
    width:100%;
    height:100%;
    display:flex;
    justify-content: center;
    align-items: center;
}

.weapon3 {
    width:8%;
    height:50%;
    border-radius: 50em;
}

.stats {
    flex-wrap: wrap;
    position:relative;
}

.stats .row:last-child {
    margin-bottom: 1vmin;
}

.statTitle {
    width:100%;
    text-align: center;
    padding-bottom:1vmin;
}

.statText {
    font-size: 2.5vmin;
    width:18%;
    padding-bottom:0.5vmin;
    text-align: right;
}

.statBarMax {
    width:50%;
    height:20%;
    margin-left:8%;
    padding-bottom:0.5vmin;
}

.statBar {
    width:70%;
    height: 100%;
    border-radius:1.5px;
}

.statBarR {
    background: rgb(255, 80, 80);
    box-shadow: 0 0 1vmin 0.1vmin rgba(255, 127, 127, 0.7);
}

.statBarG {
    background: rgb(80, 255, 109);
    box-shadow: 0 0 1vmin 0.1vmin rgba(127, 255, 138, 0.7);
}

.statBarB {
    background: rgb(80, 106, 255);
    box-shadow: 0 0 1vmin 0.1vmin rgba(127, 157, 255, 0.7);
}

.teamShipContainer {
    width:30%;
    height:100%;
    transform: rotate(25deg);
}

.teamWeapon {
    width: 100%;
    height: 50%;
    margin-bottom: -30%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.teamWeapon .weapon {
    transform:none;
}

.teamShip {
    width: 100%;
    height: 75%;
}

.not-selected {
    filter: contrast(0%) drop-shadow(0 0 0.5vmin rgb(190, 190, 190));
    opacity: 0.13;
}

.spaceship1.shipBlue {
    background-image: url(../img/ship1-b.svg);
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
}

.spaceship2.shipBlue {
    background-image: url(../img/ship2-b.svg);
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
}

.spaceship3.shipBlue {
    background-image: url(../img/ship3-b.svg);
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
}

.spaceship1.shipRed {
    background-image: url(../img/ship1-r.svg);
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
}

.spaceship2.shipRed {
    background-image: url(../img/ship2-r.svg);
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
}

.spaceship3.shipRed {
    background-image: url(../img/ship3-r.svg);
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
}

.noTransform {
    transform: translateY(0)!important;
}

.moveUp {
    transform:translateY(-4320px);
}

.moveDown {
    transform:translateY(4320px);
}

.bgDown {
    background-position-y: 4320px!important;
}

.display-block {
    display:block!important;
}

.titleCard {
    opacity:0;
    transition: opacity 1s;
}

.theYear {
    font-size: 4vmin;
    margin-bottom:5vmin;
}

.mb-8 {
    margin-bottom:15vmin;
}

.mapOption {
    position:relative;
    width: 48vmin;
    height: 27vmin;
    margin:1vmin;
    opacity:0.3;
}

.mapOption.selected {
    opacity:1;
}

.mapTitle {
    text-align: center;
    position: absolute;
    top:0.5vmin;
    left:1.5vmin;
}

.mapCanvas {
    width:100%;
    border: 0.2vmin solid rgb(255, 253, 118);
    box-shadow: 0 0 0.2vmin 0.2vmin rgba(255, 254, 185, 0.7),
    inset 0 0 0.2vmin 0.2vmin rgba(255, 254, 185,0.7),
    0 0 1.5vmin 0.2vmin rgba(255, 255, 255, 0.8),
    inset 0 0 1.5vmin 0.2vmin rgba(255,255,255,0.8);
}

/* IDs */

#gameCanvas {
    display:none;
    position:absolute;
    margin: auto;
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    z-index: 10;
    transition:transform 4s ease;
    border: 0.2vmin solid rgb(255, 253, 118);
    box-shadow: 0 0 0.2vmin 0.2vmin rgba(255, 254, 185, 0.7),
    inset 0 0 0.2vmin 0.2vmin rgba(255, 254, 185,0.7),
    0 0 1.5vmin 0.2vmin rgba(255, 255, 255, 0.8),
    inset 0 0 1.5vmin 0.2vmin rgba(255,255,255,0.8);
}

#gameScreen {
    z-index: 11;
    transition:transform 4s ease;
}

#mainMenu {
    width:100%;
}

#controlsMenu {
    width:100%;
}

#PVPMenu {
    width:100%;
}

#gradients2 {
    background: linear-gradient(162deg, rgba(216, 54, 60, 0.12), rgba(39, 22, 156, 0.26), rgba(253, 175, 222, 0.08), rgba(85, 17, 164, 0.173), rgba(93, 112, 80, 0.15));
}

#gradients1 {
    opacity:0;
}

#comet {
    position: absolute;
    top: 20%;
    left: 40%;
    width: 8vmin;
    height: 0.4vmin;
    background: white;
    z-index: 2;
    transform: rotate(20deg);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    border-radius: 1vmin;
    opacity:0;
}

#comet.animate {
    animation: comet-appear 0.6s linear;
}

#stars {
    background: url('../img/stars.png') repeat;
    z-index: 0;
    transition:background-position 4s ease;
}

#title {
    font-size: 8vmin;
    color: rgb(255, 255, 215);
    text-shadow: 0 0 4vmin  rgba(255, 255, 120, 0.5),
    0 0 0.2vmin  rgb(255, 255, 0),
    0 0 8vmin rgb(255, 255, 120),
    0 0 1.5vmin rgba(255, 255, 120, 0.7);
    padding-bottom: 10vmin;
    margin-top:-3vmin;
}

#FBLogo {
    width:30vmin;
    margin-bottom:5vmin;
}

#GEEKSLogo {
    filter:drop-shadow(0 0 0.3vmin rgba(255,255,255,0.3)) drop-shadow(0 0 3vmin rgba(255,255,255,0.5));
    width:50vmin;
    margin-bottom:5vmin;
}

#introMenu {
    position:absolute;
    width:100vw;
    height:100vh;
}

#skipIntro {
    position:absolute;
    bottom:0;
    right:1.7em;
    font-size:4vmin;
}

#intro {
    position:absolute;
    top:100vh;
    width:100vmin;
    transform: translateY(0);
    transition:transform 80s linear;
}

#intro.scroll {
    transform: translateY(-315vmin);
}

#muskImg {
    width: 50vmin;
    image-rendering: pixelated;
}

#weaponX2 {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 2vmin;
    padding: 0.6vmin 0.7vmin;
}

#mapContainer {
    width: 100vmin;
    flex-wrap: wrap;
}

/* Media */

@media (min-aspect-ratio:16/9) {
    .ratio-16-9 {
        padding-top:0;
        height: 100%!important;
        width: calc(100vh*16/9)!important;
    }
}

/* Background animation */

@keyframes move-twink-back {
	from {background-position:0 0;}
	to {background-position:-10000px 5000px;}
}

@keyframes comet-appear {
	0% {opacity:0;}
    50% {opacity:1; transform:translate(250px,91px) rotate(20deg);}
    100% {opacity:0; transform:translate(500px,182px) rotate(20deg);}
}