mostros.css

.busquero{
    display: flex;
    flex-grow: inherit;
}

#listero{
    background-color: rgb(178, 115, 238);
    border-color: rgba(74, 37, 85, 0.6);
}

#boton {
    background-color: hotpink;
    border-color: rgb(85, 37, 61, 0.6); 
}

.evenBigger{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.superContainer{
    display: flex;
    flex-direction: row;
}

.container{
    display: flex;
    flex-direction: column;
    flex-shrink: inherit;
    align-items: stretch;
    text-align: center;
}

.container div{
    background-color: whitesmoke;
    text-align: center;
    border: solid;
    height: 40px;
    width: 40px;
}

.containerMod{
    display: flex;
    flex-direction: column;
    flex-shrink: inherit;
    align-items: stretch;
    text-align: center;
    
}

.containerMod div{
    background-color: whitesmoke;
    text-align: center;
    border: solid;
    height: 40px;
    width: 40px;
    font-size: 24px;
}

.container2{
    display: flex;
    flex-direction: row;
}

.col2{
    background-color: whitesmoke;
    display: flex;
    flex-direction: column;
    font-size: medium;
    height: 270px;
    width: 198px;
    border: solid;
    justify-content: space-between;
}

.col3{
    background-color: whitesmoke;
    display: flex;
    border: solid;
    height: 270px;
    width: 750px;
    flex-direction: column;
    justify-content: space-between;
}

.col4{
    border: solid;
    background-color: whitesmoke;
    display: flex;
    height: 270px;
    width: 1046px;
    flex-direction: column;
    justify-content: space-between;
}

#invisible{
    visibility: hidden;
    display: flex;
    flex-direction: row;
    font-size: 1px;
}

#attackDes_mostro{
    background-color: rosybrown;
    border-bottom: solid;
}

#nombre_mostro{
    background-color: rosybrown;
    border-bottom: solid;
}

.salvation1{
    border-right: solid;
    border-top: solid;
    border-left: solid;
    display: flex;
    flex-wrap: wrap;
    height: 273px;
    width: 200px;
    justify-content: space-between;
}

#savethrow_mostroSTR{
    display: flex;
    flex-direction: column;
    width: 62px;
    height: 108px;
    text-align: center;
    align-items: center;
}

#savethrow_mostroDEX{
    display: flex;
    flex-direction: column;
    width: 62px;
    height: 108px;
    text-align: center;
    align-items: center;
}

#savethrow_mostroCON{
    display: flex;
    flex-direction: column;
    width: 62px;
    height: 108px;
    text-align: center;
    align-items: center;
}

#savethrow_mostroINT{
    display: flex;
    flex-direction: column;
    width: 62px;
    height: 108px;
    text-align: center;
    align-items: center;
}

#savethrow_mostroWIS{
    display: flex;
    flex-direction: column;
    width: 62px;
    height: 108px;
    text-align: center;
    align-items: center;
}

#savethrow_mostroCHR{
    display: flex;
    flex-direction: column;
    width: 62px;
    height: 108px;
    text-align: center;
    align-items: center;
}

#tk1{
    display: flex;
    flex-direction: column;
    width: 100px;
    height: 80px;
    text-align: center;
    align-items: center;
}

#tk2{
    display: flex;
    flex-direction: column;
    width: 100px;
    height: 80px;
    text-align: center;
    align-items: center;
}

#tk3{
    display: flex;
    flex-direction: column;
    width: 100px;
    height: 80px;
    text-align: center;
    align-items: center;
}

#tk4{
    display: flex;
    flex-direction: column;
    width: 100px;
    height: 80px;
    text-align: center;
    align-items: center;
}

.salvation2{
    border-right: solid;
    border-left: solid;
    border-bottom: solid;
    display: flex;
    flex-wrap: wrap;
    height: 273px;
    width: 200px;
    justify-content: space-between;
}

.salvation1 input{
    height: 32px;
    width: 64px;
    background-color: rgba(223, 130, 176, 0.753);
    border-color: rgb(85, 37, 61, 0.6);
}

.salvation2 input{
    height: 32px;
    width: 100px;
    text-align: center;
    background-color: rgba(159, 99, 228, 0.644);
    border-color: rgba(67, 37, 85, 0.6);
}

.estoyharto{
    display: flex;
}

#rollero{
    flex-direction: column;
    height: 50px;
    width: 100px;
    background-color: orangered;
    border-color: red;
}

#rolly{
    flex-direction: column;
    background-color: rgba(231, 166, 166, 0.171);
    height: 50px;
    width: 100px;
    text-align: center;
    align-items: center;
}

.bigBottom{
    display: flex;
    flex-direction: row;
}



.dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(211, 199, 177, 0.973);
    min-width: 230px;
    overflow: auto;
    border: 1px solid #ddd;
    z-index: 1;
  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  .dropdown a:hover {background-color: rgba(221, 221, 221, 0.87);}
  
  .show {display: block;}