style.css

/* general*/
/* DESKTOP*/
html {
  height: 100vh;
}
body {
  height: 100vh;
  min-height: 280px;
  font-size: 10px;
  font-family: "Oxygen", sans-serif;
  background-color: black;
  color: lavenderblush;
}

.wrap {
  display: grid;
  max-height: 100vh;
  overflow: hidden;
  animation: main 4s linear 4s none;
}

.wrap main {
  height: 60vh;
}

/* transistion from "title" screen to main */
@keyframes main {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

/* TITLE SCREEN ANIMATION*/
.intro {
  width: 100vw;
  height: 100vh;
  color: white;
}

.intro p {
  line-height: 100vh;
  font-size: 3rem;
  text-align: center;
  animation: intro 5s linear forwards;
}

p .glitchB {
  position: fixed;
  animation: glitchB 5s linear forwards;
}

p .glitchD {
  animation: glitchD 5s linear forwards;
}
@keyframes intro {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }

  60% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes glitchB {
  0% {
    opacity: 0;
  }

  19% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 1;
  }
  35% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  54% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes glitchD {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 1;
  }
  18% {
    opacity: 1;
  }
  19% {
    opacity: 0;
  }
  34% {
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  48% {
    opacity: 1;
  }
  49% {
    opacity: 0;
  }
  53% {
    opacity: 0;
  }
  54% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* MAIN SCREEN*/

/* TITLE: */
.title {
  text-align: center;
  font-size: 4rem;
  color: white;
}
.title .B {
  position: fixed;
  animation: letterB 9s infinite linear both;
}
.title .D {
  animation: letterD 9s infinite linear both;
}
@keyframes letterB {
  0% {
    opacity: 0;
  }
  74% {
    opacity: 0;
    color: white;
  }
  75% {
    opacity: 1;
    color: #691a1a;
  }
  77% {
    opacity: 1;
    color: #691a1a;
  }
  78% {
    opacity: 0;
    color: white;
  }
  79% {
    opacity: 1;
    color: #691a1a;
  }
  80% {
    opacity: 0;
    color: white;
  }

  100% {
    opacity: 0;
  }
}
@keyframes letterD {
  0% {
    opacity: 1;
  }
  74% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  77% {
    opacity: 0;
  }
  78% {
    opacity: 0.5;
  }
  79% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

/* JOKE SECTION */
.screen {
  margin: 3rem 8rem;
  height: 50vh;
  font-size: 2.6rem;
}
.screen .border {
  display: inline-block;
  padding: 1rem;
  box-shadow: 5px 5px 5px gray;
  border-radius: 1rem;
}

.screen div p {
  display: inline;
  line-height: 3rem;
}

/* BUTTON */

.start {
  all: unset;
  display: block;
  opacity: 0.7;
  margin: -5% 5% 0 65%;
  padding: 1rem 1rem;
  font-size: 2.6rem;
  text-align: right;
  text-transform: uppercase;
  border: 2px white solid;
  border-radius: 1rem;
  transition: 0.7s;
}

/* it will be removed later from SCREEN section using JS */
.hidden {
  opacity: 0;
}

/* LANDSCAPE*/

@media (max-width: 767px) and (orientation: landscape) {
  header {
    max-height: 20vh;
  }
  .wrap {
    height: 100vh;
    max-width: 767px;
    overflow: hidden;
  }
  .intro p {
    line-height: 60vh;
  }
  .title {
    padding: 2% 0;
    font-size: 2.5rem;
  }
  .screen {
    margin: 10% 20%;
    height: 30vh;
    font-size: 1rem;
  }
  .screen .border {
    padding: 0.8rem;
    box-shadow: 4px 4px 4px gray;
  }
  .screen div p {
    line-height: 1rem;
  }
  .start {
    margin: 0 35% 5% 35%;
    padding: 0.5rem 0;
    text-align: center;
    font-size: 1rem;
    border: 1px white solid;
    opacity: 1;
  }
}

@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
  .wrap {
    height: 100vh;
    max-width: 1023px;
    overflow: hidden;
  }
  .wrap main {
    height: 55vh;
  }
  .intro p {
    font-size: 4rem;
    line-height: 60vh;
  }
  .title {
    font-size: 2.5rem;
  }
  .screen {
    margin: 2% 15%;
    height: 30vh;
    font-size: 1.4rem;
  }
  .screen .border {
    padding: 1rem;
    box-shadow: 5px 5px 5px gray;
  }
  .screen div p {
    line-height: 1.4rem;
  }

  .start {
    margin: 0 35% 5% 35%;
    padding: 1rem 1rem;
    text-align: center;
    font-size: 1.2rem;
    border: 1px white solid;
    opacity: 1;
  }
}

@media (min-width: 1024px) and (max-width: 1200px) and (orientation: landscape) {
  .start {
    margin: -5% 5% 0 65%;
    padding: 1rem 1rem;
    text-align: right;
    font-size: 1.4rem;
    border: 1px white solid;
    opacity: 1;
  }
}

@media (min-width: 1024px) and (max-height: 500px) and (orientation: landscape) {
  .wrap {
    min-height: 500px;
  }

  .wrap main {
    margin-top: -10%;
  }
  .start {
    font-size: 2rem;
    opacity: 1;
  }
}
@media (min-width: 1280px) and (max-height: 950px) and (orientation: landscape) {
  .start {
    opacity: 1;
  }
}
/*PORTRAIT*/
@media (max-width: 539px) and (orientation: portrait) {
  .wrap {
    max-width: 512px;
    overflow: hidden;
  }
  .title {
    padding-top: 10%;
    font-size: 2.5rem;
  }
  .screen {
    margin: 10% 15% 20% 15%;
    height: 45vh;
    font-size: 1.4rem;
  }
  .screen .border {
    margin-bottom: 10%;
    padding: 1rem;
    box-shadow: 4px 4px 4px gray;
  }
  .screen div p {
    line-height: 1rem;
  }
  .start {
    margin: -10% 20% 0 20%;
    text-align: center;
    font-size: 0.8rem;
    opacity: 1;
  }
}
@media (min-width: 540px) and (max-width: 1024px) and (orientation: portrait) {
  .wrap {
    max-width: 1024px;
    overflow: hidden;
  }
  .title {
    padding-top: 10%;
    font-size: 3.5rem;
  }
  .screen {
    margin: 10% 20% 20% 20%;
    height: 45vh;
    font-size: 1.6rem;
  }
  .screen .border {
    margin-bottom: 10%;
    padding: 1rem;
    box-shadow: 4px 4px 4px gray;
  }
  .screen div p {
    line-height: 1rem;
  }
  .start {
    margin: -10% 20% 0 20%;
    text-align: center;
    font-size: 1.3rem;
    opacity: 1;
  }
}
@media (min-width: 1024px) and (min-height: 1200px) and (orientation: portrait) {
  .title {
    padding-top: 10%;
    font-size: 4.5rem;
  }
  .screen {
    height: 50vh;
    font-size: 2rem;
  }
  .screen .border {
    padding: 1rem 2rem;
  }
  .screen div p {
    line-height: 2rem;
  }
  .start {
    margin: -10% 20% 0 20%;
    text-align: center;
    font-size: 2rem;
    opacity: 1;
  }
}
@media (hover: hover) and (pointer: fine) {
  .start:hover {
    margin-left: 67%;
    cursor: pointer;
    opacity: 1;
    background-color: #691a1a;
  }
}