body{
    margin:0;
    background: #282871;
}

.take-me-home{
    position:fixed;
    top:3rem;
    left:3.75rem;
    z-index:2;
    display:block;
}

#socket {
  position: absolute;
  width: 3rem;
  height: 2rem;
  border-radius: 50%;
  background-color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid #000;
  overflow: hidden;
  animation: blink 1.5s;
  animation-delay: 4.5s; 
}

@keyframes blink {
  0% {
    height: 2rem; /* initial height of the eye element */
  }
  50% {
    height: 0px; /* halfway point of the animation */
  }
  100% {
    height: 2rem; /* return to the initial height */
  }
}

#eye {
  position: absolute;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: blue;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.pupil {
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: black;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#toggle-div {
    display: none;
  }

  #toggle-div2 {
    display: none;
  }

.toggle{
    width:25vw;
    position:fixed;
    bottom: 1rem;
    left:2rem;
    color:#fff;
    font-family: 'Cutive Mono', monospace;
    background: #282871;
    padding:0 1rem;
}

.toggle2{
  width:50vw;
  position:fixed;
  bottom: 1rem;
  left:26vw;
  color:#fff;
  font-family: 'Cutive Mono', monospace;
  background: #282871;
  padding:0 1rem;
}

button{
    font-family: 'Cutive Mono', monospace;
    background:transparent;
    border:0px;
    color:#fff;
    box-shadow:none;
    transition:all 0.3 linear;
    margin:0;
    padding:0;
}

button:hover{
    font-style:italic;
    cursor: pointer;
}

.closer-container{
    display:flex;
    justify-content: center;
    align-items: center;
    height:100vh;
    text-align:center;
}

@media (max-width: 768px){
  .toggle{
    width:85vw;
}
.closer-container {
  height: unset;
}
}