/* 
    Spheri © Lucas Fabian Olivero - 2023
    Spheri is a program for visualising and interacting with spherical perspectives. It allows users to navigate equirectangular and cubical perspective inputs, making an on-the-fly conversion to a virtual reality environment.

    The program has been developed and coded by Lucas Fabian Olivero (https://www.lufo.art/about) using Three.js (https://threejs.org) and MediaPipe (https://mediapipe-studio.webapps.google.com). The code uses some parts from MediaPipe Authors' example https://codepen.io/mediapipe-preview/pen/gOKBGPN

    PRIVACY NOTES
    The data captured by the camera is neither permanently nor temporarily stored on the main hosting website, neither for statistical nor for any other purposes. 

    For any doubts or information, please contact me at lufo@lufo.art

    NOTES AND CHANGELOG
    https://spheri.art/changelog.txt
*/


body {
  font-family:sans-serif;
  
  color: #3d3d3d;
  --mdc-theme-primary: #007f8b;
  --mdc-theme-on-primary: #f1f3f4;
  
  background: #ffffff;
}

p {
    font-size: 12px;
}

h1 {
  color: #007f8b;
}

video {
  clear: both;
  display: block;
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  width: 100%;
}

header,
footer {
  clear: both;
}

.videoView {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 20%;
}

#outputCanvas {
  position: absolute;
  right: 0px;
  top: 0px;
}

.canvas {
  z-index: -1;
  position: absolute;
  pointer-events: none;
  left: 50px;
  top: 50px;
}
.availableSoon {
  color:rgb(188, 188, 188);
}

.column-1 {
  vertical-align: top;
  width: 20%;
}

#webcam {
  width: 100%;
}

.invisible {
  visibility: hidden;
}

.block-A, .block-B, .block-C, .block-D {
    margin: 3%;
}

.camButton {
  margin: 1.5%;
  border-radius: 8px;
  border-style: none;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  flex-shrink: 0;
  font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
  font-size: 16px;
  font-weight: 500;
  height: 3rem;
  padding: 0 1.2rem;
  text-align: center;
  text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
  transition: all .5s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.camButton:hover {
  box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
  background-image: linear-gradient(92.88deg, #7984aa 9.16%, #877ec2 43.89%, #afa1d7 64.72%);
  transition-duration: .1s;
  transform: scale(1.1);
}

.camButton.active {
  background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
  color: #ffffff; 
}

.menuButton {
  border-radius: 8px;
  border-style: none;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  flex-shrink: 0;
  font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
  font-size: 16px;
  font-weight: 500;
  height: 6rem;
  padding: 0 1.2rem;
  text-align: center;
  text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
  transition: all .5s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  box-sizing: border-box;
  width: 60%;
  text-align: center;
  font-size: inherit;
  cursor: pointer;
  color: #fff;
}

.menuButton:hover {
  box-shadow: rgba(115, 156, 125, 0.5) 0 1px 30px;
  background-image: linear-gradient(92.88deg, #bce4c6 19.16%, #8cdbce 43.89%);
  transition-duration: .01s;
  transform: scale(1.1);
}

.menuButton.active {
  background-image: linear-gradient(92.88deg, #45b55f 19.16%, #086a5a 43.89%);
  color: #ffffff; 
}

ul {
  list-style: none;
  overflow: hidden;
  transition: height ease .4s;
  padding: 0;
  height: 0;
}

.resizable-table {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  text-align: center;
}

.resizable-column {
  display: table-cell;
  overflow: hidden;
  border-right: 2px solid #ffffff; 
  border-left: 2px solid #ffffff; 
}

.resizer {
  cursor: col-resize;
  width: 2px;
  background-color: #7d7d7d;
  height: 100%;
  display: table-cell;
}
th {
  font-weight: normal;
}

#fps{
  vertical-align: middle;
  margin-bottom: 2.5%;
}

input {
  width: 80%;
}

.screenshot {
  width: 100%;
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
}

.cameraCanvas {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  width: 100%;
  object-fit: cover;
}

.modality {
  width: 45%;
  vertical-align: top;
}