body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
font-size: 16px;
/* letter-spacing: -0.01em; */
line-height: 1.4;
background-color:white;
}      
#container {
max-width: 800px;
margin: 0 auto;
padding: 10px 20px;
font-size:22px;
background-color: white;
}	  
#content {
margin: 10px auto;
text-align:center;
width:100%;
}

h1 {
text-align: center;
margin: 5px 0 0 0;
font-size: 1.9em;
}
h2 {
text-align: center;
margin: 10px 0 10px 0;
font-size: 1.2em;		
}
.title-full {
width: 100%;
background-color:black;
color:white;
font-weight:bold;
padding:5px 10px;
text-align: center;
}
#title-img {
width:150px;
height:auto;
margin-bottom:5px;
}
.img-badge {
display: flex;
align-items: center;
justify-content: center; 
}
.welcome {
background-color:white;
color:black;
margin-bottom:5px;
}
#upper-section {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
form {
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
}
.form-group {
margin-bottom: 15px;
}
input {
font-size:1.1em;  
width:400px;  
}
input[type="password"], select {
width: 100%;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 4px;
box-sizing: border-box;
transition: border-color 0.3s;
font-size:0.9em;  
}
input[type="password"]:focus, select:focus {
border-color: darkgreen;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor:pointer;
font-size:0.85em; 
}
*,
*::before,
*::after {
box-sizing: border-box;
}
label {
display: block;
padding:10px 15px 10px 10px;
font-weight:bold;
margin: 0 10px 5px 0;
}
button {
width: 200px;
padding: 10px;
background-color: darkgreen;
border: none;
border-radius: 4px;
color: #ffffff;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #074b2b;
}
.message, .message_badge {
padding:5px 0 5px 10px;
margin-bottom:10px;
font-size:0.8em;
text-align:left;
}
.message_green {
background-color: #ddffeb;
border-left: 6px solid green;
}
.message_blue {
background-color: #abb0eb;
border-left: 6px solid darkblue;
}
.message_red {
background-color: #ffdddd;
border-left: 6px solid #f44336;
}
.zoe_react {
height:auto;
min-height:50px;
background-color: #ddffeb;
background-image:url(images/ZOE.png);
background-position: bottom left; 
background-repeat: no-repeat; 
background-size:50px;
padding:5px 5px 5px 65px;
font-size:0.8em;
text-align:left;
vertical-align:middle;
font-style: italic;
}
.zoe_react a {
text-decoration:underline;
}
table {
border-collapse: collapse;
width: 100%;
max-width: 100%;
}
th, td {
padding: 5px 5px 5px 10px;
border: none;
text-align:center;
vertical-align: middle;
max-width:40%;
}
tr.odd {
background-color:white;
}
tr.even {
background-color:rgb(177, 223, 196,0.5);
}
#score {
width:100%;
/* background-color: #389958; */
background-color: #ddffeb;
padding:5px;
margin:0 0 25px 0;
font-weight:bold;
}
#score-videogame {
width:100%;
padding:5px;
margin:20px 0;
font-size:0.9em;
}
#highscores,#solved,#news {
display:none;
border-radius:4px;
}
ul.check-list {
list-style: none; 
padding-left: 0; 
}
ul.check-list li {
position: relative;
padding-left: 1.7em; 
}
ul.check-list li::before {
content: '';
position: absolute;
left: 0;
top: 25%;
transform: translateY(-50%);
width: 25px; 
height: 25px; 
background-image: url('images/check2.png');
background-size: contain;
background-repeat: no-repeat;
}
#help {
display:none;
border-radius:4px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
padding:20px;
font-size:0.8em;
}
#help h4 {
font-size:1.2em;
margin:0;
padding:0;
}
#help a {
text-decoration: underline;
}
#distanceDiv {
    width: 75px;
    height: 75px;
    border: 1px solid #000;
    margin-bottom: 10px;
    margin-top: 20px;
}
#distancePercentage {
    margin-bottom:10px;
    font-size:1.2em;
}
#gradientDiv, #gradientLegend {
    margin: 20px auto 0;
    width: 360px; 
}
#gradientDiv {
    height: 20px;
    /* background: linear-gradient(to right, #FF4500 , #EE82EE); */
    background: linear-gradient(to right, 
        #FF4500,
        #FF6347,
        #FFA500,
        #FFD580,
        #FFFF00,
        #FFFF80,
        #90EE90,
        #008000,
        #ADD8E6,
        #0000FF,
        #9370DB,
        #EE82EE,
        #4B0082
    );
    border: 1px solid #000;
    position: relative;
    margin-top: 20px;
}
#gradientLegend {
    display: flex;
    justify-content: space-between;
    margin-top:3px;
}
#motDePasse {
    width: 360px;
    height:35px;
    font-size:1.3em;
    font-weight: bold;
    margin:10px;
}
.badge-large-screen {
display:none;
}
.badge-container {
display: flex;
flex-wrap: wrap;
align-items: center;
max-width: 100%; 
}
.badge-img {
width: 50px; 
height: auto;
margin-right: 5px;
}
#badges {
font-size:0.7em;
padding-right:10px;  
}
.tooltip, .tooltip-info {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip-info::before {
content: "?";
position: absolute;
top: 50%;
right: -5px; 
transform: translateY(-50%);
width: 16px; 
height: 16px; 
line-height: 16px; 
text-align: center;
font-size: 14px; 
color: #555; 
background-color: #fff; 
border: 1px solid #555; 
border-radius: 50%; 
cursor: pointer;
}
.tooltip .tooltiptext, .tooltip-info .tooltiptext {
visibility: hidden;
width: 200px;
max-width: 200px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: calc(100% + 1px); 
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
font-size: 0.8em;
font-weight:400;
}  
.tooltip-info .tooltiptext {
bottom: calc(80% + 1px);    
}
.tooltip .tooltiptext::after, .tooltip-info .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px; 
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}  
.tooltip:hover .tooltiptext, .tooltip-info:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.logo-cell {
width:120px;
text-align: left;
}
.logo-container {
width:100%;
}
.logo-img {
width:90px;
height: auto;
vertical-align: middle;
}
.team-cell {
text-align:left;
}
.score-cell {
text-align:center;
padding-right:20px;
}
.validate {
text-align:center;
}
a {
color: #333;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}
button {
margin-bottom: 30px;
font-size:1em;
font-weight:bold;
border-radius:2px;
}  
#footer {
text-align: center;
margin: 10px auto;
padding-bottom: 20px;
font-size:16px;	 	  
}	  
#footer a {
text-decoration:underline;
}

@media only screen and (max-width: 708px) { 
body{
padding:3px;
margin:0;
}
#container {
width:100%;
padding: 5px;
}
#content {
width:100%;
padding:0;
margin:0;
border:none;
}
#navbar{
padding:5px;
margin-left:10px;
max-width:300px; 
}
.tooltip .tooltiptext, .tooltip-info .tooltiptext {
margin-left: 8px;
width: 120px;
}
.logo-cell {
width:100px;
}
.logo-img {
width:70px;
}
button {
margin-top:15px;
    }
}