/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
:root{
  --lines1: #1873a3;
  --lines2: #FF9F1C; 
}
@keyframes move-linev {
  0% {left: 0%;}
  100% {left: 20%;}
}
@keyframes move-lineh {
  0% {top: 0%}
  100% {top: -33%}
}
@keyframes bounce {
  0% {top: 0%;}
  25% {top: 2%;}
  50% {top: 0%;}
  75% {top: -2%;}
  100% {top: 0%;}
}
body {
  background: linear-gradient(12.5deg,rgba(255, 159, 28, .9) 0%, rgba(180, 114, 33, .6) 21%, rgba(141, 91, 35, .5) 41%, rgba(61, 44, 39, .4) 75%, rgba(33, 27, 41, .3) 100%), url('twinkle.gif');
  width: 100%;
  height: 99vh;
}

.bg {
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: -1;
}
.main {
  z-index: 1;
  width: 100%;
  height: 100%;
  text-align: center;
}
.maincard {
  position: relative;
  top: 10%;
  margin: auto;
  transform: rotate(-12deg);
  background-color:#EAEBED;
  z-index: 1
}
.maintext {
  position: relative;
  margin: auto;
  color: #211b29;
  z-index: 3;
}
.bounce {
  animation-name: bounce;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-composition: add;
}
  
@media screen and (orientation: landscape) {
  .move-linev
  {
    border-width: .6rem;
  }
  .move-lineh
  { 
    border-width: .3rem;
  }
  .maincard {
    width: 50rem;
    height: 30rem;
    border-radius: 4rem;
  }
}

/*begin Line Hell*/

.move-linev
  {
  animation-name: move-linev;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-composition: add;
  border-style: solid;
  color: var(--lines1);
  opacity: .7
  }
.move-lineh
  {
  animation-name: move-lineh;
  animation-duration: 16s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-composition: add;
  border-style: solid;
  color: var(--lines2);
  opacity: .3
  }

.vline0 {
  position:fixed;
  transform: rotate(12deg);
  width: 10%;
  height: 100rem;
  top: -10rem;
  left: -20%
}
.vline1 {
  position:fixed;
  transform: rotate(12deg);
  width: 10%;
  height: 100rem;
  top: -10rem;
  left: 0%
}
.vline2 {
  position:fixed;
  transform: rotate(12deg);
  width: 10%;
  height: 100rem;
  top: -10rem;
  left: 20%
}
.vline3 {
  position:fixed;
  transform: rotate(12deg);
  width: 10%;
  height: 100rem;
  top: -10rem;
  left: 40%
}
.vline4 {
  position:fixed;
  transform: rotate(12deg);
  width: 10%;
  height: 100rem;
  top: -10rem;
  left: 60%
}
.vline5 {
  position:fixed;
  transform: rotate(12deg);
  width: 10%;
  height: 100rem;
  top: -10rem;
  left: 80%
}
.hline-1 {
  position: fixed;
  transform: rotate(168deg);
  width: 200rem;
  height: 16.5%;
  top: -33%;
  left: -20rem;
}
.hline0 {
  position: fixed;
  transform: rotate(168deg);
  width: 200rem;
  height: 16.5%;
  top: 99%;
  left: -20rem;
}
.hline1 {
  position: fixed;
  transform: rotate(168deg);
  width: 200rem;
  height: 16.5%;
  top: 0%;
  left: -20rem;
}
.hline2 {
  position: fixed;
  transform: rotate(168deg);
  width: 200rem;
  height: 16.5%;
  top: 33%;
  left: -20rem;
}
.hline3 {
  position: fixed;
  transform: rotate(168deg);
  width: 200rem;
  height: 16.5%;
  top: 66%;
  left: -20rem;
}