@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
@import url('https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

:root{
--widgetBack: linear-gradient(to right, #2d2670, #504c7ec4, #272768);
--redeemsBack: linear-gradient(to right, #111845dc, #554e8dd2, #524d8ae3,  #111845dc);
--borders: #484a8a;
--socialsBorderbtn: solid 3px rgba(35, 31, 54, 0.247);
--titleBack: linear-gradient(to right, #3c3676, #111845dc, #3c3676);
--orange: #f78809;
/* --borders: #2a3cad; */
}


body {
    
    background-image:url(/Images/background4.jfif);
    background-size: 2444px;
    background-color: #000000a6;
    background-blend-mode:overlay;
    background-repeat: repeat;
    overflow-x: hidden;
    font-family: roboto; -webkit-font-smoothing: antialiased; margin: 0;
    height: min-content;
    margin: 0;
   }

  
   #background-video {
      position: absolute;
      top: 49.9%;
      left: 50%;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: translate(-50%, -50%);
      z-index: -1;
  }


   html{
    margin-bottom: 0;
    margin: 0;
   }

/* TOP LOGO/ */

   #socialLogo{
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      flex-grow: 1;
      row-gap: 5px;
      margin: 0;
      column-gap: 10vw;
      margin: 10px 0 10px 0;
   }

   #logo{
      position: relative;
      border:11px inset var(--borders);
      border-radius: 2rem;
      display: flex;
      z-index: 1;
      max-width: 800px;
      height: 100px;
      background-image: var(--widgetBack);
      flex-wrap: wrap;
   }
   #logoImg{
   opacity: 1;
   transition: all 1s ease; 
   background-image: url(/Images/logo.png);
   background-size: contain;
   }

   #logoImg:hover{
      opacity: 2;
      transition: all 1s ease;
      background-image: url(/Images/twIcon.png);
      background-size: contain;
      background-color: #000000;
      border-radius: 1.5rem;
   }
   
   #channel{
      font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      position: relative;
      align-self: center;
      text-decoration: none;
      color: #f1f1f1;
      font-weight: bolder;
      z-index: 2;
      color: rgb(5, 14, 68);
      text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
      font-size: clamp(1rem, 2.5vw, 2.2rem);
      padding: 1vw; 
      text-wrap: nowrap;
      user-select: none;
      /* flex: 1 1 calc(50% - 5px); */
   }
   
   #channel:hover{
      transition: transform 0.6s ease, color 0.3s ease; 
      transform: translateY(-10px);
      color: white;
      cursor: pointer;
      text-shadow: 0 2px 2px #dfdfdf, 
      -2px 5px 2px #cbcbcb,
      -4px 8px 2px #979797, 
      -6px 11px 2px #a2a2a2, 
      -8px 14px 2px #aeaeae;
   }

   #channel:active{
      transition: transform -0.2s ease, color 0.3s ease; 
      transform: scale(0.90);
      color: white;
      cursor: pointer;
      text-shadow: 0 2px 2px #dfdfdf, 
      -2px 5px 2px #cbcbcb,
      -4px 8px 2px #979797, 
      -6px 11px 2px #a2a2a2, 
      -8px 14px 2px #aeaeae;

   }
   
   
   
   #logoImg{
      position: relative;
      left:-7px;
      border:8px inset var(--borders);
      border-radius:30% 0 0 30%;
      width:5.2rem;
      height: 5.2rem;
   }

   
   /* TWITCH CHAT */


   #chat-container {
      z-index: 99999;
      padding: 8px;
      border:11px inset var(--borders);
      height: 80px;
      min-height: 80px;
      overflow: hidden;
      border-bottom-left-radius: 2rem;
      border-bottom-right-radius: 2rem;
      background-image: var(--widgetBack);
      position: sticky;
      top: -20;
      min-width: auto;
      overflow: hidden;
   }
   
   #chat-container:hover{
      align-self: center;
      width: auto;
      height: 368px;
      position: fixed;
      text-wrap:wrap;
      word-break:break-word;
      overflow: visible;
      top:0;
      min-width: fit-content;
      width: 100vw;
      max-width:98%;
      overflow: hidden;
   }
   
   .chatPlaceholder{
      display:inline-block;
      position: absolute;
      width: 100vw;
      height: 118px; 
}

 #chat-container:hover ~ .chatPlaceholder{
   position: relative;
   display: block;

}

   #chat-messages {
      z-index: 99999;
      content: 'Twitch Chat';
      font-weight: bolder;
      font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      overflow: hidden;
      border-top: 1px solid #ccc;
      padding: 10px 30px 0 0;
      font-size: large;
      color: rgb(218, 98, 0);
      text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -1px black;
      letter-spacing: 0.10vw;
      margin-top: -20px;
      min-width: auto;
      max-height: 30vw;
   }

   .username {
      color: rgb(5, 14, 68);
      text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
      font-size: clamp(1.2rem, 1.4vw, 1.8rem);
  }

   
   /* SOCIALS */

   #socials{
      border:11px inset var(--borders);
      border-radius: 2rem;
      background-image: var(--widgetBack);
      position:relative;
      display: flex;
      color: white;
      justify-content: space-around;
      max-width: 580px;
      flex-grow: 1;
   }


   .discord{
      position: relative;
      padding: 10px;
      border-right:var(--socialsBorderbtn);
      border-left:var(--socialsBorderbtn);
      border-radius: 30%;
      height: 50px;
      width: 50px;
   }
   
   .twitter{
      position: relative;
      padding: 6px;
      border-radius: 30%;
      border-right:var(--socialsBorderbtn);
      border-left:var(--socialsBorderbtn);
      height: 58px;
      width: 58px;
   }
   
   .instagram{
      position: relative;
      padding:10px;
      border-radius: 30%;
      border-right:var(--socialsBorderbtn);
      border-left:var(--socialsBorderbtn);
      height: 54px;
      width: 54px;
      }
      
      #socials .shadowBut:hover{
         transform: scale(1.09);
         -webkit-filter: drop-shadow( 2px 2px 10px #c4c1c1);
         filter: drop-shadow(2px -2px 10px #ffffff); 
         transition:scale 0.2ease;
      }
      

      
      #socials .shadowBut{
         -webkit-filter: drop-shadow(5px 5px 5px #222);
         filter: drop-shadow(5px 10px 10px #222222c0); 
         transition: all 0.1s ease;
         transform: scale(1);
         align-self: center;
      }
      
      #socials .shadowBut:active{
         transition: all 0.1s ease;
         transform: scale(0.95);
         
    }

 
   /* TOP LOGO ENDS? */
   
/* footer --> */
#footer{
   bottom: 0;
   border:11px inset var(--borders);
   border-radius: 1rem;
   display: flex;
   padding: 0.4rem;
   margin-top: 2rem;
   background-image: var(--widgetBack);
   justify-content: space-around;

 }
 #footer a{
   position: relative;
   align-self: center;
   width: fit-content;
   color: rgb(5, 14, 68);
   text-shadow: 10px 10px 24px rgba(255,255,255,0.1);
   font-size: clamp(0.8rem, 1.8vw, 2rem);
   text-decoration: none;

 }
 #footer a:hover{
   transition: transform 0.6s ease, color 0.3s ease; 
   transform: translateY(-10px);
   color: white;
   cursor: pointer;
   text-shadow: 0 2px 2px #dfdfdf, 
   -2px 5px 2px #cbcbcb,
   -4px 8px 2px #979797;
 }
 #footer a:active{
   transition: transform -0.2s ease, color 0.3s ease; 
   transform: scale(1);
   color: rgb(5, 14, 68);
   text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
 }

/*-----------------------------------*/

 .navbar {
   position: relative;
   align-items: center;
   display:flex;
   flex-direction: row;
   margin: auto;
   list-style: none;
   border: 11px inset var(--borders);
   border-radius: 40px;
   background-image: var(--widgetBack);
   background-size:contain;
   padding: 10px;
   overflow: hidden;
   color: white;
   justify-content:space-around;
   flex-wrap:wrap-reverse;
}  

.navbar button{
   text-decoration-style: none;
   text-decoration: none;
   align-self: center;
   margin-top: 10px;
   box-shadow: 3px 5px 5px rgba(26, 26, 27, 0.801);
   background-image: var(--widgetBack);
   border:11px inset var(--borders);
   border-radius: 2rem;   
   font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   font-weight: bolder;
   z-index: 2;
   color: rgb(5, 14, 68);
   text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
   font-size: clamp(1rem, 2.5vw, 2.2rem);
   padding: 0 1rem 0 1rem;
   margin-bottom: 10px;
   min-width: max-content;
   width:200px;
}


   
.navbar button:hover{
      box-shadow: 0 0 6px 0 rgba(255, 255, 255, 0.959);
      transition: transform 0.2s ease-in-out, box-shadow 0.3s ease-in;
      transform: scale(1.01);
}
.navbar button:active{
   transition: transform 0.2s ease, box-shadow 0.3s ease;
   box-shadow: 0 0 20px 0 rgb(7, 2, 78);
   transform: scale(0.90);
   color: #170149;
}

.com:hover{
   color: rgb(224, 224, 224);
   text-shadow: 2 #ffffff;
   /* -4px 8px 2px #979797; */
   transition: transform (0.4s) ease, color (8s) ease, text-shadow (0.9s) ease; 
   cursor: pointer;
   /* -6px 11px 2px #a2a2a2, 
   -8px 14px 2px #aeaeae, 
   -10px 17px 2px #b5b5b5, 
   -12px 20px 2px #bebebe;*/
} 

/*-----------------navbar------------------*/

.slide-contentGif {
   margin: 0;
   justify-content: center; 
   /* row-gap: 100px; */
   column-gap: 30px;
   display: flex;
   flex-wrap: wrap;
}



#name {
   background-color: #0c0505a9;
   border: 2px solid rgb(23, 32, 90);
   border-radius: 15px;
   box-sizing: border-box;
   color: var(--orange);
   cursor: pointer;
   font-family: Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
   font-size: 0.75rem;
   letter-spacing: 1px;
   min-height: 35px;
   max-width: 10.5rem;
   font-weight: bolder;
   transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
   width: 100px;
   height: 20px;
}

.notification {
   position: fixed;
   background-color: #0c0505a9;
   border: 2px solid rgb(23, 32, 90);
   border-radius: 15px;
   box-sizing: border-box;
   color: var(--orange);
   padding: 5px 10px 5px 10px;
   opacity: 0;
   transition: opacity 0.5s;
   z-index: 1000;
   border: 2px inset var(--borders);
   margin-top:-54px;
}

.notification.show {
   opacity: 1;
}

.slide-titleGif {
   text-shadow: 5px 10px 5px rgba(0, 0, 0, 0.856);
   font-size: clamp(1rem, 1.2vw, 1.5rem);
   font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   text-align: center;
   font-weight: bold;
} 
.slide-titleGif h2{
   color: var(--orange);
} 

.slide-titleGif #white{
   color: white;
}

#gifList{
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   left: -20px;
   position: relative;
}

#name:hover {
   color: #fff;
   background-color: #000000;
   box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
   transform: translateY(-2px);
}

button#name:active {
   box-shadow: none;
   transform: translateY(0.2px);
}

.imgGif{
   width: 100px;
   height: 100px;
   /* background-color: #111845a6; */
   box-sizing: border-box;
   box-shadow: 0 20px 50px rgb(23, 32, 90);
   border: 2px solid var(--borders);
   color: white;
   margin-bottom: 90px;
}

.imgGif:hover {
/* background-color: rgba(0, 0, 0, 0.562); */
   margin: 30px 0 -30px 0;
   transform: scale(1.8);
   position:relative;
   bottom: -30px;
   transition: ease 400ms;
   border: none;
   background: transparent;
   box-shadow: none;
}
.imgGif:hover ~ button#name{
   position: relative;
   top:-30px;
   background-color: red;
}

/*-----------------------------------*/
/* HOMEEEEEE */


.homeInner{
    /* height: fit-content;    */
}

#kickStream
{
   align-items: center;
   margin-top: 3vw;
}
iframe {
   left: 100px;
   border: 2px solid var(--borders);
   width: 90vw;
   height: 51vw;
}

.twitch{
   z-index: 1;
   margin-top: 3vw;
}


/* #twitchPlayerContainer {
   overflow: hidden;
   max-width: 100%;
   position: relative;
   height: 0;
   z-index: 1;
   justify-content: center;
} */
/* #twitchPlayer{
   box-shadow: 8px 14px 9px #010101;
   z-index: 9999;
   border-radius: 1rem;
   align-self: center;
   height: 30.6vw;
   width: 54.5vw;
} */

.home {
   display: flex;
   justify-content: center;
   width: 100%;
   min-height: 900px;
}

.homeInner {
   position: relative;
   top: 0;
   padding: 5px;
}


#twitchChat{
      background-color: #030303b2;
      height: 100%;
      border-radius: 0 1.5rem 1.5rem 0;
   } 

 /* not sure */
 /* #slides {
    
    border: 18px solid var(--borders);
    border-radius: 40px;
    position: relative;
    border-style:ridge;
    overflow: hidden;
      
 } */

 #overflow {
    /* width: 100%; */
    overflow: hidden;
 }
 #slide1:checked ~ #slides .inner {
    margin-left: 0;
    overflow: hidden;
    
 }
 #slide2:checked ~ #slides .inner {
    margin-left: -100%;
    overflow: hidden;
 }
 #slide3:checked ~ #slides .inner {
    margin-left: -200%;
    overflow: hidden;
 }
 #slide4:checked ~ #slides .inner {
    margin-left: -300%;
    overflow: hidden;
 }

 #slides .inner {
    overflow: hidden;
    transition: margin-left 400ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    min-height: fit-content;
    margin-bottom: 100px;
    
 }
  /* GAMES PAGE STARTING HERE */

.slide-listGames{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
   grid-row-gap: 20px; 
   justify-items: center;
}
.shares{
   display: flex;
   color: white;
   background: #00000081;
   box-sizing: border-box;
   border-top: solid var(--borders);
   text-shadow: none;
   margin: 0 0 0 -30px;
   padding-right: 1rem;
}
#gameInfo{
   position: relative;
   color: rgb(125, 156, 192);
   text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -1px black;
   padding-top: 8px;
   padding-bottom: 10px;
   font-weight: lighter;
   text-wrap: wrap;
   text-align: center;
   flex-wrap: wrap;
}
.shares ul{
   flex-basis: 100%;
   list-style: none;
   text-align: center;
   font-style: normal;
}

.shares #clickMe:before{
   content: '◈ ';
   color: white;
}
#clickMe{
   color: var(--orange);
   cursor: pointer;
}

.slide-titleGames{
   font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   text-align: center;
   font-size: clamp(1.2rem, 1.2vw, 3rem);
   color: rgb(218, 98, 0);
   text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -1px black;
   letter-spacing: 0.10vw;
}

#slides #titleGroup{
   padding-top: 20px;
   background: #00000081;
}

.hoverExample:hover ~ .slide-listGames #zoomGames{
   transform: scale(1);
   font-weight: bolder;
   background-color: rgba(255, 0, 0, 0.425);
   overflow: hidden;
}

.idkGames{
   font-size: 1rem;
   background: #00000081;
   box-sizing: border-box;
   box-shadow: 0 15px 0px rgb(23, 32, 90);
   border-top: solid var(--borders);
   border-bottom:5px solid var(--borders);
   border-left:5px solid #2a3bad21;
   border-right:5px solid #2a3bad21; 
   text-align:start;
   list-style-type: none;
   color: #f8f8f8;
   position: relative;
   /* width: 420px; */
   margin: 0 10px 90px 10px;
   align-items: center;
   overflow: hidden;
   justify-content: center;
   padding: 2px;
   
}
#gameSpan{
   color: var(--orange);
}

#gameInfo::before{
   font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
   font-style: normal;
   content: "ℹ️";
}

.idkGames li{
   font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.idkGames ul{
   margin-left: auto;
}

.idkGames span::before{
   content: "◈ ";
   color: white;
}
#commentGames {
   color: rgba(248, 221, 228, 0.582);
   font-style:oblique;
}
.idkGames #commentGames::before{
   content: "- ";
   color: white;
}

.idkGames span{
   color: #f78809;
   text-decoration:double;
}

.idkGames span:hover{
   /* cursor: pointer; */
   cursor:grab;
}

.idkGames:nth-letter(2){
   color: #000000;
}

 /* GAMES PAGE ENDING HERE */

/* REDEEMS PAGE  */

/* separate element for SHOP */


#titleGroup{
   background-color: rgba(14, 15, 19, 0.808);
   /* border-radius: 2rem; */
   border-bottom:10px outset  var(--borders);;

}
.shopList{
   position: relative;
   display: flex;
   min-height: 300px;
   align-items: center;
   flex-wrap: wrap;
   justify-content:space-around;
   margin-right: 0;

}

.titleShop{
   margin: 10px 2px 10px 2px;
   display: flex;
   justify-content: center;
   color: var(--orange);
   font-size: clamp(0.80rem, 1.4vw, 50vw);
}
.shopSpan{
   color:white;
   word-wrap: break-word;

}

.titleShop #clickMe{
   color: var(--orange);
   cursor: pointer;
}

.hoverExample span{
   color: white;
   font-weight: bolder;
   text-decoration: overline underline;
   cursor: pointer;
}
.slide-titleGif .titleShop{
   color: white;
   font-weight: bolder;
   text-decoration: overline underline;
   cursor: pointer;
}
.titleShop:hover ~ #exampleItem2{
   opacity: 1;
   visibility: visible;
   transition: visibility 0s, opacity 0.5s linear;
   color: var(--orange);
   size: 1.8rem;
   text-shadow: none;
}

.hoverExample:hover ~ #exampleItem{
   opacity: 1;
   visibility: visible;
   transition: visibility 0s, opacity 0.5s linear;
}
.hoverExample:hover ~ .shopList #zoomGames{
   transform: scale(1.3);
   font-weight: bolder;
   padding: 10px 0 10px 0;
}

#exampleItem{
   visibility: hidden;
   opacity: 0;
}
#exampleItem2{
   visibility: hidden;
   opacity: 0;
}

/* flex: 1 1 50%; */
.shopList div{
   font-weight: bolder;
   font-size: clamp(0.80rem, 1.2vw, 1.3vw);
   color: white;
   margin: 5px 5px 5px 10px;
}
.shopList #clickMe{
   color: var(--orange);
   cursor:pointer;
   text-decoration:dotted;
}

.shopList #clickMe::before{
   content: '◈ ';
   color: white;
}

/* end */

.idkRedeems {
   border-radius: 0.75em;
   position: relative;
   grid-column: span 14;
   font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   text-transform:capitalize;
   font-size: clamp(0.80rem, 1.4vw, 50vw);
   z-index: 1s;
   font-weight:bolder;
   margin: 1rem;
   align-content: center;
   word-spacing: 10px;
   padding: 2px 20px 5px 20px;
 }
 
 .idkRedeems span:hover {
   background: var(--redeemsBack);
   border-radius: 0.80rem;
   padding: 2px 20px 5px 20px;
   opacity: 1;
   transition: opacity 1000ms;
   cursor: pointer;

 }
 .idkRedeems:click{
   color: #000000;
 }

 .notificationRedeems {
   position: fixed;
   font-weight: bolder;
   border-radius: 0.80rem;
   padding: 10px 0px 10px 20px;
   border: hidden;
   width: 100px;
   opacity: 0;
   transition: opacity 0.2s ease;
   margin-top: -69px;
   z-index: 999;
   color:white;
   margin-left: -56px;
   background-color: #000000b0;

}

.notificationRedeems.show{
opacity: 1;
}

 .idkRedeems span {
   background-size: cover;
   border-radius:inset 20px inherit;
   inset: 1px;
   color: rgb(245, 245, 245);
   opacity: 0;
   transition: opacity 3000ms;
   line-height: 50px;
 }

 .idkRedeems:hover span ~ .idkRedeems span:before{
   opacity: 1;
}

#redeemsInfo{
   font-size:x-large;
   font-style: italic;
   font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   background: var(--titleBack);
   background-size: cover;
   color: rgb(197, 211, 248);
   opacity: 0;
   transition: opacity 1000ms;
   width: fit-content;
   border-radius: 0.25em;
   margin: auto;
   text-transform:none;
   margin-top: 10px;
   padding: 0 5px 0 5px;
}
.idkRedeems span:hover ~ #redeemsInfo{
   opacity: 1;
}

.idkRedeems div{
   color: white;
}

.innerRedeems{
   opacity: 0.9;
   /* background-image: url(/Images/girlWallpaper.png); */
   overflow: hidden;
   transition: margin-left 400ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
   width: 100%;
   min-height: 840px;
   margin: 0;
}

.slide-listRedeems{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
   grid-row-gap: 20px; 
   align-content: center;
   justify-items: center;
   float:inline-start;
}


/* REDEEMS PAGE ENDS  */
/* COMMANDS STARTS HERE */

.slide-title {
   text-align: center;
   font-size: 1.5rem;
   font-size: larger;
   color: rgb(218, 98, 0);
   text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -1px black;
   letter-spacing: 0.10vw;
   padding-top: 3px;
   position: relative;

}

.idk span{
   color: #f78809;
   font-style: normal;
}

.innerCommands{
    border: 20px solid var(--borders);
    border-radius: 40px;
    position: relative;
    border-style:ridge;
    overflow: auto;  
 }

.wrapAll {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   width: 100%;
   justify-content: space-around;
   }
      
   .idk {
   position: relative;
   flex: 1 1 50%;
   box-sizing: border-box;
   text-wrap: wrap;
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   letter-spacing: 0.75px;
   color: #7972cf;
   align-self: center;
   background-color: #0303035d;
   max-width: 900px;
   align-self:self-start;
   padding: 0 20px 20px 20px;
   border-top-right-radius: 1.5rem ;
   border-top-left-radius: 1.5rem ;
}

.idk #commentGames::before{   /* Id shared with GAMES */
   content: "💬";
}

.idk li:nth-child(odd){
   border-top: 1px ridge #000000;
   background-color: #3a37377a;
   overflow: hidden;
}
 
.idk li:nth-child(even) {
   border-top: ridge rgb(0, 0, 0) 1px;
   background-color: #5f5e5e41;
   overflow: hidden;

}

ul.idk li:hover {
  background-color: #010101;
  cursor: grab;
}
.idk li::before{
   content: "◈";
   color: rgb(255, 255, 255);
} 

/* COMMANDS PAGE ENDS */

#bullets {
   position: relative;
   display: flex;
   align-items: flex-start;
   justify-content: space-evenly;
   background-image: var(--titleBack);
   background-size:contain;
   text-align: center;
   border:var(--borders) inset 7px;
   border-style:ridge;
   border-bottom-right-radius: 1.2rem;
   border-bottom-left-radius: 1.2rem;
   padding: 6px 0;
}

/* Button 1 */
 
.bt1 {
   appearance: none;
   background-color: #FCFCFD;
   border-radius: 4px;
   border-width: 0px;
   box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#f8f8f8 0 -3px 0 inset;
   box-sizing: border-box;
   cursor: pointer;
   display: inline-flex;
   font-family: "JetBrains Mono",monospace;
   justify-content: center;
   line-height: 1;
   list-style: none;
   overflow: hidden;
   padding: 8px 16px;
   position: relative;
   text-align: left;
   text-decoration: none;
   transition: box-shadow .15s,transform .15s;
   user-select: none;
   -webkit-user-select: none;
   touch-action: manipulation;
   white-space: nowrap;
   will-change: box-shadow,transform;
   font-size: 1rem;
 
 } 
 
 .bt1:hover {
   box-shadow: rgba(53, 0, 167, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
   transform: translateY(-2px);
   background-color: rgba(0, 0, 0, 0.788);
   color: white;
 }
 
 .bt1:active {
   box-shadow: #030303 0 3px 7px inset;
   transform: translateY(2px);
 }

 
 
 /* Button 2 */

 .bt2 {
   appearance: none;
   background-color: #FCFCFD;
   border-radius: 4px;
   border-width: 0px;
   box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
   box-sizing: border-box;
   color: #36395A;
   cursor: pointer;
   font-family: "JetBrains Mono",monospace;
   justify-content: center;
   line-height: 1;
   list-style: none;
   overflow: hidden;
   padding: 8px 16px;
   position: relative;
   text-align: left;
   text-decoration: none;
   transition: box-shadow .15s,transform .15s;
   user-select: none;
   -webkit-user-select: none;
   touch-action: manipulation;
   white-space: nowrap;
   will-change: box-shadow,transform;
   font-size: 1rem;
 }  
 
 .bt2:hover {
   box-shadow: rgba(53, 0, 167, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
   transform: translateY(-2px);
   background-color: rgba(0, 0, 0, 0.788);
   color: white;
 }
 
 .bt2:active {
   box-shadow: #030303 0 3px 7px inset;
   transform: translateY(2px);
 }
   
 /* Button 3 */

 .bt3 {
   appearance: none;
   background-color: #FCFCFD;
   border-radius: 4px;
   border-width: 0px;
   box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
   box-sizing: border-box;
   color: #36395A;
   cursor: pointer;
   font-family: "JetBrains Mono",monospace;
   line-height: 1;
   list-style: none;
   overflow: hidden;
   padding: 8px 16px;
   text-align: left;
   text-decoration: none;
   transition: box-shadow .15s,transform .15s;
   user-select: none;
   -webkit-user-select: none;
   touch-action: manipulation;
   white-space: nowrap;
   will-change: box-shadow,transform;
   font-size: 1rem;
 }  


 .bt3:hover {
   box-shadow: rgba(53, 0, 167, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
   transform: translateY(-2px);
   background-color: rgba(0, 0, 0, 0.788);
   color: white;
 }
 
 
 .bt3:active {
   box-shadow:  #030303 0 3px 5px inset;
   transform: translateY(2px);
 }
   
 /* Button 4 */

 .bt4 {
   appearance: none;
   background-color: #FCFCFD;
   border-radius: 4px;
   border-width: 0px;
   box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
   box-sizing: border-box;
   color: #36395A;
   cursor: pointer;
   font-family: "JetBrains Mono",monospace;
   line-height: 1;
   list-style: none;
   overflow: hidden;
   padding: 8px 16px;
   position: relative;
   text-align: left;
   text-decoration: none;
   transition: box-shadow .15s,transform .15s;
   user-select: none;
   -webkit-user-select: none;
   touch-action: manipulation;
   white-space: nowrap;
   will-change: box-shadow,transform;
   font-size: 1rem;
 }  

 
 .bt4:hover {
   box-shadow: rgba(53, 0, 167, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
   transform: translateY(-2px);
   background-color: rgba(0, 0, 0, 0.788);
   color: white;
 }
 
 .bt4:active {
   box-shadow: #030303 0 3px 5px inset;
   transform: translateY(2px);
 }

 /* Defalul Button color */
 #b{
   background-color: #131313;;
   color: white;
 }

 .special {
   background-color: #131313;;
   color: white;
}



 #slide1:checked ~ #controls label:nth-child(2),
 #slide2:checked ~ #controls label:nth-child(3),
 #slide3:checked ~ #controls label:nth-child(4),
 #slide4:checked ~ #controls label:nth-child(1) 
 
 
 #slide4:checked ~ #controls label:nth-last-child(2),
 #slide1:checked ~ #controls label:nth-last-child(3),
 #slide2:checked ~ #controls label:nth-last-child(4),
 #slide4:checked ~ #controls label:nth-last-child(1)

#slide:checked{
   position: relative;
}


/* ALL QUARRIES */

@media(max-width: 900px)
{
   .idk
   {
      flex: 1 1 100%;
   }
   .idkGames
   {
      grid-column: 1 / 1;
      width: 100vw;
   }
   .shares
   {
      flex-direction: column;
   }
   .shopList
   {
      justify-content: left;
   }
   

}

@media (max-width: 676px) 
{
   #channel
   {
   flex-grow: 1;
   text-wrap: wrap;
   }
   #logoImg
   {
    position: relative;
   }
   #logo
   {
      max-width: 94.5vw;
      flex-wrap: nowrap;
      flex-grow: 1;
   }  
   #socials
   {
   padding-top: 6px;
   flex-grow: 1;
   align-items: center;
   justify-content: space-around;
   }
   #slider
   {
      margin: 0;
      margin-bottom: 5px;
   }  
   #chat-messages
   {
      overflow: visible;
   }
   .video-background
   {
      display: none;
   }
   body 
   {
      background-image: var(--widgetBack);
   }

}


@media (max-width: 430px) {
   .slide-listGames {
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   }
   .wrapAll
   {
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); 
   }
}