*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Arial";
}

body, html{
    background: linear-gradient(rgba(38, 170, 141, 0.801), rgba(0,0,0,0.5)), url("img/fondo.jpeg");
    background-size: 100% 100%;
    background-attachment: fixed;
    background-color: rgb(9, 71, 58);
}

header{
    padding: 20px;
}

.logo{
    display: grid;
    justify-items: center;
    align-items: center;
    gap: 10px;
    justify-content: center;
    color: rgb(255, 255, 255);
    text-shadow: 0px 0px 10px rgb(149, 204, 144);
    
}

.logo .title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.logo .title *{
    font-size: 1.5em;
}

input,button{
    padding: 8px;
    font-size: 1em;
    font-family: Arial, Helvetica, sans-serif;
    border: 0px;
}

.btn{
    background-color: rgb(6, 59, 48);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: center;
    cursor: pointer;
}

.btn-add{
    background-color: rgb(11, 161, 131);
    text-align: center;
}

main{
    display: grid;
    grid-template-columns: 20% 1fr;
    margin: 0px 20px;
}

.add-user form{
    gap: 10px;
    display: grid;
    margin: 20px 0px;
    background-color: red;
    padding: 20px 25px;
    border-radius: 5px;
    background-color: rgb(16, 97, 70);
    align-items: start;
}

.add-user form .title{
    color: white;
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid rgb(4, 61, 42);
    border-radius: 5px;
    margin-bottom: 10px;
}

.users{
    margin-top: 10px;
    background-color: rgb(16, 97, 70);
    border-radius: 5px;
    box-shadow: 0px 0px 16px 0px rgba(82, 161, 106, 0.1);
    padding: 15px;
    display: grid;
    align-items: center;
    gap: 10px;
}

.users .user{
    padding: 5px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border: 1px solid rgb(41, 177, 143);
    background-color: rgb(20, 133, 95);
    border-radius: 5px;
    color: rgb(250, 250, 250);
}

.users .user span{
    padding: 5px;
}

.users .user .delete{
    cursor: pointer;
    color: rgb(52, 219, 155);
}

.result-sorteo{
    margin: 20px;
    padding: 20px;
    background-color: rgb(16, 97, 70);
    border-radius: 5px;
    box-shadow: 0px 0px 16px 0px rgba(82, 161, 106, 0.1);
}

.result-sorteo .table{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
}

.result-sorteo .table .user{
    display: grid;
    padding: 15px;
    background-color: rgb(65, 150, 117);
    border-radius: 5px;
    border: 1px solid rgb(22, 155, 137);
}

.result-sorteo .table .user .name{
    margin-bottom: 5px;
    color: white;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
}

.result-sorteo .table .user .equipos{
    display: grid;
    gap: 1px;
}

.result-sorteo .table .user .equipos .equipo{
    padding: 8px;
    display: grid;
    grid-template-columns: auto 15% 1fr;
    align-items: center;
    gap: 10px;
    border: 1px solid rgb(139, 124, 124);
    font-size: 0.9em;
    color: white;
    justify-items: center;
    border-radius: 5px;
}

.result-sorteo .table .user .equipos .equipo img{
    width: 100%;
}

footer{
    padding: 20px;
}

.color1  { background: linear-gradient(to left, rgba(255, 0, 0, 0.65), rgba(255,255,255,0.30)); }
.color2  { background: linear-gradient(to left, rgba(255, 64, 0, 0.65), rgba(255,255,255,0.30)); }
.color3  { background: linear-gradient(to left, rgba(255, 128, 0, 0.65), rgba(255,255,255,0.30)); }
.color4  { background: linear-gradient(to left, rgba(255, 191, 0, 0.65), rgba(255,255,255,0.30)); }
.color5  { background: linear-gradient(to left, rgba(255, 255, 0, 0.65), rgba(255,255,255,0.30)); }
.color6  { background: linear-gradient(to left, rgba(191, 255, 0, 0.50), rgba(255,255,255,0.30)); }
.color7  { background: linear-gradient(to left, rgba(128, 255, 0, 0.50), rgba(255,255,255,0.30)); }
.color8  { background: linear-gradient(to left, rgba(64, 255, 0, 0.50), rgba(255,255,255,0.30)); }
.color9  { background: linear-gradient(to left, rgba(0, 255, 0, 0.50), rgba(255,255,255,0.30)); }
.color10 { background: linear-gradient(to left, rgba(0, 255, 64, 0.50), rgba(255,255,255,0.30)); }
.color11 { background: linear-gradient(to left, rgba(0, 255, 128, 0.65), rgba(255,255,255,0.30)); }
.color12 { background: linear-gradient(to left, rgba(0, 255, 191, 0.65), rgba(255,255,255,0.30)); }
.color13 { background: linear-gradient(to left, rgba(0, 255, 255, 0.65), rgba(255,255,255,0.30)); }
.color14 { background: linear-gradient(to left, rgba(0, 191, 255, 0.65), rgba(255,255,255,0.30)); }
.color15 { background: linear-gradient(to left, rgba(0, 128, 255, 0.65), rgba(255,255,255,0.30)); }
.color16 { background: linear-gradient(to left, rgba(0, 64, 255, 0.65), rgba(255,255,255,0.30)); }
.color17 { background: linear-gradient(to left, rgba(0, 0, 255, 0.65), rgba(255,255,255,0.30)); }
.color18 { background: linear-gradient(to left, rgba(64, 0, 255, 0.65), rgba(255,255,255,0.30)); }
.color19 { background: linear-gradient(to left, rgba(128, 0, 255, 0.65), rgba(255,255,255,0.30)); }
.color20 { background: linear-gradient(to left, rgba(191, 0, 255, 0.65), rgba(255,255,255,0.30)); }
.color21 { background: linear-gradient(to left, rgba(255, 0, 255, 0.65), rgba(255,255,255,0.30)); }
.color22 { background: linear-gradient(to left, rgba(255, 0, 191, 0.65), rgba(255,255,255,0.30)); }
.color23 { background: linear-gradient(to left, rgba(255, 0, 128, 0.65), rgba(255,255,255,0.30)); }
.color24 { background: linear-gradient(to left, rgba(255, 0, 64, 0.65), rgba(255,255,255,0.30)); }
.color25 { background: linear-gradient(to left, rgba(128, 0, 0, 0.65), rgba(255,255,255,0.30)); }
.color26 { background: linear-gradient(to left, rgba(128, 32, 0, 0.65), rgba(255,255,255,0.30)); }
.color27 { background: linear-gradient(to left, rgba(128, 64, 0, 0.65), rgba(255,255,255,0.30)); }
.color28 { background: linear-gradient(to left, rgba(128, 96, 0, 0.65), rgba(255,255,255,0.30)); }
.color29 { background: linear-gradient(to left, rgba(128, 128, 0, 0.65), rgba(255,255,255,0.30)); }
.color30 { background: linear-gradient(to left, rgba(96, 128, 0, 0.65), rgba(255,255,255,0.30)); }
.color31 { background: linear-gradient(to left, rgba(64, 128, 0, 0.65), rgba(255,255,255,0.30)); }
.color32 { background: linear-gradient(to left, rgba(32, 128, 0, 0.65), rgba(255,255,255,0.30)); }
.color33 { background: linear-gradient(to left, rgba(0, 128, 0, 0.65), rgba(255,255,255,0.30)); }
.color34 { background: linear-gradient(to left, rgba(0, 128, 32, 0.65), rgba(255,255,255,0.30)); }
.color35 { background: linear-gradient(to left, rgba(0, 128, 64, 0.65), rgba(255,255,255,0.30)); }
.color36 { background: linear-gradient(to left, rgba(0, 128, 96, 0.65), rgba(255,255,255,0.30)); }
.color37 { background: linear-gradient(to left, rgba(0, 128, 128, 0.65), rgba(255,255,255,0.30)); }
.color38 { background: linear-gradient(to left, rgba(0, 96, 128, 0.65), rgba(255,255,255,0.30)); }
.color39 { background: linear-gradient(to left, rgba(0, 64, 128, 0.65), rgba(255,255,255,0.30)); }
.color40 { background: linear-gradient(to left, rgba(0, 32, 128, 0.65), rgba(255,255,255,0.30)); }
.color41 { background: linear-gradient(to left, rgba(0, 0, 128, 0.65), rgba(255,255,255,0.30)); }
.color42 { background: linear-gradient(to left, rgba(32, 0, 128, 0.65), rgba(255,255,255,0.30)); }
.color43 { background: linear-gradient(to left, rgba(64, 0, 128, 0.65), rgba(255,255,255,0.30)); }
.color44 { background: linear-gradient(to left, rgba(96, 0, 128, 0.65), rgba(255,255,255,0.30)); }
.color45 { background: linear-gradient(to left, rgba(128, 0, 128, 0.65), rgba(255,255,255,0.30)); }
.color46 { background: linear-gradient(to left, rgba(128, 0, 96, 0.65), rgba(255,255,255,0.30)); }
.color47 { background: linear-gradient(to left, rgba(128, 0, 64, 0.65), rgba(255,255,255,0.30)); }
.color48 { background: linear-gradient(to left, rgba(128, 0, 32, 0.65), rgba(255,255,255,0.30)); }