/* Import global styles */
@import "/static/Global/css/global.css";

/* Adjust accordingly for mobile */
@media (orientation: portrait) {
  .navbar a {
    font-size: 2vh;
    padding: 1vw 2vw;
  }
  .footer a{
    font-size: 1.5vh;
  }
}

html {
  /* background: linear-gradient(0deg, rgba(255,111,0,1) 0%, rgba(255,196,44,1) 100%); */
  min-height: 100%;
  /* background-color: 323232; */
  background: linear-gradient(0deg, #323232 0%, #404040 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;

  background-position: center center;
  background-size: 150% 150%;
  /* Preload all images immediately, to prevent flickering during animation */
  background-image:
    url("/static/Scraps/img/fancywallpaper/interior.webp"),
    url("/static/Scraps/img/fancywallpaper/factory.webp"),
    url("/static/Scraps/img/fancywallpaper/lakeside.webp"),
    url("/static/Scraps/img/fancywallpaper/shore.webp"),
    url("/static/Scraps/img/fancywallpaper/swamp.webp"),
    url("/static/Scraps/img/fancywallpaper/oasis.webp"),
    url("/static/Scraps/img/fancywallpaper/taiga.webp");

  /* Dynamic wallpaper animation styles */
  animation: carousel 60s cubic-bezier(1, 1, 1, 0.7) forwards infinite, zoom 60s linear infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

@keyframes zoom {
  0% {
    background-position: 50% 32.5%;
  }
  100% {
    background-position: 100% 32.5%;
  }
}

@keyframes carousel {
  0% {
    background-image: url("/static/Scraps/img/fancywallpaper/oasis.webp");
  }
  17% {
    background-image: url("/static/Scraps/img/fancywallpaper/factory.webp");
  }
  34% {
    background-image: url("/static/Scraps/img/fancywallpaper/interior.webp");
  }
  51% {
    background-image: url("/static/Scraps/img/fancywallpaper/shore.webp");
  }
  68% {
    background-image: url("/static/Scraps/img/fancywallpaper/swamp.webp");
  }
  86% {
    background-image: url("/static/Scraps/img/fancywallpaper/lakeside.webp");
  }
  100% {
    background-image: url("/static/Scraps/img/fancywallpaper/taiga.webp");
  }
  100%{
    background-image: url("/static/Scraps/img/fancywallpaper/interior.webp");
  }
}

/* Style the body */
body {
  font-family: NewTown;
  margin: 0;
  padding: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
}

#logoBanner{
  margin: auto;
  max-width: 50%;
  max-height: 50%;
}

/* Increase the font size of the heading */
h1 {
  margin: 0;
  font-size: 3.125vw;
  /* color: white; */
  color:gold;
  font-family: HighwayGothic;
  padding-top: 4vh;
}

p{
  margin: 0;
}

/* Wrap paragraphs into blocks without using <br> */
.paragraph {
   inline-size: 50%;
   overflow-wrap: break-word;
   margin: auto;
   margin-bottom: 0;
   margin-top: 0;

   color: white;

   /* Stroke text */
   text-shadow:
     -2.35px -2.35px 0 #000,
      0   -2.35px 0 #000,
      2.35px -2.35px 0 #000,
      2.35px  0   0 #000,
      2.35px  2.35px 0 #000,
      0    2.35px 0 #000,
     -2.35px  2.35px 0 #000,
     -2.35px  0   0 #000;
   -webkit-font-smoothing: antialiased;

   text-decoration: none;
   font-family: HighwayGothic;
   font-size: 1.5625vw;
}
.paragraph h3 {
  /* font-size: 50px; */
  font-size: 2.6vw;
}
.paragraph a {
  text-decoration: none;
  color: gold;
}
.paragraph a:hover {
  color: yellow;
}

@media (orientation: portrait) {
  #logoBanner{
    max-width: 100%;
    max-height: 100%;
  }
  h1 {
    font-size: 5vh;
  }
  .paragraph {
    inline-size: 95%;
    font-size: 3vh;
  }
  .paragraph h3 {
    font-size: 4vh;
  }
}