div, ul, li, p, ol, dd, dt, dl, a, footer, pre {
  margin: 0px;
  padding: 0px;
  list-style: none outside none;
  color: black;
  text-decoration: none;
  
}

@view-transition {
  navigation: auto;
}

html {
  scroll-behavior: smooth;
} 

body{
  list-style: none outside none;
  text-decoration:none;
  padding:0px;
  margin:0px;
  overflow-x:hidden;
  z-index: -1;
  width:  100vw;
  align-items: left;
  text-align: center;
}

.bgi1 {background-image:url(vimg/1.png);}
.bgi2 {background-image:url(vimg/2.png); }
.bgi3 {background-image:url(vimg/3.png);}
.bgi4 {background-image:url(vimg/4.png);}
.bgi5 {background-image:url(vimg/5.png);}
.bgi6 {background-image:url(vimg/6.png);}
.bgi7 {background-image:url(vimg/7.png);}

.bgi1, .bgi2, .bgi3, .bgi4, .bgi5, .bgi6, .bgi7 {
  background-repeat: no-repeat;
  position: relative;
  display: inline-block;
  background-size: cover;
  width: 97vw;
  overflow-x: hidden;
  

}

.bgi1 {background-position: center top; }
.bgi2 {background-position: center top; }
.bgi3 {background-position: center top; }
.bgi4 {background-position: left top; }
.bgi5 {background-position: center top;}
.bgi6 { background-position: right bottom;}
.bgi7 { background-position: 15% bottom;}

/* COLORS*/
#myBtn, details, details p, .flex-cont div a, a.vprinc, #myBtn, summary, a.proced, .vs3 p, table, .blkinstru p, .blkinstru { color: whitesmoke;}
 { border: 0.1rem solid whitesmoke; border-radius: 8px; border-bottom: 0.35rem solid whitesmoke;}


#myBtn:hover, summary:hover, a.proced:hover, a.proced:active { color: dimgray;}
#myBtn:hover, #myBtn:active, details:hover, details:active, .proced:hover, .proced:active {border-radius: 3px; background: whitesmoke;}

a.vprinc {border-bottom: 0.35rem solid whitesmoke; border-radius: 8px; background-color:rgba(255,255,255,0.65); color: black; }
a.vprinc p {color: black;}
a.vprinc:hover, a.vprinc:active {background-color:rgba(0, 0, 0, .25); color: whitesmoke;}
a.vprinc:hover p, a.vprinc:active p {color: whitesmoke;}

.flex-cont div {  border-radius: 3px;   color:whitesmoke;}
.flex-cont div:hover, .flex-cont div:active, .topo:hover, .topo:active { border: 1px solid whitesmoke; border-bottom: 0.15rem solid whitesmoke;}
a .flex-i1 { border-bottom: 0.15rem solid whitesmoke;}
 #myBtn, details{background-color:rgba(0, 0, 0, .99);}
tr{background: #505050;} 
td:first-child, tr:first-child {background-color: DarkGray; color: black;}
td {padding:2px 5px 2px 5px;}

.blktexto, pre {color: black;}
.topo {border-bottom: 0.15rem solid whitesmoke; border-radius: 5px;  background-color: rgba(0, 0, 0, 0.99);}

details[open]{ border-radius: 8px; background-color: rgba(0, 0, 0, 0.84); border: solid 1px dimgray;}
body {background-color: black;}

details, #myBtn {border-radius: 3px;}

/* fonts*/

#myBtn, details, .flex-cont a, .vs3 p, table, .blkinstru {
  font-family: "Sometype Mono", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
    font-size: 1.6em;
  border: none;
  line-height: 1.6em;
}

#myBtn  {font-size: 1.1em;}
summary {font-size: 1.4em;}

details[open] p {font-size: 0.7em; line-height: 1.5em;}
@media (max-width: 720px) { details[open] p {font-size: 0.6em; line-height: 1.6em;}  }

.blktexto, pre, a.vprinc { font-family: "Caveat", cursive; font-weight: 400; font-style: normal; }

a.vprinc { font-size: 500%; font-weight: 700;}

.flex-cont a { font-weight: 700; font-size: 11px;}

.flex-cont {font-size: 30px;}

table, .blkinstru {/* clamp(MIN, PREFERRED, MAX) */
  font-size: clamp(0.8rem, 1vw, 2rem);
  line-height: 1.5em;
}

.text {
  display:inline-block;
  padding-left: 1.5%;
  padding-right: 1.5%;
  opacity: 1;
}

.text2 {
  display:inline-block;
  padding-left: 1.5%;
  padding-right: 1.5%;
line-height: 2em;
}

.on_scroll {
transition: all 2s ease-in-out; /* Smooth transition */
transform: translateY(0) translateX(0) rotate(0deg);
opacity: 1;
}

.ani1 {
  transition: all 3s ease-in-out;
  transform: translateY(-300%) translateX(-300%) rotate(10deg);
  opacity: 0;
}

.ani2{
  transition: all 3s ease-in-out;
  transform:  translateY(-300%) translateX(300%) rotate(-20deg);
  opacity: 0;
}

.ani3 {
  transition: all 3s ease-in-out;
  transform:  translateY(-300%) translateX(-300%) rotate(20deg);
  opacity: 0;
}

.ani4 {
  transition: all 3s ease-in-out;
  transform:  translateY(-300%) translateX(-300%) rotate(-10deg);
  opacity: 0;
}

.ani5 {
  transition: all 3s ease-in-out;
  transform:  translateY(-300% ) translateX(-300%) rotate(30deg);
  opacity: 0;
}

#anim1{
animation-name:va1;
animation-duration: 1.6s;
animation-timing-function:ease-in-out;
animation-iteration-count: infinite;
}

#anim2{
animation-name:va1;
animation-duration: 1.8s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}

#anim3{
animation-name:va1;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}

@keyframes va1 {
    0%   {transform: translateY(0%);}
    50%  {transform: translateY(6%);}
    100% {transform: translateY(0%);}    
}

#random-video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
}

/* Style the button used to pause/play the video */
#myBtn{
  width: auto;
  padding: 10px 20px;
  cursor: pointer;
  float: left;
  margin: 1%;
  display: inline-block;
}

* {
  box-sizing: border-box;
}

details {
  width: auto;
  cursor: pointer;
  float: left;
  margin: 1%;
  display: inline;
}

summary { padding: 10px 20px; width: auto; width: auto; float: left; bottom: 1px;}

summary::marker {content: '*';}

details p { width: 20%; float: left; }

details[open] p {
  width: 100%;
  padding: 0vw 10vw 7vw 10vw;
  text-align: left;
}

details[open] {animation: fadeIn .6s linear forwards;}

@keyframes fadeIn {
 0% {
   opacity: 0;
 }
 100% {
   opacity: 1;
 }
}

.blktexto {
  text-align: left;
  display: inline-block;
  width: 100%;
  height: auto;
}

.blkvideo {
  text-align: center;
  display: inline-block;
  width: 100%;
  height: auto;
  padding-bottom: 10vh;
}

table {table-layout: auto; margin-top: 3vh; margin-bottom: 3vh;}

.d2tb tbody tr td:nth-child(5) {text-align: left;}

td {padding: 0.5vh 1vw 0.5vh 1vw;}

.blkinstru {
width:100%;
  text-align: center;
  display: block;
  padding-left: 5vw;
  padding-right: 5vw;
}

.instru {
  display: flex;
  flex-wrap:wrap;
  gap: 4px;
  align-items: stretch;
  justify-content: space-between;
  padding-top: 10vh;
  padding-bottom: 10vh;


}

.instru div {
  flex: 1 1 200px;
  display: flex;
  flex-wrap:wrap;
  flex-direction: row;
  color: black;
  background-color: DarkGray;
  padding: 3vh 2vw 3vh 2vw;
  text-align: left;

}

.d1tb { text-align: center; display: inline-block; }

.lazy-video {
    width: 100%;
    max-width: 600px;
}

table:first-child {width: 200px;}

pre {display: inline;}

.menu {
  display: inline-block;
  margin-bottom: auto;
  color: black;
  width: 99%;
  z-index: 1;
  height: auto;
  padding-bottom: 8px;

}

.vs {
  color: black;
  width: 100%;
  z-index: 1;
  margin-bottom: auto;
  display: block;
  align-content: center;
  text-align: center;  
}

.pb{
  display: inline-block;
  margin-right: 1vw;
  margin-left: 1vw; 
  max-width: 660px;
  float: left;
  height: 100%;
  width: 80%;
  padding-top: 2vw;
  padding-bottom: 2vw;
  max-width: 660px;
}

.pb2 {display: inline-block; width: 100%; text-align: center;  margin-bottom: 20px;}
.topo {
  color: whitesmoke;
  font-weight:700;
  font-size: 28px;
  font-family: "Sometype Mono", serif;
  padding-top: 4px;
  width: 48px; height: 36px;
  display: inline-block;
}

a.vprinc {
  padding: 5px;
  display: block;
  text-align:center;
}

.vs3 {
  height: 100%;
  align-content:end;
  display: inline-block;
  padding-bottom: 15vh;
  width: 100px;
}

.pb img { max-height:100%; max-width: 100%;}

* {box-sizing: border-box;}

.flex-cont {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3px;
  margin-left: 5%;
  margin-right: 5%;
  max-width: 356px;
  z-index: 1;

}

.flex-cont div {  min-width: 35px; min-height: 36px; padding-top: 4%; align-content: center; text-align: center;}
.flex-cont a { flex: 1;}
.flex-cont:first-child a{ padding-right: 5px;}
.flex-cont:nth-child(2) { float: right;}
.flex-cont:nth-child(2) a{ width: 94px;}

@media (max-width: 362px) {.flex-cont div  a{font-size:10px; font-weight: 700;} .flex-i1 {flex: 75%;} details[open] p {padding-right: 0%;} .blktexto {font-size: 7vw; line-height: 10.5vw;}  pre {word-spacing: -1.3vw;}}/* Extra small devices (phones, 600px and down) */
@media (min-width: 362px) {.flex-cont div  a{font-size:10px; font-weight: 700;} .flex-i1 {flex:2;} details[open] p {padding-right: 7%;} .blktexto {font-size: 5.6vw; line-height: 9.3vw; padding-left: 6vw;} pre {word-spacing: -0.85vw;}}/* Extra small devices (phones, 600px and down) */
@media (min-width: 600px) {.flex-cont div  a{font-size:11px;}  details[open] p {padding-right: 25%;} .blktexto {font-size: 4.5vw; line-height: 6.7vw;} pre {word-spacing: -0.6vw;} } /* Small devices (portrait tablets and large phones, 600px and up) */
@media (min-width: 768px) {.flex-cont div  a{font-size:11px;}  details[open] p {padding-right: 35%;} .blktexto {font-size: 3.7vw; line-height: 6.1vw; padding-left: 20vw;} pre {word-spacing: -0.5vw;} }  /* Medium devices (landscape tablets, 768px and up) */
@media  (min-width: 992px) {.flex-cont div  a{font-size:12px;}  details[open] p {padding-right: 45%;}  .blktexto {font-size: 3vw; line-height: 4.5vw; } pre {word-spacing: -0.2vw;}} /* Large devices (laptops/desktops, 992px and up) */
@media (min-width: 1200px) {.flex-cont div  a{font-size:12px;}  details[open] p {padding-right: 52%} .blktexto {font-size: 2.4vw; line-height: 3.6vw;} pre {word-spacing: 0vw;}}  /* Extra large devices (large laptops and desktops, 1200px and up) */
@media (min-width: 1900px) {details[open] p {padding-right: 58%;} }

details, button, a, summary {
    -webkit-tap-highlight-color: transparent;
}