.content {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );
}

.card{
 text-align: center;
 margin:5%;
}

.card img{
    margin: auto;
    width: 50%;
}

.admin{
    display: grid;
    grid-template-rows: repeat( auto-fit, minmax(100px, 1fr) );
    grid-template-columns: auto;
}

.resume {
    text-align: center;
    width: 80%;
    margin:auto;
}

.night {
    width:80%;
    text-align: center;
    font-weight: bolder;
    margin:auto;
    margin-top:2%;
    margin-bottom: 2%;
}

.night h4{
    font-size: 20px;
    margin-bottom: 0%;
}

.night img{
 width: 48px;
 margin:1%;
}

.adm-form{
    margin:auto;
    margin-top:2%;
}

.rules h4{
    margin-top:30px;
}

.connect {
    margin-top: 2%;
    display: block;
    width: 70%;
    margin-inline-start: 2px;
    margin-inline-end: 2px;
    padding-block-start: 0.35em;
    padding-inline-start: 0.75em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    min-inline-size: min-content;
    border-width: 2px;
    border-style: groove;
    border-color: rgb(192, 192, 192);
    border-image: initial;
}

.connect legend{
   display: block;
   font-size:1.3rem;
   padding-inline-start: 2px;
   padding-inline-end: 2px;
   border-width: initial;
   border-style: none;
   border-color: initial;
   border-image: initial;
   color:saddlebrown
}

.gcercle {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: green;

}

.rcercle {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: rgb(128, 0, 0);

}

.bcercle {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: rgb(42, 19, 250);
}