/* ------------------------------------------------------------------- */
/* Body et autres */

body {
    background-color:#000000;
    background: repeating-linear-gradient(
        45deg,
        #0b0b0b 0%,
        #0b0b0b 10%,
        #000000 0%,
        #000000 50%
      )
      0 / 15px 15px;
}

@font-face {
	font-family: "Lemom";
	src: url('Font/LEMONMILK-Bold.otf');
}

@font-face {
	font-family: "Abel";
	src: url('Font/Abel-Regular.ttf');
}

#container{
  position: relative;
  left: 0px;
  top: 0px;
  width: 100%; 
  height: 100%; 
}

#copyright{
  position: absolute;
  font-size: 0.5vw;
  left: 93.7%;
  top: 98.2%;
  width: 6.60%;
  height: 1.06%;
  color:#373738;
}

/* ------------------------------------------------------------------- */
/* Div principales (position = relative) */

#lines{
  position: absolute;
  top: -1%;
  left: 2.5%;
  width: 96.5%;
  height: 101.9%;
}

#stream{
  position: absolute;
  top: 8.7%;
  left: 7.4%;
  width: 67.91%;
  height: 79.9%;
}

#tchat {
  position: absolute;
  left: 75.29%;
  top: 6.33%;
  width: 18.3%;
  height: 86.1%;
}

#barre_titre{
  position: absolute;
  top: 88.4%;
  left: 7.4%;
  width: 67.91%;
  height: 4.46%;
}

#barre_stat{
  position: absolute;
  top: 6.33%;
  left: 7.4%;
  width: 67.91%;
  height: 2.464%;
}

#lien_reseaux{
  position: absolute;
  top: 94%;
  left: 7.4%;
  width: 67.91%;
  height: 5.55%;
}

#case_haute{ 
  position: absolute;
  left: 0%;
  top: -0.89%;
  width: 100%;
  height: 3.7%;
}

/* ------------------------------------------------------------------- */
/* Div secondaires (position = absolute) */

/* -------------------- */
/* Div lignes */

/* Animation lignes */

.lines1 {
  position: absolute;
  top: 0%;
  left: 0.5%;
  height: 100%;
  width: 1%;
}

.line1 {
  position: absolute;
  width: 1px;
  height: 100%;
  left: 0%;
  top: 0%;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.line1::after {
  content: "";
  display: block;
  position: absolute;
  height: 15vh;
  width: 100%;
  top: -50%;
  left: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(75%, #FF7000), to(#FF7000));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #FF7000 75%, #FF7000 100%);
  -webkit-animation: drop 7s 0s infinite;
          animation: drop 7s 0s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
          animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
}
.line1:nth-child(1) {
  margin-left: 100%;
}
.line1:nth-child(1)::after {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

.lines2 {
  position: absolute;
  top: 0%;
  left: 2%;
  height: 100%;
  width: 1%;
}

.line2 {
  position: absolute;
  width: 1px;
  height: 100%;
  right: 0%;
  top: 0%;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.line2::after {
  content: "";
  display: block;
  position: absolute;
  height: 15vh;
  width: 100%;
  top: -50%;
  left: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(75%, #00ECFF), to(#00ECFF));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #00ECFF 75%, #00ECFF 100%);
  -webkit-animation: drop 7s 0s infinite;
          animation: drop 7s 0s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
          animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
}
.line2:nth-child(1) {
  margin-right: 100%;
}
.line2:nth-child(1)::after {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

.lines3 {
  position: absolute;
  top: 0%;
  left: 97%;
  height: 100%;
  width: 1%;
}

.line3 {
  position: absolute;
  width: 1px;
  height: 100%;
  left: 0%;
  top: 0%;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.line3::after {
  content: "";
  display: block;
  position: absolute;
  height: 15vh;
  width: 100%;
  top: -50%;
  left: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(75%, #00ECFF), to(#00ECFF));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #00ECFF 75%, #00ECFF 100%);
  -webkit-animation: drop 7s 0s infinite;
          animation: drop 7s 0s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
          animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
}
.line3:nth-child(1) {
  margin-left: 100%;
}
.line3:nth-child(1)::after {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

.lines4 {
  position: absolute;
  top: 0%;
  left: 98.5%;
  height: 100%;
  width: 1%;
}

.line4 {
  position: absolute;
  width: 1px;
  height: 100%;
  right: 0%;
  top: 0%;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.line4::after {
  content: "";
  display: block;
  position: absolute;
  height: 15vh;
  width: 100%;
  top: -50%;
  left: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(75%, #FF7000), to(#FF7000));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #FF7000 75%, #FF7000 100%);
  -webkit-animation: drop 7s 0s infinite;
          animation: drop 7s 0s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
          animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
}
.line4:nth-child(1) {
  margin-right: 100%;
}
.line4:nth-child(1)::after {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

@-webkit-keyframes drop {
  0% {
    top: -50%;
  }
  100% {
    top: 110%;
  }
}

@keyframes drop {
  0% {
    top: -50%;
  }
  100% {
    top: 110%;
  }
}

/* -------------------- */
/* Div barre titre */

#titre {
    position: absolute;
    font-family : Lemom;
    font-size: 0.85vw;
    left: 4%;
    bottom: -17%;
    color: #FFFFFF;
}

#square_twitch {
  position: absolute;
  left: 0%;
  bottom: 0%;
  height: 100%;
  width: 3.4%;
  background-color: #00BDFF;
}

#square_title {
  position: absolute;
  left: 0%;
  bottom: 0%;
  height: 100%;
  width: 100%;
  background-color: #111111;
}

#logo_twitch {
  position: absolute;
  left: 0.1%;
  bottom: 0%;
  width: 3.4%;
  height: 100%;
}

/* -------------------- */
/* Div barre stat */

#square_follow {
  position: absolute;
  left: 0%;
  bottom: 0%;
  height: 100%;
  width: 1.8%;
  background-color: #FF8F00;
}

#logo_follow {
  position: absolute;
  left: 0.2%;
  top: 8%;
  height: 84%;
  width: 1.45%;
}

#follow {
    position: absolute;
    font-family : Lemom;
    font-size: 0.85vw;
    left: 2.5%;
    bottom: -71%;
    color: #FFFFFF;
}

#square_view {
  position: absolute;
  left: 10%;
  bottom: 0%;
  height: 100%;
  width: 1.8%;
  background-color: #FF8F00;
}

#logo_view {
  position: absolute;
  left: 10.12%;
  top: 8%;
  height: 84%;
  width: 1.45%;
}

#view {
  position: absolute;
  font-family : Lemom;
  font-size: 0.85vw;
  left: 12.5%;
  bottom: -71%;
  color: #FFFFFF;
}

#square_game {
  position: absolute;
  left: 22%;
  bottom: 0%;
  height: 100%;
  width: 1.8%;
  background-color: #FF8F00;
}

#logo_game {
  position: absolute;
  left: 22.16%;
  top: 8%;
  height: 84%;
  width: 1.45%;
}

#game {
  position: absolute;
  font-family : Lemom;
  font-size: 0.85vw;
  left: 24.5%;
  bottom: -71%;
  color: #FFFFFF;
}

#square_autre {
  position: absolute;
  left: 0%;
  bottom: 0%;
  height: 100%;
  width: 100%;
  background-color: #111111;
}

/* -------------------- */
/* Mise en place Menu */

#Menu{
  position: absolute;
  top: 0%;
  left: -0.42%;
  width: 2.27%;
  height: 100%;
}

#background{
  background-color: #18181B;
  position: absolute;
  width: 100%;
  height: 100%;
}

.bar1{
  position: absolute;
  top: 11.76%;
  left: 9.30%;
  width: 81.40%;
  height: 14.71%;
  background-color: #A4A4AE;
  transition: 1s;
}

.bar2{
  position: absolute;
  top: 41.18%;
  left: 9.30%;
  width: 81.40%;
  height: 14.71%;
  background-color: #A4A4AE;
  transition: 1s;
}

.bar3{
  position: absolute;
  top: 70.59%;
  left: 9.30%;
  width: 81.40%;
  height: 14.71%;
  background-color: #A4A4AE;
  transition: 1s;
}

.bar_menu{
  position: absolute;
  top: 0%;
  left: -9.30%;
  width: 0%;
  height: 100%;
  background-color: #18181B;
  transition: 1s;
}

.Link_1{
  position: absolute;
  display:inline-block;
  top: 0%;
  left: -2297.67%;
  width: 0%;
  height: 100%;
  transition: 1s;
}

.link_1:link, .link_1:visited {
  background-color: #18181B;
  color: aliceblue;
  padding: 0% 14.71%;
  width: 0%;
  height: 100%;
  text-align: Left;
  font-size: 1.4vw;
  font-weight: bold;
  font-family: "Abel";
  text-decoration: none;
  display: inline-block;
}

.link_2:link, .link_2:visited {
  background-color: #18181B;
  color: aliceblue;
  padding: 0% 14.71%;
  width: 0%;
  height: 100%;
  text-align: Left;
  font-size: 1.4vw;
  font-family: "Abel";
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
}

.Link_2{
  position: absolute;
  display:inline-block;
  top: 0%;
  left: -2325.58%;
  width: 0%;
  height: 100%;
  transition: 1s;
}


/* Animation Menu */

.Link_1:hover, .Link_1:active{
  font-family: Abel;
  font-weight: bold;
  background: #18181B;
  color: aliceblue;
  animation-name: animation_couleur_menu;
  animation-duration: 0.25s;
  animation-fill-mode: forwards;
}

.Link_2:hover, .Link_2:active{
  font-family: Abel;
  font-weight: bold;
  background: #18181B;
  color: aliceblue;
  animation-name: animation_couleur_menu;
  animation-duration: 0.25s;
  animation-fill-mode: forwards;
}

@keyframes animation_couleur_menu {
  0%   {background: #18181B;color: aliceblue;}
  20% {background: linear-gradient(90deg, #5a5a5a, #18181B, #18181B, #18181B, #18181B);}
  40% {background: linear-gradient(90deg, #777777, #5a5a5a, #18181B, #18181B, #18181B);}
  60% {background: linear-gradient(90deg, #c2c2c2, #777777, #5a5a5a, #18181B, #18181B);}
  80% {background: linear-gradient(90deg, #dadada, #c2c2c2, #777777, #5a5a5a, #18181B);}
  100% {background: linear-gradient(90deg, aliceblue, #dadada, #c2c2c2, #777777, #5a5a5a);color: #18181B;}
}

.animation .bar1 {
  background-color: aliceblue;
  transform: rotate(-45deg) translate(-17%, 170%);
}

.animation .bar2 {opacity: 0;}

.animation .bar3 {
  background-color: aliceblue;
  transform: rotate(45deg) translate(-17%, -154%);
}

.animation .bar_menu {
  width: 4452%;
}

.animation .Link_1 {
  width: 2151.16%;
  transform: translateX(110%);
}

.animation .Link_2 {
  width: 2151.16%;
  transform: translateX(210.4%);
}

.animation a {
  color: aliceblue;
  width: 2139.53%;
}

/* -------------------- */
/* Div réseaux */

/* Animation bouton Twitter */

#bouton_twitter{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 19%;
  height: 100%;
}

.twitter{
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: 0;
  width: 100%;
  height: 100%;
  color: #1DA1F2;
  font-family : Lemom;
  background: #111;
  cursor: pointer;
  border-radius: 10px;
  border: none;
  outline: none;
}

.twitter:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.twitter:active {
    color: #000
}

.twitter:active:after {
    background: transparent;
}

.twitter:hover:before {
    opacity: 1;
}

.twitter:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

/*-----------------------------------------------------------*/
/* Animation bouton YouTube */

#bouton_youtube{
  position: absolute;
  top: 0%;
  left: 40%;
  width: 19%;
  height: 100%;
}

.youtube{
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: 0;
  width: 100%;
  height: 100%;
  color: #FF0000;
  font-family : Lemom;
  background: #111;
  cursor: pointer;
  border-radius: 10px;
  border: none;
  outline: none;
}

.youtube:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.youtube:active {
    color: #000
}

.youtube:active:after {
    background: transparent;
}

.youtube:hover:before {
    opacity: 1;
}

.youtube:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

/*-----------------------------------------------------------*/
/* Animation bouton Twitch */

#bouton_twitch{
  position: absolute;
  top: 0%;
  left: 81%;
  width: 19%;
  height: 100%;
}

.twitch{
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: 0;
  width: 100%;
  height: 100%;
  color: #6441a5;
  font-family : Lemom;
  background: #111;
  cursor: pointer;
  border-radius: 10px;
  border: none;
  outline: none;
}

.twitch:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.twitch:active {
    color: #000
}

.twitch:active:after {
    background: transparent;
}

.twitch:hover:before {
    opacity: 1;
}

.twitch:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}