@font-face {
    font-family: 'Iceland';
    font-style: normal;
    font-weight: 400;
    src: local('Iceland'), local('Iceland-Regular'), url(http://themes.googleusercontent.com/static/fonts/iceland/v3/F6LYTZLHrG9BNYXRjU7RSw.woff) format('woff');
  }

body {
    display: flex;
    align-items: center;
    align-content: center;
    flex-flow: column;
    background-color: rgba(226, 189, 67, 0.918);
}

main {
    background-image: url("../imagenes/background.jpeg");
    width: 50%;
    height: 800px;
    border-radius: 20px;
    box-shadow: 0 0 20px black;
    display: grid;
    grid-template-columns: 85% 15%;
}

.filaRellenar{
    margin-bottom: 100px;
}

#izquierda {
    overflow: auto;
    display: flex;
    flex-direction: column-reverse;
}

#derecha {
    display: flex;
    align-items: center;
    flex-flow: column;
    justify-content: center;
}

.circulo {
    border-radius: 50%;
    height: 50px;
    width: 50px;
    box-shadow: 0 0 20px black;
    cursor: pointer;
}

#red {
    background-color: red;
}

#white {
    background-color: white;
    margin-top: 25px;
}

#black {
    background-color: black;
    margin-top: 25px;
}

#yellow {
    background-color: yellow;
    margin-top: 25px;
}

#orange {
    background-color: orange;
    margin-top: 25px;
}

#brown {
    background-color: brown;
    margin-top: 25px;
}

#blue {
    background-color: blue;
    margin-top: 25px;
}

#green {
    background-color: green;
    margin-top: 25px;
}

#check {
    height: 50px;
    width: 50px;
    margin-top: 25px;
}

#check:hover {
    cursor: pointer;
}

#circulosRellenar, #circulosComprobar {
    display: inline-block;
}

.circuloRellenar {
    border-radius: 50%;
    height: 50px;
    width: 50px;
    box-shadow: 0 0 20px black;
    display: inline-block;
    margin: 20px;
    cursor: pointer;
}

.circuloComprobar {
    border-radius: 50%;
    height: 20px;
    width: 20px;
    box-shadow: 0 0 20px black;
    display: inline-block;
    margin: 20px;
}

#pantallaFin h2 {
    *font-size: 5em;
    *color: #228DFF;
    *font-family: Iceland;
    *animation: neon2 1.5s ease-in-out infinite alternate;
}

@keyframes neon2 {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
    }
    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
    }
}


#pantallaFin a {
    *text-decoration: none;
    *color: black;
    *font-weight: bold;
    *background-color: white;
    *border-radius: 10px;
    *padding: 20px;
    *margin: 20px;
    *transition: all 0.7s ease;
}

#pantallaFin a:hover, #jugar:hover {
    background-color: rgb(240, 168, 73);
    
}

#contenidoPrincipal {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#jugar {
    text-decoration: none;
    color: black;
    font-weight: bold;
    font-size: 50px;
    background-color: whitesmoke;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 20px black;
    transition: all 0.7s ease;
}