*{
    box-sizing: border-box;
}

body{
    background-color: black;
    background-size: cover;
    background-position:top;
    background-repeat: no-repeat;
    margin: 0px;
    display: flex;
    flex-direction: column;
}

h1{
    margin-top: 0;
    position: relative;
    color: whitesmoke;
    background-color: black;
    mix-blend-mode: difference;
    font-family: 'Trebuchet MS','Gill Sans MT', Calibri,  sans-serif;
    font-size: 4vh;
    text-wrap: nowrap;
    animation: run 10s infinite linear both;
}

.box{
    background: whitesmoke;
    color: black;
    animation: run 10s 5s infinite linear alternate-reverse both;
}

.textbox{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/*lock */
.lock{
    height: 80vh;
    position:relative;    
}
.pulse{
    z-index: 2;
    mix-blend-mode: overlay;
    animation: pulse 10s 5s infinite linear alternate-reverse both;
}
.side{
    width: 10vw;
    height:100vh;
    color:crimson;
    position: absolute;
    bottom: 0;
    right:0;
}
.open{
    display:none;
}
.eternity{
    display:none;
    position: relative;
    align-self: center;
}
.end{
    display: none;
}

/*animation*/
@keyframes pulse{
    0%{
        opacity: 100%;
        transform: scale(1);
    }
    40%{
        opacity: 80%;
        transform: scale(0.8);
    }
    100%{
        opacity: 60%;
        transform: scale(1.6);
    }
}

@keyframes run {
    0%{
        left: -120vw;
        opacity: 100%;
    }
    40%{
        opacity: 100%;
    }
    41%{
        opacity: 0%;
    }
    41%{
        opacity: 100%;
    }
    60%{
        opacity: 100%;
    }
    60%{
        opacity: 0%;
    }
    60%{
        opacity: 100%;
    }
    100%{
        left: 120vw;
        opacity: 100%;
    }
}

/*Screen sizing*/
/*desktop*/
@media screen and (max-width:1440px){
    body{
      background-image: url("img/mystery\ religion.png");
      font-weight: 700;
    }
    .lock{
        display: none;
    }
    .textbox{
        display: none;
    }
    .open{
        display:unset;
    }
  }
  /*ipad and laptop*/
  @media screen and (max-width:1024px){
    body{
      background-image: url("img/Eternity.png");
      color:aqua;
      font-family: 'Times New Roman', Times, serif;
    }
    .open{
        display: none;
    }
    .eternity{
        display:unset;
    }
  }
  /*mobile*/
  @media screen and (max-height:960px){
    body{
      background-image: url("img/psychology.png");
      color:crimson;
      font-weight: 900;
      font-family: Georgia, 'Times New Roman', Times, serif;
    }
   
  }
  @media screen and (max-height:500px){
    body{
      background-image: url("img/symbol.png");
      font-size: 30px;
      color:greenyellow;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }
    .eternity{
        display:none;
    }
    .end{
        display:unset;
    }
  }