html,
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-size:  calc(14px + (36 - 14) * ((100vw - 320px) / (2560 - 320)));
}

body {
  display: flex;
  overflow: hidden;
  /* Hide scrollbars */
  /* This centers our sketch horizontally. */
  justify-content: center;
  /* This centers our sketch vertically. */
  align-items: center;
  font-family: "Avenir Next", "Avenir", "Nunito Sans", sans-serif;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

canvas {
  display: block;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

video {
  position: absolute;
  width: 0;
  height: 0;
  z-index: -999;
}

img {
  height: auto;
  width: 100%;
}

.topnav {
  overflow: hidden;
  position: fixed;
  top: 0;
  bottom: auto;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  padding-left: 1em;
  z-index: 1;
}

.topnav #myLinks {
  display: none;
}

.topnav #icons_toolbar {
  display: none;
  float: left;
}

.topnav a {
  float: left;
  width: calc(100% / 5);
  color: white;
  text-align: center;
  text-decoration: none;
  padding: 2vh 0;
  transition: all 0.4s ease;
}

.topnav .fa {
padding-right:1.0rem ; */

}

.topnav a.menu_text {
  top: 0;
  bottom: auto;
  width: 25%;
  text-align: center;
}

.topnav a.icon {
  float: right;
  visibility: visible;
}


.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: calc(100% / 6);
  font-size: calc(0.4em + 0.5vw);
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 12%;
  left: 90%;
  margin-left: -10px;
}


.active {
  background-color: #4caf50;
  color: white;
}

.content {
  position: absolute;
  overflow-y: auto;
  width: 100vw;
  height: 100vh;
  /* -webkit-animation: fadeIn 4s linear forwards;
  animation: fadeIn 4s linear forwards; */

}

/* if backdrop support: very transparent and blurred */
@supports (
  (-webkit-backdrop-filter: blur(none)) or (backdrop-filter: blur(none))
) {
  .content {
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
  }

  .topnav {
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
  }
}

.content .fa {
  float: left;
  /* text-align: center; */
  text-decoration: none;
  background: transparent;
  color: white;
  padding-right: 0.5em;
}

/* Add a hover effect if you want */
.content .fa:hover {
  opacity: 0.8;
}

.content #myInfo {
  display: none;
  background: none;
  overflow-y: auto;
  padding: 6rem;
  color: white;
  -webkit-animation: fadeIn 1s linear forwards;
  animation: fadeIn 1s linear forwards;

}

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item-left {
  /* background-color: #f1f1f1; */
  flex: 50%;
  align-self: center;
}

.flex-item-right {
  /* background-color: dodgerblue; */
  flex: 50%;
  align-self: center;
}

/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (hover: none) {
  .flex-item-right,
  .flex-item-left {
    flex: 100%;
  }
}

.content #instructions {
  display: none;
  background: none;
  overflow-y: auto;
   padding: 30vw;
  color: white;
  font-size: calc(0.8em + 0.2vh);
  position: absolute;
  top: 40%;
    left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
}

.content a:link {
  color: white;
  background-color: transparent;
}

.content a:visited {
  color: white;
  background-color: transparent;
}

.content .logos {
  width: 90%;
  vertical-align: middle;
  align-items: center;
}

#iPhone {
  display: none;
  width: 100vw;
  text-align: center;
  background: none;
  color: white;
  position: absolute;
  -webkit-animation: fadeinout 4s linear forwards;
  animation: fadeinout 4s linear forwards;
  top: 40%;
    left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
}

#camera_inst {
  display: none;
  width: 100vw;
  text-align: center;
  background: none;
  position: absolute;
  -webkit-animation: fadeinout 4s linear forwards;
  animation: fadeinout 4s linear forwards;
  color: white;
  top: 40%;
    left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
}

#record_limit {
  display: none;
  width: 100vw;
  text-align: center;
  background: none;
  color: white;
  position: absolute;
  -webkit-animation: fadeinout 4s linear forwards;
  animation: fadeinout 4s linear forwards;
  top: 40%;
    left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
}

#mouse_inst {
  display: none;
  text-align: center;
  background: none;
  overflow-y: auto;
  padding: 1rem;
  color: white;
  font-size: calc(0.8em + 0.2vh);
  position: absolute;
  -webkit-animation: fadeinout 4s linear forwards;
  animation: fadeinout 4s linear forwards;
  top: 40%;
    left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
}

#tap_inst {
  display: none;
  text-align: center;
  background: none;
  overflow-y: auto;
  padding: 1rem;
  color: white;
  font-size: calc(0.8em + 0.2vh);
  position: absolute;
  -webkit-animation: fadeinout 4s linear forwards;
  animation: fadeinout 4s linear forwards;
  top: 40%;
    left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
}

#webcam_inst {
  display: none;
  text-align: center;
  background: none;
  overflow-y: auto;
  padding: 1rem;
  color: white;
  font-size: calc(0.8em + 0.2vh);
  position: absolute;
  -webkit-animation: fadeinout 4s linear forwards;
  animation: fadeinout 4s linear forwards;
  top: 40%;
    left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
}

@media (hover: none) {

.topnav{
  top: auto;
  bottom: 0;
  position:fixed;
  z-index: 1;
}

.topnav a:hover {
  background-color: transparent;
  opacity: 1;
}

.topnav .fa {
  padding-left: 0;

}

.content {
  position: absolute;
  overflow-y: auto;
  width:100vw;
  height:100vh;
  -webkit-overflow-scrolling: touch;
}

.content #myInfo {
  padding: 3rem;
}

  .tooltip .tooltiptext {
    top: 25%;
    left: 92%;
    visibility: visible;
    margin-left: -15px;
    font-size: calc(0.25em + 0.5vw);
    width: calc(100% / 6);
  }
}

@media (hover: none) and (orientation: portrait) {

  .topnav .fa {
    font-size: calc(1em + 2vw);
  }

}

@media (hover: none) and (orientation: landscape) {
  .tooltip .tooltiptext {
    top: 10%;
    left: 90%;
    font-size: calc(0.2em + 0.5vw);
  }
}

@media (hover: hover) and (pointer: fine) {
  .topnav a:hover {
    background-color: none;
    color: white;
    opacity: 1;
  }

  .tooltip:hover .tooltiptext {
    visibility: visible;
  }
}


.topnav a {
  font-size: calc(1em + 0.5vw);
}

.content {
  font-size: calc(0.8em + 0.5vw);
}

.animated {
  font-size: calc(1em + 0.5vw);
}

.content .fa-instagram {
  font-size: 1em;
}

/* Remove padding on mutebutton to fix centering */
#mute{
  text-align: center;
  margin: 0;
  padding: 0;
}
/* CLASS FOR DISABLED BUTTONS -- USED FOR MUTE BUTTON */
.disabled {
  opacity: 0.2;
}

@-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

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

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