body {
    background-image: url('space.png');
    background-color: black;
    height: 100%;
    overflow: hidden;
  }
img{
    height: 600px;

}
/* general layout of starting screen */
.start{
  font-size: 5em;
  font-family: 'Silkscreen', cursive;
  font-weight: 500;
  color: rgba(97, 97, 97, 1);
  letter-spacing: 5px;
  cursor: pointer;
  position: absolute;
  transform: translateX(-50%) translateY(-50%);
  top: 50%;
  text-align: center;
  left: 50%;
}
/* give the lighting up hover effect for corresponding text on starting screen */
h2:hover{
  color: white;
  text-shadow: 2px 2px 5px ;

}

/* common attributes among all panels */
@media(min-width:600px){
    .container-1{
      display:flex;
      flex-direction:row;
      align-items: center;
      justify-content: center;
      position:absolute;
      transform: translateX(-50%) translateY(-50%);
    top: 50%;
    text-align: center;
    left: 50%;
      
    }
.container-1 div{
    border: double rgba(97, 97, 97, 1);
  }
}
/* attributes for loading screen (transition screen with gif) */
.loader{
  position: absolute;
  background-color: black;
  width: 100%;
  height: 100vh;
  z-index: 99;
  left: -100%;
  transition: .3s;

}
/* gif dimensions */
.portal{
  height: 100%;
  width: 100%;  

}

/* button (right) attributes */
.button {
  background-image: url('rbutton.png');
  width: 100px;
  height: 100px;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    border: none;
    text-decoration: none;
    transition: background 0.2s;
    position: absolute;
    left: 87%;
    top: 45%;
  }
  
  .button:hover {
    background-image: url('rbutton.png');
    filter: brightness(60%);
  }
/* button_1 (left) attributes */
  .button_1 {
    background-image: url('lbutton.png');
    width: 100px;
    height: 100px;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    border: none;
    text-decoration: none;
    transition: background 0.2s;
    position: absolute;
    left: 7%;
    top: 45%;
  }
  
  .button_1:hover {
    background-image: url('lbutton.png');
    filter: brightness(60%);
  }
    /* attributes of title */
  .title{
    font-family: 'Silkscreen', cursive;
    font-size:30px;
    color:rgba(97, 97, 97, 1);
    position: relative;
    text-align: center;
}