html {
  height: -webkit-fill-available;
}
body {
    display: flex;
    flex-direction: column;
    
  font-family: "Vollkorn", "Verdana", Courier, monospace;
  margin: 0;
  min-height: vh;
  min-height: -webkit-fill-available;
  --wrapper-video-width: 100vw;
  --footer-side-margin: 2vw;
  --accent-font-size: 1.6vw;
  --accent-squeeze: -0.28vw;
  --accent-padding: 0.01vw;
  --shakeX: 0.1vw;
  --bait-slideX: -18vw;
}
h1 {
  font-weight: medium;
  font-size: 2vw;
  word-spacing: 0.15vw;
  /*letter-spacing:    0.03vw;*/
}
ul {
  list-style: none;
  display: inline-flex;
}
li {
  /*font-size: 2vw;*/
  margin: 0 2vw;
}
a {
  color: #f1f1f1;
}
a:hover {
  color: #47b5d9;
}
.base {
  /*position: fixed;*/
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  /*background: radial-gradient(circle, #002222, black 70%);*/

  /* HAL 9000 adapted from Ryan LaBar's Pure CSS version at  https://codepen.io/ryan_labar/pen/HeEuG/ */
  background: radial-gradient(
    circle,
    /*#ccdddd 0%,*/ /*#66dddd 2.5%,*/ #aabbbb 0%,
    /* del */ #118888 2.5%,
    /* del */ /*#008080 4%,*/ /*#005555 10%,*/ #003333 3.5%,
    /* del */ /*#001a1a 13.5%,*/ #0a0a0a 19.5%,
    /*#0a2525 21%,*/ #222d2d 21.5%,
    #0a0a0a 22%,
    black 40%
  );
  animation: my-bg-animation 400ms;
}
.base:hover {
  /* TODO change on hover over eye itself */
  background: radial-gradient(
    circle,
    #ffffff 0%,
    #aaffff 3%,
    /*#00aaaa 4%,*/ /*#006262 11%,*/ /*#00aaaa 4%,*/ /* del */ #009090 3.5%,
    /* del */ #093333 12%,
    /* del */ /*#001d1d 14.5%,*/ #001111 19.5%,
    #0a2a2a 21%,
    #2f3838 21.5%,
    #001414 22%,
    black 40%
  );
}

/*.eye-overlay {*/ /* for testing of hover feature */
/*    position: absolute;*/
/*    top: 30vh;*/
/*    left: calc(50vw - 20vh);*/
/*    width: 20vw;*/
/*    height: 20vw;*/
/*    border-radius: 50vw;*/
/*    background: black;*/
/*    opacity: 0.5;*/
/*    z-index:100;*/
/*}*/
@keyframes my-bg-animation {
  10% {
    background: radial-gradient(circle, white, teal, black 5%);
  }
  20% {
    background: radial-gradient(circle, white, teal, black 7%);
  }
  30% {
    background: radial-gradient(circle, white, teal, black 10%);
  }
  40% {
    background: radial-gradient(circle, white, teal, black 12%);
  }
  50% {
    background: radial-gradient(circle, white, teal, black 15%);
  }
  60% {
    background: radial-gradient(circle, white, teal, black 17%);
  }
  70% {
    background: radial-gradient(circle, white, teal, black 20%);
  }
  80% {
    background: radial-gradient(circle, white, teal, black 22%);
  }
  90% {
    background: radial-gradient(circle, white, teal, black 25%);
  }
  97% {
    background: radial-gradient(circle, gray, teal, black 30%);
  }
}
   /**, *:before, *:after {*/
   /*   box-sizing: inherit;*/
   /* }*/

    .wrapper {
      width:100%;
      height:100vh;
      overflow: hidden;
    }

    .wrapper video {
      /*object-fit: contain;*/
       object-fit: fill; 
      /*object-fit: cover;*/
      width:var(--wrapper-video-width);
      height:100%;
    }
.backgroundVideo {
  position: absolute;
  right: 0;
  top: 0;
  /*width: auto;*/
  /*height: 100%;*/
  animation: fadein 1s;
}

@keyframes fadein {
    from { visibility:hidden; opacity: 0; }
    50%  { visibility:hidden; }
    to   { opacity: 1; }
}

.content {
    flex:1;
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 1);
  color: #f1f1f1;
  width: 100%;
  /*padding-left:               2vw;*/
  /*padding-right:              2vw;*/
  display: flex;
  flex-flow: row nowrap;
  /*text-align:              center;*/
  justify-content: space-between;
  align-content: center;
  align-items: center;
}
.content > div {
  margin: 0 var(--footer-side-margin);
  /*text-align: center;*/
  /*font-size: 2vw;*/
}
.fa-2x {
  font-size: 3vw;
}
.content .hover {
  display: none;
}
.slideout {
  /*margin-right: 0;*/
  transition: 200ms;
}
.content:hover .slideout {
  opacity: 0;
  /*margin-right:-20vw;*/
}
.content:hover .blinkout {
  display: none;
}
.content:hover .fadeout1 {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 40ms, opacity 40ms;
}
.content:hover .fadeout2 {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 75ms, opacity 75ms;
}
.content:hover .fadeout3 {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 125ms, opacity 125ms;
}
.content:hover .fadeout4 {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 175ms, opacity 175ms;
}
.content:hover .fadeout5 {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 200ms, opacity 200ms;
}
.content:hover .hover {
  display: inline; /* CHANGE IF FOR BLOCK ELEMENTS */
}

.monoaccents {
  font-size: var(--accent-font-size);
  margin: var(--accent-squeeze);
}

/* Tooltip container */
.speechbubble {
  position: relative;
  display: inline;
  width: 8vw;
  font-size: 1.2vw;
  padding: 0.5vw 0;
}
/* Tooltip text */
.speechbubble .email-bubble {
  visibility: hidden;
  opacity: 0;
  background-color: gray;
  color: #fff;
  text-align: center;
  font-family: "Verdana", monospace;
  font-weight: lighter;
  border-radius: 0.5vw;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 130%;
  /*left: 50%;*/
  margin-left: 0.4vw;

  transition: 50ms linear 100ms both;
}

.speechbubble .bait-bubble {
  background-color: gray;
  color: #fff;
  text-align: center;
  font-family: "Verdana", monospace;
  font-weight: lighter;
  padding: 0.3vh;
  border-radius: 0.5vw;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  /*bottom: 50%;*/
  /*left: 50%;*/
  margin-left: 1vw;
  margin-top: 0.5vh;

  transition: 100ms ease-in;
}
/* Show the tooltip text when you mouse over the tooltip container */
.content:hover .email-bubble {
  visibility: visible;
  opacity: 1;
  /* Shake that tooltip text! */
  animation: shake 0.6s ease-out;
}
.content:hover .bait-bubble {
  visibility: hidden;
  opacity: 0;
  transform: translate(var(--bait-slideX), -4vh);
}
.speechbubble .email-bubble::after {
  content: " ";
  position: absolute;
  top: 100%; /* To the bottom of the tooltip */
  left: 50%;
  margin-left: -0.8vw;
  border-width: 0.8vw;
  border-style: solid;
  border-color: gray transparent transparent transparent;
}

.unselectable {
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}

@keyframes shake {
  10%,
  30% {
    transform: translateX(calc(-8 * var(--shakeX)));
  }
  20%,
  40% {
    transform: translateX(calc(1 * var(--shakeX)));
  }
  50%,
  70% {
    transform: translateX(calc(-3 * var(--shakeX)));
  }
  60%,
  80% {
    transform: translateX(calc(0.5 * var(--shakeX)));
  }
  90% {
    transform: translateX(calc(-1 * var(--shakeX)));
  }
}

@keyframes my-bg-animation {
  10% {
    background: radial-gradient(circle, white, teal, black 5%);
  }
  20% {
    background: radial-gradient(circle, white, teal, black 7%);
  }
  30% {
    background: radial-gradient(circle, white, teal, black 10%);
  }
  40% {
    background: radial-gradient(circle, white, teal, black 12%);
  }
  50% {
    background: radial-gradient(circle, white, teal, black 15%);
  }
  60% {
    background: radial-gradient(circle, white, teal, black 17%);
  }
  70% {
    background: radial-gradient(circle, white, teal, black 20%);
  }
  80% {
    background: radial-gradient(circle, white, teal, black 22%);
  }
  90% {
    background: radial-gradient(circle, white, teal, black 25%);
  }
  100% {
    background: radial-gradient(circle, gray, teal, black 30%);
  }
}

/*@keyframes my-escape-animation {*/

/*}*/

@media only screen and (max-width: 800px) {
  body {
    --accent-font-size: 2.2vw;
    --accent-squeeze: -0.35vw;
    --shakeX: 0.15vw;
    --bait-slideX: -24vw;
  }
  h1 {
    font-size: 3vw;
  }
  .speechbubble {
    width: 10vw;
    font-size: 1.8vw;
  }
  .speechbubble .email-bubble {
    margin-left: 2vw;
  }
  .speechbubble .email-bubble::after {
    margin-left: -1.5vw;
    border-width: 1vw;
  }
  .base/*:hover*/ {
    background: radial-gradient(
      circle,
      #ffffff 0%,
      #aaffff 3%,
      #00aaaa 4%,
      #006262 11%,
      #001d1d 14.5%,
      #001818 19.5%,
      #0a2a2a 21%,
      #2f3838 21.5%,
      /* extra */ #001818 22%,
      black 40%
    );
  }
  .base:hover {
    background: radial-gradient(
      circle,
      #ffffff 0%,
      #aaffff 3%,
      #00aaaa 4%,
      #006262 11%,
      #001d1d 14.5%,
      #001818 19.5%,
      #0a2a2a 21%,
      #2f3838 21.5%,
      #001818 22%,
      black 40%
    );
  }
}
@media only screen and (max-width: 425px) {
  body {
    --wrapper-video-width: 135vw;
    --footer-side-margin: 1vw;
    --accent-font-size: 3.4vw;
    --accent-squeeze: -0.55vw;
    --shakeX: 0.3vw;
    --bait-slideX: -36vw;
  }
  h1 {
    font-size: 4.5vw;
  }
  .fa-2x {
    font-size: 6vw;
  }
  li {
    margin: 0 2vw;
  }
  .speechbubble {
    padding: 1vw 0.5vw;
    width: 14vw;
    font-size: 2.7vw;
    /*margin-left: -9vw;*/
  }
  .speechbubble .email-bubble {
    margin-left: 2.5vw;
  }
  .speechbubble .email-bubble::after {
    margin-left: -1.6vw;
    border-width: 1.6vw;
  }
  .base {
    background: radial-gradient(
      circle,
      #ffffff 0%,
      #aaffff 3%,
      #00aaaa 4%,
      #006262 11%,
      #001d1d 14.5%,
      #001818 19.5%,
      /*#0a2a2a 21%,*/ #0a2a2a 21%,
      #2f3838 21.5%,
      #001818 22%,
      black 40%
    );
  }
  .base:hover {
    background: radial-gradient(
      circle,
      #ffffff 0%,
      #aaffff 3%,
      #00aaaa 4%,
      #006262 11%,
      #001d1d 14.5%,
      #001818 19.5%,
      /*#0a2a2a 21%,*/ #0a2a2a 21%,
      #2f3838 21.5%,
      #001818 22%,
      black 40%
    );
  }
  /*TODO change on hover over eye itself*/
  /*.base:hover {  */
  /*background: radial-gradient(*/
  /*    circle,*/
  /*    #ffffff 0%,*/
  /*    #aaffff 3%,*/
  /*#00aaaa 4%,*/
  /*#006262 11%,*/
  /*#00aaaa 4%,*/ /* del */
  /*#008080 3.5%,*/ /* del */
  /*#093333 12%, */ /* del */
  /*#001d1d 14.5%,*/
  /*    #001111 19.5%,*/
  /*    #0a2a2a 21%,*/
  /*    #001010 21.5%,*/
  /*    #001818 22%,*/
  /*    black 40%*/
  /*    );*/
  /*}*/
}