@font-face { font-family: 'dk_lemon_yellow_sun'; src: url('fonts/dk_lemon_yellow_sun.woff2'); }
@font-face { font-family: 'kenvector_future'; src: url('fonts/kenvector_future.woff2'); }
@font-face { font-family: 'Lato-Bold'; src: url('fonts/Lato-Bold.woff2'); }

:root{
    --color-purple-light: #8f88e0;
    --color-purple-dark: #fb3fff; 
    --font-size: 20px;
}

:link {
    color: currentColor;
}

body{
    width: 100vw;
    height: 100%;
    font-size: var(--font-size);
    background-image: url('img/fondo.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    margin: 0;
    display:grid;
    align-items: center;
    /*grid-template-columns: 1.8fr 1fr;
    align-content: center;*/
    overflow:hidden;
}

#user{
    display:none;
    float:left;
    margin:3%;
}

.inactive #login{display:grid;}
.inactive #userInfo{display:none;}
.active #login{display:none;}
.active #userInfo{display:grid;}

#login, #userInfo{
    gap:10px;
    justify-items: center;
}

#content{
    margin-left:10%;
    aspect-ratio: 0.74 / 1;
    max-height: 100vh;
}

#billete{
    /* background-image: url('img/Billete.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom; */

    text-align:center;
    font-family: 'dk_lemon_yellow_sun';
    color: var(--color-purple-light);

    height: calc(100% - 10px);
    margin: 5px;
}


#menu{
    margin: 0px 20% 5% 40%;
    display:grid;
    /*grid-template-columns: 1fr;*/
    grid-template-rows: 23% 1fr;
    height: 98%;
}

#menu h1{
    /* margin:32% 0; */
    display: grid;
    align-self: center;
    padding: 0;
    font-size: 10vh;
}

#menu > ul{
    list-style: none;
    display:grid;
    align-content: stretch;
    grid-template-rows: 24% 27% 23% 25%;
    font-size: 1.5em;
    max-width: 100%;
}

#menu > ul > li{
    display: grid;
    align-self: center;
}

.link{cursor:pointer;}
.link:hover{color:black;}


.link {
    padding: 1em 2em;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #2c9caf;
    transition: all 500ms;
    font-size: 15px;
    position: relative;
    overflow: hidden;
    outline: 2px solid #2c9caf;
    background: white;
  }
  
  .link:hover {
    color: #ffffff;
    transform: scale(1.1);
    outline: 2px solid #70bdca;
    box-shadow: 4px 5px 17px -4px #268391;
  }
  
  .link::before {
    content: "";
    position: absolute;
    left: -50px;
    top: 0;
    width: 0;
    height: 100%;
    background-color: #2c9caf;
    transform: skewX(45deg);
    z-index: -1;
    transition: width 1000ms;
  }
  
  .link:hover::before {
    width: 250%;
  }
  



#menu > ul > li > ul{
    display:grid;
    align-self: stretch;
    gap: 2vh;
    align-content: space-around;
}

ul { list-style:none; margin: 0; padding: 0;}
a {text-decoration: none;}
a:hover{color: black;}


#credits{
    display: none;
    background: #cecece91;
    padding: 1% 5%;
    font-family:'Lato-Bold';
    text-align: center;
    overflow: scroll;
    height: 100%;
    text-wrap:balance;
    overflow-x:hidden;
}

#credits article{
    display:grid;
    justify-items: center;
    margin:50px 0;
}

#credits header{
    font-family: 'kenvector_future';
    color:var(--color-purple-dark);
    margin-bottom:10px;
}

#credits img{display:inline-block;max-width:100%;}
#credits .small{max-width: 50px;}

#credits-exit{float:right;cursor:pointer;font-size:25px;}
.btn{cursor:pointer;transition:color .5s ease;}
.btn:hover{color:white;}





#spinnerDiv{
    display:none;
    align-items: center;
    justify-content: center;
    width:100vw;
    height:100vh;

    text-align:center;
}

#spinner {

    /*width:500px;*/
    aspect-ratio: 1/1;
    max-width:100vw;
    max-height: 100vh;

    /* background-color: grey; */
    background-image: url('img/icons/icon-192.png');
    background-size:auto;
    background-position: center center;
    background-repeat: no-repeat;
    
    /* border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #09f; */

    animation: spin 5s ease infinite;
}

#spinnerMsg{
    color:white;
    font-size:3rem;
}





@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


@media (max-width: 1200px) {

    #content{margin:0;}
    #menu{margin:0;}

}