@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');

body {
    margin: 0;
    background: #141525;
    font-family: 'Bungee', cursive;
}
header{
    /* border:solid red; */
    margin: 0;
    font-size: 2.5rem;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* border:solid red 1px; */
    position: fixed;
    z-index: 1;
    border-bottom-style: solid;
    border-bottom-color: rgba(0, 0, 0, 0.098);
    border-bottom-width: 1px;
    color:white;
}
footer{
    /* border:solid red; */
    margin: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    /* border:solid red 1px; */
    font-size: 2rem;
    position: fixed;
    bottom: 0px;
    z-index: 1;
    border-bottom-style: solid;
    border-bottom-color: rgba(0, 0, 0, 0.098);
    border-bottom-width: 1px;
    color:rgba(255, 255, 255, 0.459);
    font-weight: 300;
}
header i{
    display: inline-block;
}
section{
    /* border:solid blue; */


    padding: 5px 5px;
    display: grid;
    grid-template-columns: minmax(235px,400px);
    justify-content: center;
    align-items: center;
    justify-items: center;
    /* grid-gap: 28px; */
}
.gameboard{
    /* border:solid blue; */
    margin-top:0px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    width: 100%;
    height: 100vh;
    align-items: center;
    justify-items: center;
}
.game-buttons {

    border-radius: 50%;
    overflow: hidden;
    display: grid;
    align-items: center;
    justify-content: center;
    justify-items: center;
    width: auto;
    height: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-row-gap: 15px;
    grid-column-gap: 15px;
    animation:7s rotacion infinite;
    animation-timing-function: linear;
    /* animation-play-state: paused; */
    /* transition: 1s background; */

}
.game-content{

   display: flex;
   justify-content: center;
   align-items:center;

}
.game-state {
    position :absolute;
    /* border:solid red ; */

    background: transparent;
    border-radius: 50%;
    overflow: hidden;

    align-items: center;
    justify-content: center;
    justify-items: center;
    width: 420px;
    height: 420px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-row-gap: 15px;
    grid-column-gap: 15px;
    transition: 1s background;

    display: none;


}
.cambiaStatus{
    display: grid;
    animation: 3s status ;
 }
@keyframes status {

    20%{background:#0A0A12;transform: scale(.9)}
    70%{background:#0A0A12}
    100%{background:transparent ;}

}
#copa, #corazon{
    position: absolute;
   width: 250px;
   opacity: 0;
}

.showCopa{
    animation: 3s GanaCopa;
 }
 @keyframes GanaCopa {
    0%{opacity:0}
    20%{opacity:1;transform: rotate(0deg)}
    30%{transform: rotate(10deg)}
    40%{transform: rotate(-10deg)}
    50%{transform: rotate(10deg)}
    60%{transform: rotate(-10deg)}
    70%{opacity: 1;transform: rotate(10deg)}
    100%{opacity: 0}
 }

.showCorazon{
    animation: 2s corazon ;
 }
 @keyframes corazon {
     0%{opacity:0}
    20%{opacity:1;transform: scale(.95)}
    30%{transform: scale(1)}
    40%{transform: scale(.95)}
    50%{opacity: 1;transform: scale(1)}
    100%{opacity: 0}
}
.pause{
    animation-play-state:paused;
}
@keyframes rotacion{
    100%{transform: rotate(360deg)}
}
.arrow-right {
    width: 0;
    height: 0;
    border-top: 35px solid transparent;
    border-bottom: 35px solid transparent;
    border-left: 35px solid black;
    position: absolute;
    top: 15px;
    right: 27px;
  }

.color {
    width: 200px;
    height: 200px;
    display: inline-block;
}

.celeste {
    background: #1c8892;

}

.celeste.light {
    background: #77cbd4;
    box-shadow: 0px 0px 15px 3px #77cbd4;
}

.violeta {
    background: #701585;
}

.violeta.light {
    background: #e053fc;
    box-shadow: 0px 0px 15px 3px  #e053fc;
}

.naranja {
    background: #ca7c23;
}

.naranja.light {
    background: #ffb45f;
    box-shadow: 0px 0px 15px 3px  #ffb45f;

}

.verde {
    background: #4f8538;
}

.verde.light {
    background: #bad666;
    box-shadow: 0px 0px 15px 3px  #bad666;
}

.hide {

    animation: .2s hider forwards;
    display: none;

}


.btn-start {
    cursor: pointer;
    width: 100px;
    height: 100px;
    background: #ecf0f1;
    color: #2c3e50;
    border: none;
    border-bottom: 4px solid #c4c6c7;
    border-radius: 8px;
    font-size: 3em;
    position: absolute;
    transition: .1s;
    outline: none;
    border-radius: 50%;
}

.btn-start:hover {
    color: #ecf0f1;
    background: #2c3e50;
    border-bottom: 4px solid #1f3346;
    transform: scale(1.1);
}
.btn-start:hover .arrow-right  {
    border-left: 35px solid white;
}