body {
  margin: 0;
  background: black;
  font-family: monospace;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* IMAGE PRINCIPALE */
#interface {
  position: relative;
  width: 1920px;
  height: 1080px;
  background: url("anim_dark_v2.gif") center no-repeat;
  background-size: contain;
  filter: blur(0.5px);
  transform: scale(0.8);
  transform-origin: center;
  margin-left: -196px;
  margin-top: -110px;
}


/* texte defile */

.marquee-container {
  position: relative;
  margin-left: 635px;
  margin-right: 685px;
  overflow: hidden;
  background-color: #f0f0f000; 
  }

.marquee-content {
  position: inherit;
  display: inline-block;
  white-space: nowrap;
  padding: 10px;
  animation: marquee 20s linear infinite;
  margin-top: 65px;
  color: rgba(255, 255, 255, 0.597);
  font-weight: bold;
  text-shadow: white 1px 0 50px;
  font-size: 16px;
}

.marquee-content:hover {
 animation-play-state: paused;
}


  @keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
   }


/* SCREEN MIDDLE */
#screen {
  position: absolute;
  top: 10%;
  left: 37%;
  width: 24%;
  height: 36%;
  background: black;
  border: 4px solid #ffffffb7;
  padding: 10px;
  border-radius: 4px;
  box-sizing: border-box;
  color: #ccc;
  overflow: hidden;
  text-overflow: clip;
  word-wrap: break-word;
  word-break: normal;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  overflow-y: auto;
  filter: drop-shadow(0 0 0.2rem rgb(255, 255, 255));
}

/* TEXTE */
#line, .line {
  margin: 4px 0;
  letter-spacing: 1px;
  font-weight: bold;
  text-shadow: white 1px 0 50px;
  text-align: center;
}

/* CLIGNOTEMENT */
.blink {
  animation: blink 1s steps(2) infinite;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
}


/* GALLERY SCREEN MIDDLE */

#gallery_background {
  position: absolute;
  top: 8.3%;
  left: 35.7%;
  width: 26%;
  height: 55%;
  background-color: rgb(0, 0, 0);
  border: 4px solid #ffffffb7;
  padding: 75px;
  border-radius: 4px;
  box-sizing: border-box;
  color: #ffffffac;
  font-size: 18px;
  overflow: hidden;
  filter: drop-shadow(0 0 0.4rem rgb(97, 97, 97));

}

#gallery {
  position: fixed;
  top: 8.3%;
  left: 35.7%;
  width: 26%;
  height: 55%;
  border: 4px solid #ffffffb7;
  border-radius: 4px;
  box-sizing: border-box;
  color: #ffffff;
  overflow: hidden;
  font-size: 18px;
  filter: drop-shadow(0 0 0.4rem rgb(255, 255, 255));
  justify-content: center;
  justify-items: center;
}

#artwork {
  max-width: 120%;
  max-height: 120%;
  overflow: hidden;
  justify-items: center;
  object-fit: contain;
  z-index: 99999;
}

#overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);

  display: none;
  align-items: center;
  justify-content: center;

  z-index: 99999;
}

#overlay img {
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
  cursor: zoom-out;
}


.Arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 80px;
  height: 80px;

  background: transparent;
  border: none;
  color: #cfcfcf;
  font-size: 30px;
  cursor: pointer;

  z-index: 9999;
}

.Arrow.left  { 
  left: 620px; 
  top: 400px;
}
.Arrow.right { 
  right: 670px; 
  top: 400px;
}


/* SCREEN LEFT */
#screen_left {
  position: absolute;
  top: 54%;
  left: 12%;
  width: 10%;
  height: 5%;
  background: black;
  overflow: hidden;
  text-overflow: clip;
  word-wrap: break-word;
  word-break: normal;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  overflow-y: auto;

}

.ScreenLeftButton{
  background:url(index_gif.gif) no-repeat;  
  filter: opacity(80%) grayscale() ;
  position: absolute;
  cursor: pointer;
  border: none;
  width: 200px;
  height: 200px;
  top: 220px;
  left: 220px;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);

}

/* TEXTE */
#line_left, .line_left {
  color: rgba(255, 255, 255, 0.718);
  margin-top: 1px;
  letter-spacing: 1px;
  font-weight: bold;
  text-shadow: white 10px 0 20px;
  text-align: center;
}



/* SCREEN RIGHT */
#screen_right {
  position: absolute;
  top: 41.5%;
  left: 69%;
  width: 426px;
  height: 224px;
  border: 2px solid #ffffffb7;
  padding: 10px;
  border-radius: 4px;
  box-sizing: border-box;
  color: #ccc;
  overflow: hidden;
  text-overflow: clip;
  word-wrap: break-word;
  word-break: normal;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  overflow-y: auto;
  filter: drop-shadow(0 0 0.2rem rgb(255, 255, 255));
}

#navigation_left {
  position: absolute;
  top: 41.5%;
  left: 69%;
  width: 426px;
  height: 224px;
  border: 2px solid #ffffffb7;
  padding: 10px;
  border-radius: 4px;
  box-sizing: border-box;
  color: #ccc;
  overflow: hidden;
  text-overflow: clip;
  word-wrap: break-word;
  word-break: normal;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  overflow-y: auto;
  filter: drop-shadow(0 0 0.2rem rgb(255, 255, 255)) opacity(50%);
}

/* TEXTE */
#line_right, .line_right {
  color: rgba(255, 255, 255, 0.49);
  margin-top: 1px;
  letter-spacing: 1px;
  font-weight: bold;
  text-shadow: white 1px 0 50px;
  text-align: center;
}

/* MIDDLE BUTTONS */


.GalleryButton{
  background:url(portfolio.png) no-repeat;
  filter: opacity(50%);
  position: absolute;
  cursor: pointer;
  border: none;
  width: 260px;
  height: 52px;
  top: 495px;
  left: 810px;
  filter: drop-shadow(0 0 0.8rem rgb(255, 255, 255)) opacity(75%);
}

.GalleryButton:hover {
 filter: drop-shadow(0 0 0.4rem rgb(255, 255, 255));
}

.BlogButton{
  background:url(blog.png) no-repeat;
  filter: opacity(50%);
  position: absolute;
  cursor: pointer;
  border: none;
  width: 64px;
  height: 84px;
  margin-top: 470px;
  margin-left: 700px;
  filter: drop-shadow(0 0 0.8rem rgb(255, 255, 255)) opacity(75%);
}

.BlogButton:hover {
 filter: drop-shadow(0 0 0.5rem rgb(255, 255, 255));
}


.AppsButton{
  background:url(apps.png) no-repeat;
  filter: opacity(50%);
  position: absolute;
  cursor: pointer;
  border: none;
  width: 64px;
  height: 80px;
  margin-top: 470px;
  margin-left: 800px;
  filter: drop-shadow(0 0 0.8rem rgb(255, 255, 255)) opacity(75%);
}

.App1Button:hover {
 filter: drop-shadow(0 0 0.5rem rgb(255, 255, 255));
}

.App1Button{
  background:url(cattus.png) no-repeat;
  filter: opacity(50%);
  position: absolute;
  cursor: pointer;
  border: none;
  width: 64px;
  height: 80px;
  margin-top: 25px;
  margin-left: 50px;
  filter: drop-shadow(0 0 0.8rem rgb(255, 255, 255)) opacity(75%);
}

.AppsButton:hover {
 filter: drop-shadow(0 0 0.5rem rgb(255, 255, 255));
}

.AboutButton{
  background:url(about.png) no-repeat;
  position: absolute;
  cursor: pointer;
  border: none;
  width: 64px;
  height: 80px;
  margin-top: 470px;
  margin-left: 900px;
  filter: drop-shadow(0 0 0.8rem rgb(255, 255, 255)) opacity(75%);
}

.AboutButton:hover {
 filter: drop-shadow(0 0 0.5rem rgb(255, 255, 255));
}

.LockedButton{
  background:url(locked.png) no-repeat;
  filter: opacity(50%);
  position: absolute;
  cursor: pointer;
  border: none;
  width: 64px;
  height: 80px;
  margin-top: 470px;
  margin-left: 1000px;
  filter: drop-shadow(0 0 0.8rem rgb(255, 255, 255)) opacity(75%);
}

.LockedButton:hover {
 filter: drop-shadow(0 0 0.5rem rgb(255, 255, 255));
}

.LockedButton2{
  background:url(locked.png) no-repeat;
  filter: opacity(50%);
  position: absolute;
  cursor: pointer;
  border: none;
  width: 64px;
  height: 80px;
  margin-top: 470px;
  margin-left: 1100px;
  filter: drop-shadow(0 0 0.8rem rgb(255, 255, 255)) opacity(75%);
}

.LockedButton2:hover {
 filter: drop-shadow(0 0 0.5rem rgb(255, 255, 255));
}

/* TEXTE BUTTONS */
#line_buttons, .line_buttons {
  color: white;
  margin-top: 1px;
  letter-spacing: 1px;
  font-weight: bold;
  text-shadow: white 1px 0 50px;
  text-align: center;
}


.zone {
  position: absolute;
  cursor: pointer;
}

.ZoneHome {
  position: absolute;
  top: 815px;
  left: 890px;
  width: 100px;
  height: 100px;
  background: tr;
  border: none;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
 

.ZoneLeft {
  position: absolute;
  top: 810px;
  left: 750px;
  width: 75px;
  height: 60px;
  background: transparent;
  border: none;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  z-index: 9999;
}


.ZoneRight {
  position: absolute;
  margin-top: 690px;
  margin-left: 760px;
  width: 75px;
  height: 60px;
  background: transparent;
  border: none;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/* LEFT BUTTONS */

.YoutubeButton{
  background: url(YoutubeButton.png) ;
  filter: opacity(50%);
  position: absolute;
  cursor: pointer;
  border: none;
  width: 64px;
  height: 80px;
  top: 635px;
  left: 230px;
  filter: drop-shadow(0 0 0.8rem rgb(255, 255, 255)) opacity(75%);
}

.MailButton{
  background: url(MailButton.png) ;
  filter: opacity(50%);
  position: absolute;
  cursor: pointer;
  border: none;
  width: 64px;
  height: 80px;
  top: 635px;
  left: 340px;
  filter: drop-shadow(0 0 0.8rem rgb(255, 255, 255)) opacity(75%);
}




/* crt */

 .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;
}

@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;
}