@font-face {
  font-family: 'Ac437 IBM BIOS';
  src: url('fonts/font.ttf');
}

@font-face {
  font-family: 'Heart Warming';
  src: url('fonts/heartwarming.otf');
}

body {
  background-image: url('/img/genesislq.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
}

#lang{
  font-family: 'Ac437 IBM BIOS';
  position: absolute;
  left: 5%;
  top: 5%;
  color : white;
  font-weight: bold;
  font-size: 30px;
  -webkit-text-stroke: 1px black;
  text-shadow: 2px black;
}

.monitor-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

img {
  pointer-events: none;
  z-index: -1;
  height: 100vh;
}

.screen-wrapper {
  position: absolute;
  width: 640px;
  height: 480px;
  background-color: black;
  background-image: radial-gradient(rgba(0, 100, 0, 0.75), black 80%);
  text-shadow: 0 0 5px limegreen;
  color: lime;
  font-family: 'Ac437 IBM BIOS';
  overflow: hidden;
  line-height: 10px;
  scale: 1.16;
} 

pre {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
  font-family: 'Ac437 IBM BIOS';
  font-size: 10px;
}  

.content-wrapper::-webkit-scrollbar {
  display: none;
}

input{
  background-color: transparent;
  font-family: 'Ac437 IBM BIOs';
  color: lime;
  border: none;
  font-size: 10px;
  margin-left: none;
  padding: 0;
  width: 630px !important;
  overflow: visible;
}  

input:focus {
  outline: none;   
}

@keyframes flicker {
  0% {
    opacity: 0.27861;
  }
  5% {
    opacity: 0.34769;
  }
  10% {
    opacity: 0.23604;
  }
  15% {
    opacity: 0.90626;
  }
  20% {
    opacity: 0.18128;
  }
  25% {
    opacity: 0.83891;
  }
  30% {
    opacity: 0.65583;
  }
  35% {
    opacity: 0.67807;
  }
  40% {
    opacity: 0.26559;
  }
  45% {
    opacity: 0.84693;
  }
  50% {
    opacity: 0.96019;
  }
  55% {
    opacity: 0.08594;
  }
  60% {
    opacity: 0.20313;
  }
  65% {
    opacity: 0.71988;
  }
  70% {
    opacity: 0.53455;
  }
  75% {
    opacity: 0.37288;
  }
  80% {
    opacity: 0.71428;
  }
  85% {
    opacity: 0.70419;
  }
  90% {
    opacity: 0.7003;
  }
  95% {
    opacity: 0.36108;
  }
  100% {
    opacity: 0.24387;
  }
}

.screen-wrapper::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;
}

.screen-wrapper::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;
}

#volet{
  position: absolute;
  right: 1%;
  top: 5%;
  background-color: #FFEBA1;
  color: black;
  width: 17%;
  z-index: 2;
  padding: 0.5vw;
  font-family: 'Heart Warming';
  font-size: 1.8vh;
}

/* Style des boutons des onglets */
.tab_name {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
}

.tab_name button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0.2vw 0.5vh;
  transition: 0.3s;
  font-size: 1.8vh;
}

.tab_name button:hover {
  background-color: #fff740;
}

.tab_name button.active {
  background-color: #fff740;
}

/* Style du contenu des onglets */

.tabcontent {
  padding-top: 2vh;
  overflow-Y: scroll;
  height: 40vh !important;
}

.tablinks{
  font-family: 'Heart Warming';
}

#cmdbutton{
  background-color: #FFEBA1;
  border: solid 0.1vw black;
  font-size: 1.8vh;
  font-family: 'Heart Warming';
  transition: 0.3s;
}

#cmdbutton:hover {
  background-color: #fff740;
}

#sameline{
  display: flex;
  margin-top: 5px;
  margin-bottom: 5px;
}

#description{
  margin: 0;
}