body{
    background-color:rgb(239, 239, 239);
}

a.defaultlink {
    color: yellow; /* Makes the text yellow */
    text-decoration: underline; /* Ensures visibility */
    font-weight: bold;
}

h1{
    position:relative;
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 2px;
    margin-bottom: 2px;
    top:2%;
    font-size: 50px;
    font-weight: bold;
    text-align:center;
    color:rgba(250,181,0,255);
}

input{
    position:relative;
    left:50%;
    transform:translateX(-50%);
    display: inline;
    width: inherit;
    padding: 10px;
    background: rgb(190, 190, 190);
    border: 5px solid rgba(0,0,0,.15);
    box-shadow: 0 5px 10px rgba(0,0,0,.1) inset;
    border-radius: 15px;
    font-size:25px;
    &:invalid :not(:focus){
        border-color: firebrick;
    }
}
button{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background-color:rgba(250,181,0,255);
    border-color: rgba(250,181,0,255);
    color:rgba(14,39,72,255);
    width:335px;
    padding:2px;
    border-radius:15px;
    font-size:25px;
    font-style:inherit;
    text-align:center;
    box-shadow: 5px 5px 10px rgba(0,0,0,.1);
}

#boite{
    background-color: rgba(14,39,72,255);
    height:max-content;
    width: max-content;
    border-width:2px;
    border-radius: 20px;
    border:5px solid rgba(0,0,0,.15);
    box-shadow: 5px 5px 10px rgba(0,0,0,.1);

}

img.info{
    height: 50px;
    width: 50px;
    top: 5%;
    right: 5%;
}

p.popUp{
    display: none;
    position: absolute;
    top: 50px;
    left: 50px;
    padding: 10px;
    width: 90%;
    background-color: rgb(57, 57, 57);
    color: white;
    border-radius: 5px;
    font-size: 25px;
}