/*
*
* File: mobile.css - Unique ID :: 2VZ0
*
* Author: Remi Breton - <remi@bretonr.ca>
* Date: September 12, 2023
*
* Description: This CSS file contains a media query that adjusts styles for screens with a maximum width of 600 pixels, providing a responsive design.
*
* Usage: The styles in this file are intended to be included in an HTML file and are designed to enhance the user experience on smaller screens.
*
* Dependencies: No dependencies, but the styles assume a standard HTML structure.
*
*/
/* Html Elements Reinit */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}table{border-collapse:collapse;border-spacing:0;}
/* Html Form Elements Reinit */
input, button, textarea, select, input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{-webkit-appearance: none;-moz-appearance: none;appearance: none;resize: none;border-width: 0;padding: 0;margin: 0;outline: none;}
/*  Tell the browser, that our document can accept both a light and a dark color-scheme */
:root {
  color-scheme: light dark;
}
body{
  background-color: light-dark(#E0DFD5, #212324);
  color: light-dark(#253237, #b5b5b5);
  font-family: Verdana, arial, sans-serif;
  font-size: 14px;
}
header{
  background-color: light-dark(#f2f2f2, #0e1720);;
  text-align: center;
}
main{
  min-height: 80vh;
  margin: 2px 0 0 0;
  padding: 150px 0 0 0;
}
footer{
  text-align: center;
  padding: 0 0 10px 0;
}
h1, h2, h3, h4{
  text-align: center;
}
h1{
  font-size: 2.2rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  font-weight: 600;
}
h2{
  font-size: 1.8rem;
  line-height: 1.3;
  margin-bottom: 0.8rem;
  font-weight: 600;
}
h3{
  font-size: 1.4rem;
  line-height: 1.2;
  margin-bottom: 0.6rem;
  font-weight: 400;
}
h4{
  font-size: 1.2rem;
  line-height: 1.1;
  margin-bottom: 0.4rem;
  font-weight: 300;
}
p{
  margin: 0 0 1rem;
  padding: 0;
  font-size: 1rem;
  line-height: 1.5;
}
a{
  color: light-dark(#007bff, #89cff0);
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}
a:visited{
  color: light-dark(#2684d7, #639cd9);
}
a:hover{
  color: light-dark(#0056b3, #add8e6);
  text-decoration: underline;
}
a:active{
  color: light-dark(#004085, #66b3ff);
}
a:focus{
  color: light-dark(#007bff, #89cff0);
  outline: 2px solid light-dark(rgba(0, 123, 255, 0.5), rgba(137, 207, 240, 0.5));
}
table{
  margin: 0 auto;
  text-align: center;
  font-size: 18px;
}
th{
  padding: 10px;
  border: 1px solid #000;
  background-color: light-dark(#dddddd, #484848);
}
td{
  padding: 10px;
  vertical-align: middle;
  border: 1px solid #000;
  background-color: light-dark(#c8c8c8, #3c3c3c);
  font-size: 24px;
}
button{
  background-color: light-dark(#395C6B, #366B8A);
  color: light-dark(#fff, #c4c4c4);
  border: 1px solid #193039;
  box-shadow: 1px 1px 0px 0px inset #4b7688;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  font-size: 25px;
  touch-action: manipulation;
}
button:hover{
  background-color: light-dark(#395C6B, #2A4B5E);
  box-shadow: 1px 1px 0px 0px inset #263840;
}
/**
 * Layout element
 * @content : Css to make the general layout;
**/
.content{
  padding: 20px 10px;
  max-width: 640px;
  margin: 0 auto;
}
.left{
  float: left;
}
.right{
  float: right;
}
.hidden{
  display: none;
  visibility: hidden;
}
.clear{
  clear: both;
}
#statusWraper{
  position: absolute;
  top: 85px;
  right: 25px;
  background-color: light-dark(#ececec, #000);
  padding: 10px;
}
#roomID{
  display: block;
  padding: 0 0 10px;
}
#connectionIndicator{
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
#connectionIndicatorText{
  padding: 0 0 0 20px;
}
#connectionIndicator.connected{
  background-color: green;
}
#connectionIndicator.disconnected{
  background-color: red;
}
/**
 * Navigation
 * @autor : Remi Breton;
 * @content : les css pour la navigation;
**/
.stickyNav{
  width: 100vw;
  position: fixed;
  z-index: 100;
}
.mainNav .content{
  max-width: 960px;
}
.mainNav a{
  font-size: 18px;
  text-decoration: none;
}
.mainNav ul li{
  float: left;
}
.mainNav ul li+li{
  padding: 0 0 0 10px;
}
/**
 * Scoreboard
 * @content : les css pour les Scoreboard;
**/
.scoreboardWrap h2{
  margin: 1rem 0 0 0;
}
.scoreboardWrap h3{
  margin: 0;
}
.scoreboardWrap button{
  width: 40px;
  margin: 0;
  padding: 0;
  height: 40px;
}
.scoreboardWrap table{
  width: 100%;
}
.scoreboardWrap th{
  min-width: 28%;
}
.scoreboardWrap .smallRow{
  width: 16%;
}
.scoreboardWrap .bigIcone{
  font-size: 35px;
  margin: 3px 0 0 0;
  float: left;
}
.scoreboardWrapEnemie .bigIcone{
  float: none;
}
.scoreboardWrapEnemie td{
  padding: 0;
}

.scoreboardWrap .material-symbols-outlined{
}
/**
 * FormArea
 * @content : les css pour les formulaires;
**/
.formWrap{
  background-color: light-dark(#FFF, #232323);
  margin: 40px auto 20px;
  padding: 80px 50px;
  border-radius: 6px;
  box-shadow: 0px 1px 3px 0px light-dark(#b5b5b5, #0b0b0b);
  max-width: 400px;
}
.formArea{
  margin: 0 20px;
}
.formArea .row{
  padding: 18px 0 0 0;
}
.formArea .errorWrap{
  background-color: light-dark(#F5D7D7, #936863);
  color: light-dark(#A33333, #20202b);
  margin: 10px 0;
  padding: 10px;
}
.formArea .inputWrap{
  background-color: light-dark(#fff, #282828);
  border: 1px solid light-dark(#ccc, #393939);
  box-shadow: inset 0 1px 3px light-dark(#ddd, #1a1a1a);
  border-radius: 2px;
  box-sizing: border-box;
  margin: 6px 0 0 0;
}
.formArea .inputWrap:has(input:focus){
  outline:none; 
  border:1px solid #4D90FE;
  box-shadow: 0px 0px 2px  #4D90FE;
}
.formArea .inputTwoWrap{
  display: block;
  overflow: hidden;
}
.formArea label{
  cursor: pointer;
  font-size: 1em;
}
.formArea input, .formArea select{
  height: 40px;
  border: none;
  background: transparent;
  padding: 0 10px;
  box-sizing: border-box;
  width: 100%;
  font-size: 1em;
}
.formArea input::placeholder{
  color: light-dark(#888, #4d4d4d);
}
.formArea select{
  cursor: pointer;
  appearance: listbox;
}
.formArea input[readonly]{
  pointer-events:none;
  cursor: default;
  color: #808080;
}
.formArea .btn{
  width: 100%;
  font-size: 1.5em;
}