@import url("mystic.css");

html, body {
  overflow:auto !important;
}


* {
  color: #000000;
  font-family: "Rockwell", "Courier New", Courier, Georgia,
  Times, "Times New Roman", serif;;
  /* The page owns the gradient; controls and content use their own surfaces. */
}

body {
  color: #000000;
  font-family: "Berlin Sans FB", "Impact";
  background-color: #f2ad38;
  background: rgb(242,173,56);
  background: -moz-linear-gradient(90deg, rgba(242,173,56,1) 29%, rgba(2,0,36,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(242,173,56,1) 29%, rgba(2,0,36,1) 100%);
  background: linear-gradient(90deg, rgba(242,173,56,1) 29%, rgba(2,0,36,1) 100%);
  animation: fade-in .5s;
}


@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@font-face {
  font-family: "Lato" !important;
  src: url(../FONTS/Lato/Lato-Regular.ttf);
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
}

.front_logo {
  cursor: pointer;
}


#log_section h3, #log_section h2 {
  color: black;
 }

 /* Additional styles for specific elements */
#log_section h3,
#log_section h2 {
  color: black;
}

::placeholder {
  font-style: italic !important;
}

.footer {
  margin-left: 0%;
}


#trademark {
  margin-left: -4%;
}

 /* MEDIA QUERIES */

 

/* Media Query for Mobile Screens */
@media screen and (max-width: 767px) {
  body {
    /* Adjust styles for mobile screens */
    font-family: "Lato";
    background: none;
  }
  .front_title {
    font-size: 40px !important;
    margin-left: -10% !important;
  }
  .front_logo {
    width: 200px !important;
    height: 200px !important;
    margin-left: 35% !important;
  }
  .footer {
    background: none;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    align-content: center !important;
    width: 80dvw;
    color: white;
    margin-top: 50% !important; /* Increase the margin-top to create more space */
    gap: 15%;
    flex-wrap: wrap !important;
    margin-left: 20dvw;
  }
  .footer a {
    text-decoration: none;
    color: white;
    padding-right: 5px;
    background: none;
    width: 100% !important;
    font-size: 12px;
  }
  .footer {
    margin-top:10% !important;
  }
  #footerlinks a {
    width: 80dvw !important;
    font-size: 20px;
  }
  #footerlinks  {
    display: flex !important;
    flex-direction: column !important;
    margin-left: 0% !important;
    align-items: center !important;
    justify-content: center !important;
    align-content: center !important;
    text-align: center !important;
  }
  .front_title {
    margin-left: -10dvw !important;
  }

  #trademark {
    margin-left: -40dvw;
  }
  /* Add more styles for mobile screens as needed */
}

/* Media Query for Tablet Screens */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  body {
    /* Adjust styles for mobile screens */
    font-family: "Lato";
    background: none;
  }
  .front_title {
    font-size: 40px !important;
    margin-left: 25% !important;
  }
  .front_logo {
    width: 250px !important;
    height: 250px !important;
    margin-left: 45% !important;
  }
  .footer {
    background: none;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    align-content: center !important;
    width: 80dvw;
    color: white;
    margin-top: 40% !important; /* Increase the margin-top to create more space */
    gap: 15%;
    flex-wrap: wrap !important;
    margin-left: 20dvw;
  }
  .footer a {
    text-decoration: none;
    color: white;
    padding-right: 5px;
    background: none;
    width: 100% !important;
    font-size: 25px;
  }

  #trademark {
    margin-left: -40dvw;
  }

  /* Add more styles for tablet screens as needed */
}

/* Target laptops with a minimum width of 1024px and a maximum width of 1440px */
@media only screen and (min-width: 1024px) and (max-width: 1440px) {
  body {
    /* Adjust styles for mobile screens */
    font-family: "Lato";
    background: none;
  }
  .front_title {
    font-size: 40px !important;
    margin-left: 0% !important;
  }
  .front_logo {
    width: 250px !important;
    height: 250px !important;
    margin-left: 20% !important;
  }
  .footer {
    background: none;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    align-content: center !important;
    width: 30dvw;
    color: white;
    margin-bottom: 50% !important; /* Increase the margin-top to create more space */
    gap: 15%;
    flex-wrap: wrap !important;
    margin-left: -10dvw;
  }
  .footer a {
    text-decoration: none;
    color: white;
    padding-right: 5px;
    background: none;
    width: 100% !important;
    font-size: 13px;
  }

  #trademark {
    margin-left: 35dvw;
    margin-top: -3%;
  }
}

/* Logo Effect */
.front_logo {
  margin: auto auto auto 170px;
  height: 512px;
  width: 512px;
  background: none;
  margin-left: 20%;
  transform-origin: center center;
  transition: transform 0.5s ease, opacity 0.5s ease, filter 0.5s ease;
}

.front_logo:hover {
  transform: rotate(360deg) scale(1.2); /* Rotate and scale the logo on hover */
  filter: hue-rotate(90deg); /* Add a color rotation effect */
}

/* Title Effect */
.front_title {
  margin: 20px 90% auto auto !important;
  font-size: 80px;
  color: white;
  -webkit-text-stroke: 4px black;
  padding-left: 100px;
  animation: slide-in 1s ease-in-out 0.5s forwards !important;
  transition: transform 0.5s ease, opacity 0.5s ease, text-shadow 0.5s ease;
  width: 25%;
}

.front_title:hover {
  transform: scale(1.1) !important; /* Scale the title on hover */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Add a subtle text shadow */
}

/* Animation Keyframes */ 
@keyframes slide-in {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}


/* Media Query for Full HD (1920x1080) Desktops */
@media screen and (min-width: 1920px) and (min-height: 1080px) {
  /* Your styles for Full HD desktops go here */
}

/* Media Query for HD (1366x768) Desktops */
@media screen and (min-width: 1366px) and (min-height: 768px) {
  /* Your styles for HD desktops go here */
}

/* Media Query for UltraWide (2560x1080) Desktops */
@media screen and (min-width: 2560px) and (min-height: 1080px) {
  /* Your styles for UltraWide desktops go here */
}

/* Media Query for 4K (3840x2160) Desktops */
@media screen and (min-width: 3840px) and (min-height: 2160px) {
  /* Your styles for 4K desktops go here */
}

/* Media Query for 5K (5120x2880) Desktops */
@media screen and (min-width: 5120px) and (min-height: 2880px) {
  /* Your styles for 5K desktops go here */
}

/* Media Query for Common 16:9 Aspect Ratio Desktops */
@media screen and (min-aspect-ratio: 16/9) {
  /* Your styles for 16:9 aspect ratio desktops go here */
}

/* Media Query for Common 16:10 Aspect Ratio Desktops */
@media screen and (min-aspect-ratio: 16/10) {
  /* Your styles for 16:10 aspect ratio desktops go here */
}