@font-face {
  font-family: 'CatV6x129Normal';
  src: url('./fonts/CatV6x129Normal.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Scroll bar  */
::-webkit-scrollbar{
  width:10px; 
  background-color: #242424;
}
::-webkit-scrollbar-thumb{ 
  background-color:#050505; 
}

* {
  margin: 0;
  padding: 0;
}
/* Helper classes */
.hidden { opacity: 0; }
.visible { opacity: 1; }
/* Main HTML */
html {
  /* Font properties */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'CatV6x129Normal';
  text-transform:uppercase;
  font-weight: normal;
  font-style: normal;
  line-height: 0.9rem;
  font-size: 3rem;
  color: #d3d3d3;
  /* Page properties */
  background-color: #000;        
  margin: 0;
  padding: 0;
  box-sizing: border-box;        
  overflow: hidden;
}


.link, a {
  text-decoration: none;
  color: #d3d3d3;
  cursor: pointer;
}
.link:hover, a:hover {
  background-color: #d3d3d3;
  color: #000;
}
p {
  margin: 0;
  padding: 0;
  line-height: 0.9rem;
}
#root, #overlay, #bluescreen {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  left: 0;
  opacity: 1;
  transition: opacity 0.3s;
}

#bluescreen {
  background-color: blue;
  opacity: 0;
  transition: opacity 0.25s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;

}

.fullscreenicon {
  width: 34px;
  height: 34px;
  display: inline-block;
  background-color:#d3d3d3;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='2 -2 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-maximize-2'%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cpolyline points='9 21 3 21 3 15'%3E%3C/polyline%3E%3Cline x1='21' y1='3' x2='14' y2='10'%3E%3C/line%3E%3Cline x1='3' y1='21' x2='10' y2='14'%3E%3C/line%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='2 -2 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-maximize-2'%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cpolyline points='9 21 3 21 3 15'%3E%3C/polyline%3E%3Cline x1='21' y1='3' x2='14' y2='10'%3E%3C/line%3E%3Cline x1='3' y1='21' x2='10' y2='14'%3E%3C/line%3E%3C/svg%3E");

}

.closefullscreenicon {
  width: 34px;
  height: 34px;
  display: inline-block;
  background-color:#d3d3d3;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='2 -2 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-minimize-2'%3E%3Cpolyline points='4 14 10 14 10 20'%3E%3C/polyline%3E%3Cpolyline points='20 10 14 10 14 4'%3E%3C/polyline%3E%3Cline x1='14' y1='10' x2='21' y2='3'%3E%3C/line%3E%3Cline x1='3' y1='21' x2='10' y2='14'%3E%3C/line%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='2 -2 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-minimize-2'%3E%3Cpolyline points='4 14 10 14 10 20'%3E%3C/polyline%3E%3Cpolyline points='20 10 14 10 14 4'%3E%3C/polyline%3E%3Cline x1='14' y1='10' x2='21' y2='3'%3E%3C/line%3E%3Cline x1='3' y1='21' x2='10' y2='14'%3E%3C/line%3E%3C/svg%3E");

}


.link:hover .fullscreenicon {
  background-color:#000;

}

#infoscreen div {
  width: 60%
}
#bluescreen .notice {
  width: 50%;
  line-height: 0.9rem;
}

#bluescreen .displayicon {
  width: 70px;
  height: 70px;
  display: inline-block;
  background-color:#d3d3d3;
  -webkit-mask-image:  url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='70px' height='70px' stroke-width='1.5' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' color='%23000000'%3E%3Cpath d='M12 11v3M12 18.01l.01-.011' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M2 20V9a2 2 0 012-2h16a2 2 0 012 2v11a2 2 0 01-2 2H4a2 2 0 01-2-2z' stroke='%23000000' stroke-width='1.5'%3E%3C/path%3E%3Cpath d='M8.5 2.5L12 6l3.5-3.5' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
    mask-image:   url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='70px' height='70px' stroke-width='1.5' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' color='%23000000'%3E%3Cpath d='M12 11v3M12 18.01l.01-.011' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M2 20V9a2 2 0 012-2h16a2 2 0 012 2v11a2 2 0 01-2 2H4a2 2 0 01-2-2z' stroke='%23000000' stroke-width='1.5'%3E%3C/path%3E%3Cpath d='M8.5 2.5L12 6l3.5-3.5' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
  }
#overlay {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  letter-spacing: 0.01rem;
}
  #overlay header {
    display: flex;
    justify-content: space-between;
    align-items:flex-start;
  }
    #overlay header p:last-child {
      text-align: right;
    }
  
    #overlay main {
      opacity: 0;
      text-align: center;
      /* padding: 0 20%; */
      margin:  0 auto;
      max-width: 80%;
      transition: opacity 0.3s;
      pointer-events: none;

    }

 
  #overlay footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  #overlay footer #close {
    display: none;
  }

  #overlay footer div {
    text-align: right;
  }
.blinking {
  opacity: 0;
}
.note {
  /* width: 0.28rem;
  height: 0.6rem; */
  width: 15px;
  height: 30px;
  display: inline-block;
  background-color:#d3d3d3;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -20 100 200'%3E%3Cpolygon points='55.7 0 55.7 128.6 12.9 128.6 0 141.4 0 167.1 12.9 180 60 180 72.9 167.1 72.9 77.1 124.3 77.1 124.3 51.4 72.9 51.4 72.9 25.7 124.3 25.7 124.3 0 55.7 0'/%3E%3C/svg%3E");;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -20 100 200'%3E%3Cpolygon points='55.7 0 55.7 128.6 12.9 128.6 0 141.4 0 167.1 12.9 180 60 180 72.9 167.1 72.9 77.1 124.3 77.1 124.3 51.4 72.9 51.4 72.9 25.7 124.3 25.7 124.3 0 55.7 0'/%3E%3C/svg%3E");;
}

@media (max-width:801px) or (max-height:801px) { 
  html {
    font-size: 1.8rem;
  }
}

@media (max-width:801px)  { 
  /* tablet, landscape iPad, lo-res laptops ands desktops */ 
  html {
    font-size: 1.8rem;
  }
    #overlay, #root {
      display: none;
    }
  }