@import url("mystic.css");

body {
  width: 100dvw;
  height: 100dvh;
  background-color: none;
  margin: 0;
  padding: 0;
  overflow: hidden;

}

header {
  background: none !important;
}

.front_title {
  margin: 20px 10px auto auto;
  font-size: 80px;
  background: none !important;
  color: white;
  -webkit-text-stroke: 4px black;
  padding-left: 100px;
  animation: slide-in 1s ease-in-out 0.5s forwards;
}

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


   /* MAIN */


 #logodiv {
   display: flex;
   justify-content: center;
   align-items: center;
   background: none;
   margin-left:-15%;
  }

  .front_logo {
    margin: auto auto auto 170px;
    height: 512px;
    width: 512px;
    background: none;
    margin-left: 20%;
  }

   #log_section {
    margin-left: 40%;
   display: flex;
   flex-direction: column;
   align-items: center;
   background: none;
    justify-content: center;
    align-items: center;
    width: 50%;
    margin-top: -30%;
 }

   .front_slogan {
     color: white;
     background: none !important;
     position: inherit;
     display: inline-block;
     margin-left: 5%;
     font-size: 75px;
     animation: slide-in 1.5s ease-in-out 1s forwards;
     -webkit-text-stroke: black 2px;
   }

  .front_signup_button {
      background: none;
      padding: inherit;
      height: 50px;
      width: 200px;
      font-size: 40px;
      border-style: solid;
      border-radius: 20px;
      border-color: black;
      text-align: center;
      text-decoration: none;
      margin-top: 5%;
  }
   .front_signup_button:hover {
        background-color: white;
        padding: inherit;
        height: 50px;
        width: 200px;
        font-size: 40px;
        border-style: solid;
        border-radius: 20px;
        border-color: black;
      }
       .front_login_button {
         background: none;
         padding: inherit;
         height: 50px;
         width: 200px;
         font-size: 40px;
         border-style: solid;
         border-radius: 20px;
         border-color: black;
         text-align: center;
         text-decoration: none;
         margin-top: 10%;
       }
       .front_login_button:hover {
            background-color: white;
            padding: inherit;
            height: 50px;
            width: 200px;
            font-size: 40px;
            border-style: solid;
            border-radius: 20px;
            border-color: black;
          }
          .signup_space {
            position: absolute;
            margin: auto auto auto 450px;
            border: 2px;
            border-color: inherit;
            border-style: groove;
            height: 600px;
            width: 500px;
            background: none;
          }
          .signup_submit {
            height: 50px;
            width: 150px;
            position: absolute;
            background: none;
            padding: inherit;
            border-radius: 20px;
            margin: 500px auto auto  180px;
            font-size: 30px;
          }
          .signup_submit:hover {
            height: 50px;
            width: 150px;
            position: absolute;
            background-color: white;
            padding: inherit;
            border-radius: 20px;
            margin: 500px auto auto  180px;
            font-size: 30px;
          }





/* FOOTER */

.footer {
  background: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100dvw;
  color: white;
  margin-top: 15%; /* Increase the margin-top to create more space */
  gap: 5%;
  margin-left: -2% !important;
}

#footerlinks {
  background: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-left: -30%;
  margin-right: -3%;
}

footer a {
  text-decoration: none;
  color: white;
  padding-right: 10px;
  background: none;
}

footer a:hover {
  color: black;
  -webkit-text-stroke: white 0.1px;
  -webkit-transition: ease-in-out 0.5s;
  transition: ease-in-out 0.5s;
}

#trademark {
  color: white;
  background: none;
  font-size: 30px;
  -webkit-text-stroke-color: black;
  -webkit-text-stroke-opacity: 1;
  font-style: italic;
  margin-left: -2% !important;
}


/* Apply opacity to specific elements inside the main content initially */
#logodiv, #log_section {
  opacity: 0;
  animation: fade-in 1.5s ease-in-out 1.5s forwards;
}

/* Slide-in effect for the title */
.front_title {
  opacity: 0;
  animation: slide-in 1s ease-in-out 0.5s forwards;
}

/* Slide-in effect for the slogan (slower) */
.front_slogan {
  opacity: 0;
  animation: slide-in 1.5s ease-in-out 1s forwards;
}

/* Initially hide the "Back to Election" button */
#back-to-election {
  display: none;
}

/* Other styles (you can adjust as needed) */
/* ... */


 /* MEDIA QUERIES */

 
 /* Media Query for Mobile */
@media screen and (max-width: 767px)  { 
  .front_signup_button {
    background: none;
    padding: inherit;
    height: 50px;
    width: 300px;
    font-size: 40px;
    border-style: solid;
    border-radius: 20px;
    border-color: black;
    text-align: center;
    text-decoration: none;
    margin-top: 5%;
}
.front_login_button {
    /* background: none; */
    padding: inherit;
    height: 50px;
    width: 300px;
    font-size: 40px;
    border-style: solid;
    border-radius: 20px;
    border-color: black;
    text-align: center;
    text-decoration: none;
    margin-top: 10%;
}
#log_section {
  margin-left: 25%;
}
.front_slogan {
  font-size: 30px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  margin-top: 70%;
  margin-left: -50% !important;
  width: 100%;
  text-wrap: nowrap !important;
}
body {
  overflow-y: hidden !important;
}
.footer {
  margin-top:10% !important;
}
#footerlinks a {
  width: 80dvw !important;
  font-size: 20px;
}
#footerlinks  {
  display: flex !important;
  flex-direction: column !important;
  margin-left: 0%;
  align-items: center !important;
  justify-content: center !important;
  align-content: center !important;
  text-align: center !important;
}
.front_title {
  margin-left: -10dvw !important;
}
}

 /* Media Query for Tablet Screens */
 @media screen and (min-width: 768px) and (max-width: 1023px) {
  .front_signup_button {
    background: none;
    padding: inherit;
    height: 100px;
    width: 300px;
    font-size: 70px;
    border-style: solid;
    border-radius: 20px;
    border-color: black;
    text-align: center;
    text-decoration: none;
    margin-top: 5%;
}
.front_login_button {
    /* background: none; */
    padding: inherit;
    height: 100px;
    width: 300px;
    font-size: 70px;
    border-style: solid;
    border-radius: 20px;
    border-color: black;
    text-align: center;
    text-decoration: none;
    margin-top: 10%;
}
.front_signup_button:hover {
  background: none;
  padding: inherit;
  height: 100px;
  width: 300px;
  font-size: 70px;
  border-style: solid;
  border-radius: 20px;
  border-color: black;
  text-align: center;
  text-decoration: none;
  margin-top: 5%;
}
.front_login_button:hover {
  /* background: none; */
  padding: inherit;
  height: 100px;
  width: 300px;
  font-size: 70px;
  border-style: solid;
  border-radius: 20px;
  border-color: black;
  text-align: center;
  text-decoration: none;
  margin-top: 10%;
}
#log_section {
  margin-left: 25%;
}
.front_slogan {
  font-size: 70px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  margin-top: 70%;
  margin-left: 5dvw !important;
  width: 100dvw !important;
  text-wrap: nowrap !important;
}
body {
  overflow-y: hidden !important;
}
.footer {
  margin-top: 15% !important;
  margin-left: 15dvw !important;
}
.front_title  {
  padding-left: 35dvw;
}
.footer a {
  text-decoration: none;
  color: white;
  padding-right: 2.5px;
  background: none;
  width: 100% !important;
  font-size: 17.5px;
  justify-content: center !important;
}
#trademark {
  width: 40dvw !important;
  margin-left: -15dvw !important;
}
}



  /* Media Query for Laptops */
@media only screen and (min-width: 1024px) and (max-width: 1440px) {
  .front_signup_button {  
    background: none;
    padding: inherit;
    height: 50px;
    width: 300px;
    font-size: 40px;
    border-style: solid;
    border-radius: 20px;
    border-color: black;
    text-align: center;
    text-decoration: none;
    margin-top: 5%;
}
.front_login_button {
    /* background: none; */
    padding: inherit;
    height: 50px;
    width: 300px;
    font-size: 40px;
    border-style: solid;
    border-radius: 20px;
    border-color: black;
    text-align: center;
    text-decoration: none;
    margin-top: 10%;
}
#log_section {
  margin-left: 40%;
}
.front_slogan {
  font-size: 30px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  margin-top: 15%;
  margin-left: 50% !important;
  width: 100%;
  text-wrap: nowrap !important;
}
body {
  overflow-y: hidden !important;
  margin-top: 10%;
}
.footer {
  margin-top: 22% !important;
}
#trademark {
  margin-left: 65%  !important;
}
}

.front_signup_button,
.front_login_button {
  background: none;
  padding: inherit;
  height: 50px;
  width: 200px;
  font-size: 40px;
  border: 2px solid black;
  border-radius: 20px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; /* Add transitions */
  animation: heartbeat 1.5s infinite; /* Add heartbeat animation */
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.05); /* Slightly scale up */
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.05); /* Slightly scale up again */
  }
  100% {
    transform: scale(1);
  }
}

.front_signup_button:hover,
.front_login_button:hover {
  background-color: orange; /* Change to a more prominent color on hover */
  color: white; /* Change text color on hover */
  transform: scale(1.05); /* Slightly scale up on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle shadow on hover for depth */
}