* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
}

@font-face {
    font-family: Pixel;
    src: url(../fonts/retro_computer_personal_use.ttf);
}

@font-face {
    font-family: Pixel;
    src: url(../fonts/upheavtt.ttf);
    font-weight: bold;
}

#start{
    background-image: url(https://i.pinimg.com/originals/79/ae/f1/79aef1d05dd07f49e8c8db6b1c50215f.gif);
    background-color: black;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgb(92, 92, 92);
    background-blend-mode: multiply;
}

#inst{
    background-image: url(../images/wallp.jpg);
    background-color: black;
}

#contenedor{
    font-family: Pixel;
    text-align: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0), #ffffff9c, #ffffff9c, #ffffff9c, rgba(0, 0, 0, 0));
    padding: 0 25%;
}

#load{
    background-image: url(https://miro.medium.com/max/1400/1*9NWkAN6Es2PnS0_kb6tK2w.gif);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgb(92, 92, 92);
    background-blend-mode: multiply;
}

#title{
    margin-top: 20%;
    font-size: 7em;
    padding-top: 5%;
    color:white;
}

h2{
    margin-top: 5%;
    font-weight: lighter;
    transition-property: transform;
    transition-duration: .3s;
}

h2 a{
    background-color: #D00000; 
    padding: 2% 5%;
    width: 100%;
    border-radius: 5em;
}

a{
    color: white;
    text-decoration: none;
    cursor: pointer;
    transition-property: box-shadow, background-color;
    transition-duration: .3s;
}

a:hover{
    background-color: rgb(230, 56, 56);
}

h2:active{
    transform: scale(.95);
}

a:active {
    color: white;
    box-shadow: rgba(0, 0, 0, 0.5) 0 3px 15px -2px;
}

#reglas{
    font-family: Pixel;
    background-image: linear-gradient(#28a3de, rgba(255, 255, 255, 0));
    color: white;
    padding: 3% 6% 0 6%;
}

#reglas h1{
    font-size: 2.5em;
}

#reglas h2{
    text-align: center;
    width: fit-content;
    margin-left: 38%;
    font-size: 2.75em;
}

#reglas h2 a {
    padding: 10% 20%;
}

ul{
    display: inline-block;
    width: 70%;
}

ul li{
    margin-top: 1.5%;
}

figure{
    display: inline-block;
    text-align: left;
    padding-left: 5%;
    width: 20%;
}

figure img{
    cursor: pointer;
    transition-property: scale;
    transition-duration: .3s;
    border-radius: 0.5em;
    width: 150%;
}

figure img:hover{
    scale: 0.95;
}

figcaption{
    font-size: larger;
}

.swal-title, .swal-footer{
    display: none;
}

.swal-modal{
    background-color: rgba(0, 0, 0, 0);
}

.swal-content{
    margin: 0;
    padding: 0;
    text-align: center;
}

.swal-content img{
    width: 100%;
    scale: 1.9;
    border-radius: 1em;
}

#play{
    font-size: xx-large;
}

#carga{
    text-align: center;
    font-family: Pixel;
}

#carga h1{
    font-size: 6em;
    color: white;
}

#carga img{
    mix-blend-mode: screen;
    width: 40%;
}

#carga p{
    color: rgba(255, 255, 255, 0.685);
}

footer{
    color: rgba(255, 255, 255, 0.534);
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 1% 0;
    text-align: center;
    font-family: Pixel;
}

footer b{
    font-size: larger;
}

footer sup{
    font-size: x-small;
}

footer img{
    vertical-align:middle;
    width: 8em;
    border-radius: 15%;
}

#data{
    text-align: justify;
    font-size: medium;
    padding-left: 3%;
}

#datos{
    text-align: justify;
    display: inline-block;
    vertical-align: middle;
    margin-left: 2%;
}

#inbet{
    font-family: Pixel;
    background-image: linear-gradient(#28a3de, rgba(255, 255, 255, 0));
    color: white;
    padding: 3% 6% 0 6%;
}

#inbet h2{
    text-align: center;
    width:42%;
    margin-left: 27%;
}

#inbet h2 a {
    padding: 5% 10%;
}

#finish{
    background-image: url(https://cutewallpaper.org/27/celestial-aesthetic-wallpaper-gif/assassins-can-fly-—-purple-dreaming-✨-gifs-made-by-me-.gif);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgb(92, 92, 92);
    background-blend-mode: multiply;
}

#gameover{
    text-align: center;
    font-family: Pixel;
    background-image: linear-gradient(to right, rgb(0, 0, 0, 0), rgb(0, 0, 0, 0),#256eff, #256eff, #256eff, #256eff, rgb(0, 0, 0, 0), rgb(0, 0, 0, 0));
}

#gameover h1{
    font-size: 10em;
    margin-top: 10%;
}

#gameover p{
    font-size: larger;
}

#gameover i{
    text-decoration: none;
    color: #e22929;
    text-shadow: 1.5px 2px 1.5px rgba(0, 0, 0, 0.596);
}

mark{
    background-color: rgba(255, 0, 0, 0);
    color: #26c580;
    text-shadow: 1.5px 2px 1.5px rgba(0, 0, 0, 0.596);
}

#gameset{
    color: white;
}

#pixwin{
    margin: -120% 0 0 35%; 
    scale: 0.5;
}