*,*:before,*:after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html,body{
  overflow: hidden;
  margin:0;
  padding:0;

  max-width:80rem;
  height: 98%;
  font-family:DIN, skia, helvetica, sanns-serif;
}
iframe {
  border-radius: 10px;
  border 5px solid black;
  box-shadow: 0 0 20px 4px black;
  padding: 0;
  margin: 0;
}

.menu{
  position:fixed;
  left:.1em;
  top:0;
  width:100px;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  z-index: 5;
}

.menu ul{
  list-style:none;
  margin:0px;
  width:100%;
  position:relative;
  padding:0px;
  filter:url(#goo);
  z-index:1;
}

.menu ul li{
  width:100%;
  margin:0;
  padding:0;
  display:flex;
  justify-content:center;
  align-items:center;
}

.menu ul span{
  text-align: center;
  border-radius:50px;
  font-size:15px;
  width:50px;
  height:50px;
  margin:25px 0;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:1;
  cursor:pointer;
  transition:all 0.5s ease;
  
}

.menu ul .goo-index{
  width:70px;
  height:50px;
  background:white;
  box-shadow: inset 0 0 20px 1px white, 0 0 4px 1px black, -1px 1px 3px 3px white, 1px -1px 4px 3px black;
  opacity: .7;
  position:absolute;
  left:15px;
  top:0;
  z-index:-1;
  border-radius:5px;
  transition:all 1s ease;
}

.menu ul .goo-index:before{
  content:'';
  position:absolute;
  width:30px;
  height:20px;
  border-radius:50%;
  top:-20px;
  left:60px;
 }

.menu ul .goo-index:after{
  content:'';
  position:absolute;
  width:50px;
  height: 800px;
  order-radius:50%;
  bottom:-20px;
  left:60px;
 }

.content-wrapper{
  width:calc(100% - 100px);
  position:relative;
  left:3em;
  height:100%;
  overflow:hidden;
  padding:1px;
  display:flex;
  justify-content:center;
}

.screen{
  width:calc(100% - 100px);
  max-width:100%;
  height:100%;
  position:absolute;
  top:-100%;
  opacity:0;
  display:grid;
  grid-template-rows:50px auto auto;
  grid-template-columns:100%;
  grid-template-areas:'heading' 'text' 'image';
  transition:all 1s ease;
  transition-delay:0s;
}

.screen.visible{
  top:55px;
  bottom: 0;
  opacity:1;
  transition:all 1.5s ease;
  transition-delay:0.8s ease;
}

.screen h2{
  grid-area :heading;
}
button {
  background: transparent;
  box-shadow: 0px 0px 0px transparent;
  border: 0px solid transparent;
  color:#ddd;
  text-shadow: 1px 1px 2px black, -1px -1px 2px darkred, 0 0 8px black;
}

button:hover {
  color: rgba(200,0,0,1);
  opacity: .5;
  background: transparent;
  font-size: 20px;
  box-shadow: 0px 0px 0px transparent;
  border: 0px solid transparent;
  text-shadow: 1px 2px 2px black, -2px -2px 2px black, 0 0 3px black;
  transition:all .5s ease;
  transition-delay:0.2s ease;
}

button:active {
  outline: none;
  border: none;
  
}

button:focus {
  outline: 0;
}
.screen p {
  grid-area:text;
  text-align:center;
  justify-content:center;
  align-items:center;
  display:flex;
}

/* .image{
  width:100%;
  border-radius:50%;
  background-size:cover;
  background-position:center center;
} */

/* h2{
  font-size:20px;
  position:relative;
  text-align:center;
}

h2:after{
  content:'';
  position:absolute;
  width:70px;
  height:5px;
  background:#1fc058;
  left:calc(50% - 35px);
  bottom:-15px;
}
 */