:root {
  --text-color: #f8f8f2;
  --text-accent-color: #ff5555;
  --bg-1: #648db3;
  --bg-2: #649ab3;
  --bg-3: #64b385;
  --username-color: #bd93f9;
  --terminal-bg: #282a36;
  --terminal-header-bg: #6272a4;
}

/*#051937 #008793 #a8eb12*/

body{
  background: var(--bg-3); /* fallback for old browsers */
  background: -webkit-linear-gradient(
                  to right,
                  var(--bg-1),
                  var(--bg-2),
                  var(--bg-3)
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
                  to right,
                  var(--bg-1),
                  var(--bg-2),
                  var(--bg-3)
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 
  height: 100vh;
  overflow-y: hidden;
  margin: 0;
}


.animateBg{
  background-size: 300% 300%;
  animation: gradient 15s ease infinite;
}

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

#icon{
  display: none;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  padding: 25px 15px 2px 15px;
}

.active{
  cursor: grabbing !important;
  user-select: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

#icon:hover{
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 5px;
}

svg{
  transform: scale(2.5);
  margin: 0;
  padding: 0;
}

.legend{
  color: var(--text-color);
  padding: 0;
  font-family: 'Poppins', sans-serif;
}

.main{
  background-color: var(--terminal-bg);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: calc(50vh + 10px);
  min-width: clamp(300px,90vw, 800px);
  border-radius: 5px;
  transition: 0.3s ease;
  scrollbar-color: grey transparent;
  scrollbar-width: thin;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px 0px,
    rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
}

/* width */
::-webkit-scrollbar {
  width: 6px;
  border-radius: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  display: none!important;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

@media only screen and (max-width: 680px) {
  .main {
    background-color: var(--terminal-bg);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: calc(80vh + 10px);
    width: 95vw;
    border-radius: 5px;
    transition: 0.3s ease;
    
    box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px,
      rgba(0, 0, 0, 0.1) 0px 2px 4px 0px,
      rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
    overflow-y: hidden!important;
  }

  #popup{
    width: 75vw!important;
  }

  pre{
    transform: scale(0.5) translateX(-150px);
  }

  .terminal{
    overflow-y: scroll!important;
    height: calc(80vh - 40px)!important;
  }

  table{
    font-size: 10px!important;
  }
  .result{
    margin: 0!important;
  }
  .extendmain{
    height: calc(50vh + 10px)!important;
  }
  
  .extendcontent{
    height: calc(50vh - 40px) !important;
  }

  .ls{
    display: grid;
    grid-template-columns:50% 50%!important;
    grid-gap: 10px 0;
  }

}

.linealign{
  margin-left: -50px;
}

.extendmain{
  height: calc(80vh + 10px);
}

@media only screen and (min-width: 601px){
  .extendcontent{
  height: calc(80vh - 40px)!important;
  }
}

@media only screen and (max-width: 400px){
  .popupinfo{
  font-size: 12px!important;
  }
}

@media only screen and (max-width: 417px){
  .banner-title{
    font-size: 8.8px!important;
  }
}

@media only screen and (min-width: 418px) and (max-width: 502px){
  .banner-title{
    font-size: 10px!important;
  }
}

@media only screen and (min-width: 503px) and (max-width: 600px){
  .banner-title{
    font-size: 11px!important;
  }
}


#banner{
  background-color: var(--terminal-header-bg);
  height: 30px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  position: relative;
}

.banner-title{
  margin: 0;
  font-size: 12px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  color: var(--text-color);
}

#languge{
  margin: 0;
  font-size: 12px;
  top: 50%;
  right: 0;
  transform: translate(-50%, -50%);
  position: absolute;
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  color: var(--text-color);
}

.banner-button-close{
  height: 10.5px;
  width: 10.5px;
  border-radius: 50%;
  position: relative;
  top: 6px;
  left: 8px;
  display: inline-block;
  cursor: pointer;
  background-color: #ff3b47;
}

.banner-button-reduce{
  height: 10.5px;
  width: 10.5px;
  border-radius: 50%;
  position: relative;
  top: 6px;
  left: 13px;
  display: inline-block;
  /*cursor: pointer;*/
  background-color: #ffc100;
}

.banner-button-extend{
  height: 10.5px;
  width: 10.5px;
  border-radius: 50%;
  position: relative;
  top: 6px;
  left: 18px;
  display: inline-block;
  background-color: #00d742;
}

#banner div:nth-child(3){
  cursor: pointer;
}

.terminal{
  padding: 10px;
  font-family: "Ubuntu Mono", monospace;
  color: var(--text-color);
  height: calc(50vh - 40px);
  overflow-y: scroll;
  overflow-x: hidden;
  transition: 0.3s ease;
}

.title{
  margin: 0;
  padding: 0;
}

pre{
  margin: 0;
}

code{
  color: var(--text-accent-color);
  font-size: 14px;
}

.commande{
  display: inline-block;
  color: var(--username-color);
  font-family: "Ubuntu Mono", monospace;
  font-size: 15px;
  margin: 15px 10px 15px 0;
  padding: 0;
}

.resultwrite{
  display: inline-block;
  color: var(--text-color);
  margin: 0 0 0 10px;
}

.input{
  display: inline-block;
  background: none;
  border: none;
  font-family: "Ubuntu Mono", monospace;
  color: var(--text-color);
  outline: none;
  font-size: 15px;
  margin: 0;
  padding: 0;
  width: calc(100% - 250px);
}

.themeinput{
  width: calc(100% - 320px) !important;
}

.rootinput{
  width: calc(100% - 170px) !important;
}

#input0{
  margin-left:-8px;
}

.notfound, ul{
  margin: 0;
}

.result{
  font-family: "Ubuntu Mono", monospace;
  margin: 0 0 0 15px;
}

.ls{
  display: grid;
  grid-template-columns:repeat(auto-fill, minmax(20px,200px));
  grid-gap: 10px 0;
}

table{
  border: 1px dashed var(--text-color);
  padding: 10px;
}

th{
  color: var(--username-color);
  padding: 5px;
}

td{
  color: var(--text-color);
  font-weight: 600;
  border-top: 1px solid var(--text-color);
  padding: 5px;
}

.description{
  width: 100%;
}

.center{
  text-align: center;
}

a{
  color: var(--text-accent-color);
}

.github-corner svg{
	position:absolute;
	right:30px;
	top:30px;
  mix-blend-mode: darken;
  color: #eeeeee;
  fill:#171515;
	clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.github-corner:hover .octo-arm{
	animation:octocat-wave .56s;
}
@keyframes octocat-wave{
	0%, 100%{
		transform:rotate(0);
	}
	20%, 60%{
		transform:rotate(-20deg);
	}
	40%, 80%{
		transform:rotate(10deg);
	}
}

.ligthen{
  mix-blend-mode: screen!important;
  color: #353535!important;
  fill:#F2F2F2!important;
}

.glassmorphism{
  /* From https://css.glass */
  background: #ffffff33;
  box-shadow: 0 4px 30px #0000001a;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid #ffffff4d;
}

#filter{
  position: absolute;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: #282a36dc;
}

#popup{
  position: absolute;
  width: clamp(450px,40vw, 600px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px,
      rgba(0, 0, 0, 0.1) 0px 2px 4px 0px,
      rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
  border-radius: 5px;
}

@keyframes fadeout{
  to{
    top: 48%;
    opacity: 0;
  }
}

@keyframes fadeoutfilter{
  to{
    opacity: 0;
  }
}

#bannerpopup{
  height: 30px;
  width:100%;
  background-color: #bbb;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.banner-title-popup{
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translate(-50%, -50%);
}

#popupcontent{
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: rgb(219, 219, 219);
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: flex-start;
  justify-content: center;
}

#settings{
  transform: scale(0.5);
}

.btn{
  grid-column: 2;
  margin: 0 0 20px 0;
}

#btn-design{
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  background-color: rgb(250, 250, 250);
  padding: 3px 8px;
  border-radius: 8px;
  border: 1px solid #bbb;
}

#btn-design:hover{
  background-color: rgb(121, 121, 121);
  color: #FFFFFF;
}

.popupinfo{
  text-align: justify;
  font-family: 'Poppins', sans-serif;
  align-self: center;
  font-size: 14px;
  margin-right: 30px;
}

u{
  text-decoration-color: #ff5555;
}

.display{
  display: none;
}

#french, #english{
  cursor: pointer;
}

#french:hover, #english:hover{
  color : var(--text-accent-color);
}