*
{
    cursor: url('../images/cursor.png'), auto;	
}

body 
{
    background-color: black;
}

.center-logo 
{
    width: 256px;
    height: 113px;

    margin: 20px auto;
    display: block;
}

h1 
{
    color: white;
}

#flex-icons 
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}

.rol-icon 
{
    width: 80px;
    height: 80px;
    border-radius: 8px;
    transition: transform 200ms;
    /*padding-left: 80px;
    padding-right: 80px;
    */
}

.rol-icon:active 
{
    transform: scale(0.90);
    background-color: #2525257f;
}

#filters 
{
    margin: 0 0 0 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: row;
}

.fa-filter 
{
    font-size: 3em;
    color: #333333;
    padding: 10px 10px 10px 10px;
    border-radius: 8px;
    transition: transform 200ms;
}

.fa-filter:active 
{
    transform: scale(0.90);
    background-color: #2525257f;
}

.search-bar 
{
    position: relative;
    padding: 17px 0px 0px 0px;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 1.5em;
}

.search-bar input 
{
    padding: 10px 10px 10px 10px;
    position: relative;
    background-color: #333333;
    color: aliceblue;
    border: none;
    width: 20%;
    transition: width 200ms ease-in-out;
}

.search-bar input:focus 
{
    width: 100%;
}

.fa-magnifying-glass 
{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5em;
    color: #333333;
}

#sticky
{
    padding-bottom: 10px;
    background: linear-gradient(to bottom, black 98%, rgba(0, 0, 0, 0.9) 2%);
    border-radius: 8px;
    position: top;
    position: sticky;
    top: 0;
    z-index: 2;
}

.champ-container
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.champion-card
{
    position: relative;
    background-color: white;
    width: 145px;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
    margin: 5px 5px 5px 5px;
}

.champ-img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.champ-overlap
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    z-index: 1;
    
    transform: translateY(75%);
    transition: 300ms ease-in-out;
}

.champ-info
{
    position: relative;
    background-color: rgba(170, 170, 170, 0.65);
    border-radius: 4px;
    width: 145px;
    height: 100px;
}

.champion-card:hover .champ-overlap
{
    transform: translateY(55%);
    cursor: pointer;
}

.champ-name
{
    text-align: center;
    font-size: 1em;
    font-family: 'Roboto', sans-serif;
    color: black;
    padding-top: 10px;
    padding-bottom: 1px;
}

.champ-title
{
    font-size: 0.8em;
    font-family: 'Roboto', sans-serif;
    color: black;
    text-align: center;
    transform: translateY(-35%);
}

/* TEMPORAL TEST */
.champion-container
{
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}

/* Detras del modal */
.modal
{

}

/* Div que contiene el modal */
.modal-dialog
{
    width: 90%;
    height: 90%;
    border-radius: 8px;
}

.modal-img
{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.modal-content
{
    height: 100%;
    border-radius: 8px;
}

.modal-title
{
    position: absolute;
    top: 10%;
    left: 0%;
    right: auto;
    bottom: auto;
    background-color: rgba(18, 18, 18, 0.385);
    font-size: 1.5em;
    font-family: 'Roboto', sans-serif;
    color: white;
    text-align: left;
    padding: 1% 15% 1% 1%;
    z-index: 0;
    border-radius: 0px 16px 16px 0px;
    transition: 300ms ease-in-out;
}

.modal-body
{
    position: absolute;
    top: 20%;
    font-size: 1.5em;
    font-family: 'Roboto', sans-serif;
    color: white;
    justify-items: center;
    text-align: left;
    padding: 1% 1% 1% 1%;
    border-radius: 0px 16px 16px 0px;
    opacity: 1;
    transition: 300ms ease-in-out;
    z-index: 0;
}


.modal-title:hover
{
    padding: 1% 15% 5% 1%;
}

.modal-title:hover .modal-body
{
    transform: translateY(50%);
}

.close
{
    color: #fff;
    opacity: 70%;
}

.modal-bg-close
{
    position: fixed;
    align-items: left;
    top: -2%;
    left: 90%;
    right: 0;
    bottom: 90%;
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.10) 40%, rgba(0, 0, 0, 0.5) 150%);
    border-radius: 100% 4px 0px 100%;
    z-index: 0;

}

.modal-container-info
{
    position: absolute;
    top: 70%;
    left: 0%;
    right: 0;
    bottom: 0;
    background-color: rgba(18, 18, 18, 0.385);
    border-radius: 16px 16px 4px 4px;; 
    z-index: 1;
    overflow: hidden;
    transition: 300ms ease-in-out;
}

.modal-container-description
{
    color: white;
    font-size: 1.5em;
    font-family: 'Roboto', sans-serif;
    text-align: center;
}

.modal-container-stats
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: 1% 1% 1% 1%;
    align-items: center;
    color: white;
}

.stat-container
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    margin: 0% 1% 1% 1%;
}

.modal-container-info:hover
{
    position: absolute;
    top: 50%;
    background-color: rgba(18, 18, 18, 0.5);
}

.stat-title
{
    font-size: 1.3em;
    font-family: 'Roboto', sans-serif;
    color: white;
}

.stat-data
{
    font-size: 1.2em;
    font-family: 'Roboto', sans-serif;
    color: white;
    padding-left: 1%;
    padding-bottom: 1%;
}