*{
  font-family: sans-serif
}


/*BG*/
.bg{
  position: relative;
  top:-400%;
  background-size: 2.5% auto;
  animation: backgroundloop 10s linear infinite
}


#bg{
  z-index: -99
}


#bgcontainer{
  overflow: hidden
}


@keyframes backgroundloop {
  0%{
    transform: translateY(0,0)
  }
  100%{
    transform: translate(-20%,20%)
  }
}


.plusport{
  width: 500%;
  height: 500%;
  z-index: -1
}


/*auxiliar body fullport*/
.fullport {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none
}


/*loading shape*/
.hexagon {
  width: 15vw;
  height: 18vw;
  background: white;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: 1.7vw solid red;
  border-shape: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  will-change: clip-path;
  animation: hexload 2s ease-in-out infinite,
    hexcolor 10s linear infinite
}


@keyframes hexload{
  0%{
    transform: rotate(0deg)
  }
  10%{
    transform: rotate(0deg)
  }
  100%{
    transform: rotate(360deg)
  }
}


@keyframes hexcolor{
  0% {border-color: red}
  5% {border-color: red}
  20%{border-color: deeppink}
  25%{border-color: deeppink}
  40%{border-color: yellow}
  45%{border-color: yellow}
  60%{border-color: cyan}
  65%{border-color: cyan}
  80%{border-color: mediumpurple}
  85%{border-color: mediumpurple}
}


.hexagon:active{
  background: black
}


.loadcontainer{
  display: flex;
  align-items: center;
  justify-content: center
}


/*Title*/
#title{
  color: #9300ca;
  font-size: 7.4vh;
  position: relative;
  opacity: 100;
  top: 3%;
  animation: title 4s ease-in-out infinite
}


@keyframes title{
  0%{transform: scale(0.9)}
  50%{transform: scale(1.1)}
  100%{transform: scale(0.9)}
}


#titlesplash{
  font-size:2vh;
  font-weight: bold;
  position: relative;
  top: -2.2vh;
  left: 8vh;
  color: deeppink
}


/*report window*/
.list{
  background: #0005;
  width: 100%;
  height: 80%;
  position: absolute;
  top: 20%;
  overflow: scroll;
}
@media screen (min-width: 768px){
  .list{
    font-size: 50%
  }
}

th{
  color: white;
  border-left: 0.1rem solid white;
  border-right: 0.1rem solid white;
  background: #0003
}

report{
  color: white;
  margin-top: 1vh;
  background: #0006;
  border: 2.5px solid white;
  border-top: 0vw solid #0000;
  border-bottom: 0vw solid #0000;
  border-radius: 8px;
  width: 90%;
  height: 2rem;
  display: flex;
  align-items: center;
  padding: 0;
  cursor: pointer
}


user{
  margin-left: 2%
}
type{
  margin:0 auto
}
extra{
  margin: 0 auto
}
ver{
  margin: 0 auto
}
date{
  margin-left: auto;
  margin-right: 2%
}


content{
  background: #11111120;
  display: block;
  color: white;
  width: calc(90vw - 10px);
  height: 0vh;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  position: relative;
  overflow: hidden;
}


rpt{
  pointer-events: all
}