body {
    text-align: center;
    background-image: url('./imgs/high background.png');
    background-size: 100%;
}

header,
main,
footer {
    display: flex;
    justify-content: center;
}
ul{

list-style-type: none; 
display:flex;
flex-direction: column;
align-items: center;
}

#logo {
    width: 600px;
}

#user_id {
    direction: rtl;
    border-color:#220054;
    height: 30px;
    padding-right: 50px;
}

#user_id:focus {
 box-shadow: 0 0 0 0.25rem rgba(223, 195, 143, 0.25);
}

#form
{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#btnEnter 
{
  --bs-btn-border-color:  #220054;
  --bs-btn-color:rgb(240, 231, 231)0;
   --bs-btn-hover-bg: white;
   margin-top: 25px;
}
#btnEnter:hover
{
  --bs-btn-hover-color: rgb(228, 216, 216)0;
  --bs-btn-hover-bg: white;
  --bs-btn-hover-border-color:  #220054;
}
#selectForm {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    width: 800px;
}

#selectForm div {
    margin: 5%;
}


#selectForm label {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: transparent;
    margin-left: 15%; 
    border: 2px solid #220054;
    border-radius: 10%;
    height: 250px;
    padding: 10%;
    width: 180px;
}

#selectForm div img {
    width: 190px;
    padding: 5%;
}

#selectForm div #little {
    width: 170px;
    padding: 5%;
}
.checkbox {
    appearance: none;
}

.checkbox:checked + label {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 1); 
}
#selectForm label {
    transition: box-shadow 0.3s ease; 
}
#btnPoints{
  --bs-btn-border-color:  #220054;
  --bs-btn-color:rgb(240, 231, 231)0;
  --bs-btn-hover-bg: white;
  color:black;
}

#btnPoints:hover
{
  --bs-btn-hover-color: rgb(228, 216, 216)0;
  --bs-btn-hover-bg: white;
  --bs-btn-hover-border-color:  #220054;
}

/* &&& */
#points {
    margin: 15px;
}

.option_row {
    margin: 10px;
}

@media(min-width: 1500px) {}