@import url("https://fonts.googleapis.com/css?family=Baloo+Bhaina");
@import url("https://fonts.googleapis.com/css?family=Lilita+One");

html, body {
    overflow-x: hidden;
}

body {      
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: calc(0.4em + 0.8vw);
    color: #625a56;
    position: relative;
}

header {
    background-color: #0072b0;   
}

#title {
    color: #625a56;    
    font-family: "Lilita One";  
    text-transform: uppercase;
    text-align: center;
    font-size: calc(2em + 8vw);
    margin-block-start: 0;
    margin-block-end: 0; 
}

.overlap{
    --overlap: .15ch;
    --shadow-offset: .1ch;
    --shadow-blur: .2ch;
    --shadow-color: black;
    letter-spacing: calc(var(--overlap) * -1); 
    isolation: isolate;
  }

.overlap-front { --mult: 1; }
.overlap-back { --mult: -1; }
  
 .overlap>span { 
    position: relative;                                                        
    z-index: calc(var(--index, 1) * var(--mult, 1));    
 }
 .overlap-front>span/*:not(:first-of-type)*/,
 .overlap-back>span:not(:last-of-type){
    text-shadow: 
      calc(var(--mult, 1) * var(--shadow-offset,0) * -1) 0 
      var(--shadow-blur, 0) 
      var(--shadow-color, black);
 }

nav {      
    height: 0.5em;       
    border-bottom: solid 0.5em #ee3114;
    box-shadow: 0.6rem 0.6rem 0.6rem #ccc;      
}

#main-nav {
    display: flex;  
    justify-content: center;  
    list-style: none;        
    gap: 0 2vw;    
    padding-left: 0;    
}

nav a {
    background-color: #ed4a0f;
    text-decoration: none;
    padding: 0.3vw 2vw;
    border-radius: 3px;
    cursor: pointer;    
    color: #fff;         
}

nav a:hover {
    background-color: #ffb99f;
    color: #ed4a0f;
}

.accueil {
    text-align: center;   
}

.video-container, .users-container {
    display: flex;
    align-items: center;
    justify-content: center;     
}

video {
    clip-path: circle(250px at center);
    filter: invert(100%) sepia(100%) hue-rotate(130deg); 
    width: 55vmin;
    height: 55vmin;
   
   /* border-radius: 325px;    */      
}

.connection-form input {
    display: block;
    margin: 5px;
}
  
table, th, td {
	border: solid 1px;
	border-collapse: collapse;	
	text-align: center;
}

th, td {
	width: 300px;
}

table {
    border: solid 2px;
	border-spacing: 0;
	border-collapse: separate;
	border-radius: 20px;
	border-style: solid;	
	overflow: hidden;
}

th, td {		
	text-align: center;
}

th:not(:last-child), td:not(:last-child) {
	border-right: 1px solid black;
}

tr:nth-child(odd) {
	background-color:rgb(255, 255, 55);
}

tr:nth-child(even) {
	background-color:rgb(252, 218, 166);
}

thead tr:nth-child(1) {
	background-color:rgb(190, 252, 166);
}

tr:hover {
	background-color:rgb(247, 184, 223);
}

.container {
    padding: 20px;  
}
  
.chapitre img {
  max-width: 100%;
  width: auto  
}
  
.chapitre h3 {
  color: rgb(69, 4, 99);
    text-align: center;
    width: 250px;
    text-decoration-line: none;
    position: absolute;
    bottom: 0px;
}
  
.listeChapitres {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2vw;   
  justify-content: center;
}
  
.chapitre {
  width: 250px;
  height: 250px;
  border: solid 1px;
  border-color:rgb(224, 84, 42);
  background-color: rgb(252, 252, 237);
  position: relative;
}
  
.chapitre:hover {
  opacity: 0.5;
}

.zoneRendu {
  padding: 2em;
}

.doubleColonne {
  display: grid;
}

.zoneSaisie {
    grid-column-start: 1;
    grid-column-end: 1;   
    width: 50%
}

.zoneRendu {
  grid-column-start: 2;
  grid-column-end: 2;
}

.formulaireSaisieCours {
  display: grid
}

.zoneSaisie {
  grid-row-start: 1;
  grid-row-end: 1;
}

.boutonRéponse {
	background-color: yellow;
	font-size: 24px;
	margin: 2px;
  border-radius: 3px;
}	

.boutonRéponse:hover {
	background-color: cyan;
}

#boutonRetour {
  border: solid 1px;
  border-radius: 8px;
  background-color:rgb(156, 10, 10);
}

#boutonRetour:hover {
  background-color:rgb(243, 169, 203);
}

#countdown {
	font-size: 300px;
  font-weight: bold;
  color:rgb(156, 10, 10);
  text-align: center;
	top: 200px;
	left: 50px;
}

#zoneFin {
  color:rgb(224, 84, 42);
  font-size: 36px;
  font-weight: bold;
}