.crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
  opacity: 0.2;
}

@keyframes flicker {
  0% {
  opacity: 0.27861;
  }
  5% {
  opacity: 0.34769;
  }
  10% {
  opacity: 0.23604;
  }
  15% {
  opacity: 0.10626;
  }
  20% {
  opacity: 0.18128;
  }
  25% {
  opacity: 0.10626;
  }
  30% {
  opacity: 0.18128;
  }
  35% {
  opacity: 0.23604;
  }
}

.crt::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}
@font-face {
  font-family: "ninoprodigio";
  src: url("../assets/ninoprodigio.ttf");
}

@keyframes jump-shaking {
  0% { transform: translateX(0) }
  25% { transform: translateY(-9px) }
  35% { transform: translateY(-9px) rotate(17deg) }
  55% { transform: translateY(-9px) rotate(-17deg) }
  65% { transform: translateY(-9px) rotate(17deg) }
  75% { transform: translateY(-9px) rotate(-17deg) }
  100% { transform: translateY(0) rotate(0) }
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: grid; 
  justify-content: center;
  margin: 0;
  padding: 0; 
  font-family: ninoprodigio;
  font-size: 2em;
  color: #fff;
  background-image: url("../img/cyberfunk.jpg");
  background-size: 100% auto;
  resize: both;
  overflow: hidden;
}

p {padding: 0 1em;}
p span {color: #1a1e23;}

#return {
  position: absolute;
  background-color: rgba(0,0,0,0.5);
  text-shadow: 0 0 5px rgba(255,255,255,0.5);
  display: block;
  height: 5vh;
  vertical-align: middle;
  text-align: center;
}

.toucheO {
  color: red;
  font-weight: black;
  font-family : "Material Icons";
  font-size: 1.8em;
  vertical-align: middle;
  display: inline;
  text-shadow: 1px 2px 0 rgba(0,0,0, 0.8),
               -1px -2px 0 rgba(250,225,255,0.03),
               1px 2px 3px rgba(0,0,0, 0.5),
               0 0 5px rgba(255,255,255,0.5);
  padding: 0;
  margin: 0;
}

#return p {
  margin-top: 0;
  font-size: 0.8em;
  vertical-align: middle;
}

#return a {
  color: #fff;
  text-decoration: none;
  padding: 0 0 0 0;
}

.play-list a {
  color: #DCE759;
  text-decoration: none;
  float:right;
}

.play-list a:hover {
  text-decoration: underline #DCE759;
}

h1 {
  color: rgba(215,139,72,1);
  text-shadow: 1px 2px 0 rgba(95, 43, 13, 0.8),
               -1px -2px 0 rgba(250,225,168,1),
	       1px 2px 3px rgba(0,0,0, 0.5),
	       0 0 5px rgba(255,255,255,0.5); 
  text-align: right;
  margin-bottom: 0;
}

.center {
  display: block;
  margin: auto;
}

tab-container {
	background-color: rgba(0,0,0,0.8);
	display: grid; 
	grid-template-columns: 1fr 1fr 1fr; /* Ajouter 1fr pour ajouter 1 colonne */
	grid-template-rows: auto 1fr;
	border: 0.5rem ridge rgba(80, 113, 234, 1);
	border-left: 0.3rem ridge rgba(216, 223, 251, 1);
	border-right: 0.2rem ridge rgba(216, 223, 251, 1);
	border-bottom: 0.3rem ridge rgba(38, 69, 150, 1);
	border-radius: .5em;
	height: 60%;
}

input {display: none;}

input:checked + label {
	color: rgba(255,255,255,1); 
	background-color: rgba(255,255,255,0.0);
	transition: all 250ms;
}

input + label .checkbox-empty {
	display: inline;
	font-family: 'Material Icons';
	vertical-align: text-top;
	font-size: 0.9em;
}

input + label .checkbox-checked {
	display: none;
	font-family: 'Material Icons';
	vertical-align: text-top;
	font-size: 0.9em;
}

input:checked + label .checkbox-checked {
	display: inline;
}
input:checked + label .checkbox-empty {
	display: none;
}

label {
	cursor: pointer;
	transition: color 250ms;
	padding: 1em;
	border-right: solid 2px #1a1e23;
	background-color: rgba(255, 255, 255, 0.03);
	text-align: center;
	transition: all 250ms;
	text-shadow: 0 0 5px rgba(255,255,255,0.5);

}
label:last-of-type {border: none; }
label:hover {
	color: rgba(255,255,255,1.0);
	background-color: rgba(255,255,255,0.05);
}

tab-content {
	display: grid; 
	grid-column: 1 / -1;
	border-top: 1px solid #EFF84F;
	font-size: 0.7em;
	height: 100%;
	overflow: auto;
	text-overflow: ellipsis;
	text-shadow: 0 0 5px rgba(255,255,255,0.5);
}
/*
Why doesn't this work!? 
input ~ tab-content {display: none;}
input:checked ~ tab-content {display: var(--tab-display);}*/

input#tabToggle01:checked ~ tab-content:not(:nth-of-type(1)),
input#tabToggle02:checked ~ tab-content:not(:nth-of-type(2)),
input#tabToggle03:checked ~ tab-content:not(:nth-of-type(3)),
input#tabToggle04:checked ~ tab-content:not(:nth-of-type(4)) {display: none;}


.play-list,.play-list li{
  padding:0;margin:0;
  list-style:none;
}

.playwgd{display:inline-block;
min-height:50vh;}
.playwgd audio{width:100%}

.play-list .material-icons,
.play-list li span{vertical-align:middle;}

.play-list li span{line-height: 25px;}
.play-list li{
  display: block;
  padding:5px;
  cursor:pointer;
  border-bottom:1px solid rgb(146, 146, 157);
  cursor:pointer;
  -khtml-user-select : none;
  -webkit-user-select : none;
  -moz-user-select : -moz-none;
  -ms-user-select : none;
  user-select : none;
}
.play-list li:hover{
  color: #EFF84F; 
  background-color: #3852AE;
  background-image: linear-gradient(to bottom, #00183c, #05224f, #0f2c63, #1a3778, #26428d, #26428d, #26428d, #26428d, #1a3778, #0f2c63, #05224f, #00183c);
}
.play-list li.selected{
  background-color: #3852AE;
  background-image: linear-gradient(to bottom, #00183c, #05224f, #0f2c63, #1a3778, #26428d, #26428d, #26428d, #26428d, #1a3778, #0f2c63, #05224f, #00183c);
  color: #EFF84F;
}

.material-icons {
  font-family: 'Material Icons';
}