@font-face{
  font-family:EnterCommand;
  src:url(https://rockeydoggy.github.io/cssfonts/EnterCommand/EnterCommand.ttf);
}
@font-face{
  font-family:Lato;
  src:url(https://rockeydoggy.github.io/cssfonts/Modern/Lato-Regular.ttf);
}
@font-face{
  font-family:Modern M;
  src:url(https://rockeydoggy.github.io/cssfonts/Modern%20/modern%20M.ttf);
}
@font-face{
  font-family:Modern Sans;
  src:url(https://rockeydoggy.github.io/cssfonts/Modern/ModernSans-Light.otf);
}

body{
  width:100%;
  height:100%;
  position:fixed;
  background:#080808;
  color:#FFF;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0;
}

/*Fonts*/
h1{
  margin:0vw 0 0.3vw 0;
  font-family:"Lato", "Modern M", 'Modern Sans';
  font-weight:bold;
  text-align:left;
  white-space:nowrap;
  overflow-x:hidden;
  text-overflow:ellipsis;
  font-size: clamp(17px, 4rem ,1.3vw);
}
h1:hover{
  overflow-x:visible;
  text-overflow:initial;
}

h2{
  max-height:2em;
  overflow-y:auto;
  text-overflow:ellipsis;
  margin:0 0vw 0 0.5vw;
  font-family:"EnterCommand";
  font-weight:lighter;
  font-style:italic;
  font-size:clamp(16px, 21px ,1.5vw);
  color:#AAA;
}
h2::-webkit-scrollbar{
  display:none;
}

h3{
  margin:1vw 0 0;
  text-align:left;
  font-family:Calibri;
  font-weight:lighters;
  font-size:clamp(12px, 18px ,0.9vw);
}

h4{
  margin:1vw 0vw 0vw 0vw;
  padding:0 0 0 0.5vw;
  border-bottom:1px groove #333;
  font-family:Modern M, Modern Sans;
  font-weight:bold;
  letter-spacing:0.1vw;
  text-align:left;
  white-space:nowrap;
  overflow-x:hidden;
  text-overflow:ellipsis;
  font-size:clamp(16px, 5rem ,1.3vw);
}

#TopPanel{
  width:100%;
/*   border:dashed 1px #F45; */
  position:fixed;
  top:0;
  text-align:center;
}

#RightPanel{
  width:70vw;
  max-height:95%;
  overflow-y:auto;
  transform:rotatey(180deg);
/*   border:dashed 1px #00F; */
  padding:0;
  margin:0 2vw;
/*   background:linear-gradient(100deg, #111, #121212); */
  text-align:center;
}
#RightPanel::-webkit-scrollbar{
  width:0.2vw;
  min-width:1px;
  margin:0;
  background:#0001;
}
#RightPanel::-webkit-scrollbar-thumb{
  background:#55F;
  box-shadow: 0px 0 9px 10px #55F;
/*   border-radius:10px; */
}


#RightPanel h1{
  transform:rotatey(180deg);
  position:sticky;
  top: 0vw;
  background:#080808;
  box-shadow:2px 2px 5px #000;
  padding:0.3vw 2vw;
  font-size:clamp(20px, 1.4rem, 1.8vw);
  z-index:10;
}

#CenterPanel{
  width:0vw;
}

#LeftPanel{
  width:30vw;
  min-width:240px;
  max-height:100%;
  overflow:auto;
  background-attachment: scroll;
  background:linear-gradient(10deg, #20202088, #15151588);
  box-shadow:-1px -1px 7px #000;
/*   box-shadow:inset 1px 1px 7px #000; */
/*   margin:1vw; */
}

#LeftPanel::-webkit-scrollbar{
  width:0.3vw;
  min-width:5px;
  background:#000;
}
#LeftPanel::-webkit-scrollbar-thumb{
  background:#999;
  border-radius:10px;
}

#LeftPanel div{
/*   margin:0.5vw 0; */
/*   border:1px solid #458; */
}

#LeftPanel div:nth-of-type(1){
  padding:0vw;
  margin:0;
}

#LeftPanel div:nth-of-type(1) div{
  padding:1vw 0.5vw;
  margin:0vw 0 0.5vw;
  background:#0003;
}

.removedPanel{
  max-height:1vw;
  overflow:hidden;
  box-shadow:inset 2px 2px 5px #000;
  opacity:0.6;
  text-decoration:line-through;
  color:#F55;
  transition:all ease-in-out 0.3s;
  cursor:not-allowed;
}
.removedPanel img{
  filter:saturate(0%);
}
.removedPanel:hover{
  max-height:20vw;
}

#LeftPanel div:nth-of-type(2){
  margin:0.5vw 0.3vw;
}

#LeftPanel div:nth-of-type(2) div{
  margin:1vw 0.5vw;
  padding:1vw 1.5vw;
  background:#3335;
  box-shadow:1px 1px 5px #000;
  cursor:default;
}
#LeftPanel div:nth-of-type(2) div h1{
  cursor:pointer;
}

#LeftPanel div:nth-of-type(3){
  margin:0 0vw 0 1.5vw;
}
#LeftPanel div:nth-of-type(3) div{
  margin:0.8vw 0vw;
  padding:0.5vw 1vw;
  background:#0005;
  box-shadow:inset 1px 1px 5px #000;
  opacity:0.7;
  cursor:not-allowed;
}
#LeftPanel div:nth-of-type(3) div h1{
  cursor:pointer;
}
#LeftPanel div:nth-of-type(4) div img{
  float:left;
  margin:0 0.5vw;
}
#LeftPanel div:nth-of-type(4) div h1 a{
  text-decoration:none;
  color:#EAF;
  font-family:"Lato", "Modern M", 'Modern Sans';
  font-size: clamp(17px, 4rem ,1.3vw);
}
#LeftPanel div:nth-of-type(4) div h1 a:hover{
  text-shadow:0 0 8px #91F;
}

#LeftPanel div:nth-of-type(4) div h3 a{
  text-decoration:none;
  color:#F93;
  font-size:1vw;
}
#LeftPanel div:nth-of-type(4) div h3 a:hover{
  text-shadow:0 0 8px #F91;
}
#LeftPanel div:nth-of-type(4) div h2{
  height:initial;
  max-height:initial;
  overflow:visible;
}
#LeftPanel div:nth-of-type(4) div h3{
  margin:0 1vw 0 0;
  text-align:right;
}

#LeftPanel div{
  margin:1vw 0vw 0vw 1vw;
/*   padding:0.2vw 1vw; */
/*   background:none; */
}
#LeftPanel div img{
  width:4vw;
  min-width:50px;
  height:4vw;
  min-height:50px;
  margin:0;
  float:right;
  box-shadow:2px 2px 5px #000;
  border:none;
  object-fit: cover;
  object-position: center center;
}
#LeftPanel div div{
  padding:0.5vw 1vw;
/*   background:#3335; */
}
#LeftPanel div div button:nth-of-type(1){
  padding:0 0.3vw;
  margin:0.5vw 0 0;
  background:#5F5;
  border:none;
  border-radius:0.2vw;
  box-shadow:0 0 6px #0F0;
  font-family:calibri;
  font-size:clamp(14px, 1rem, 0.9vw);
  font-weight:bold;
  color:#030;
  cursor:pointer;
}
#LeftPanel div div button:nth-of-type(1)::before{
  content:'Baixar';
}
#LeftPanel div div button:nth-of-type(1)::after{
  content:' ';
  background:#85F;
  border-radius:0px 5px 5px 0;
  box-shadow:0 0 10px #72F;
  padding:0 0.2vw;
  position:relative;
  left:0.4vw;
}


#updateVersion{
  position:fixed;
  bottom:0;
  left:0vw;
  opacity:0.8;
  text-align:right;
  pointer-events:none;
  cursor:pointer;
}
#updateVersion input{
  outline:none;
  border:none;
  border-radius:5px;
  margin:0;
  background:none;
  color:#779;
  text-align:center;
  font-family:Calibri;
  font-weight:bold;
  font-size:clamp(11px, 1.5rem, 1.5vw);
  pointer-events:auto;
}
#updateVersion input:focus{
/*   background:linear-gradient(90deg, #85F 0%, #0000 20%, #0000 80%, #85F); */
  box-shadow:6px 0px 8px -3px #62F, -6px 0px 8px -3px #62F, inset 8px 0 8px -3px #62F, inset -8px 0 8px -3px #62F;
  text-shadow:0 0 5px #62F;
}
#updateVersion p{
  margin:0;
  opacity:0.5;
  font-family:calibri;
  font-size:clamp(1vw, 0.6rem, 12px);
}

#UpdateInformation{
  width:100%;
  position:fixed;
  top:-5vw;
  color:#FFF;
  transition:all ease-in-out 0.1s;
}
#UpdateInformation p{
  width:20%;
  padding:0.2vw;
  border-radius:0px 0px 8px 8px;
  border:2px #5F5 solid;
  border-top:none;
  text-align:center;
  margin:0 auto;
  background:#1115;
  box-shadow:2px 2px 6px #000;
  font-family:calibri;
  font-size:clamp(16px, 1rem, 1.3vw);
  opacity:0.7;
  cursor:pointer;
}

#abc{
  width:100%;
  height:20px;
  border:solid 1px #488;
}

#videoYoutube{
  width:95%;
  max-width:820px;
  height:40vw;
  max-height:380px;
  opacity:0.3;
  transform:rotatey(180deg);
  padding:1vw;
  margin:0 auto;
/*   border:dotted 1px #5F5; */
  z-index:-1;
}
#videoYoutube iframe{
  width:100%;
  height:100%;
/*   border:dotted 1px #FF5; */
  z-index:-1;
}