html {
  font-size: 1.3em;
}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: arial;
  background-color: #1f1f1f;
  height: 100%;
}

.box2 {
 position: absolute;
    top: 50%;
    right: 50%;
    width: 95vw;
    transform: translate(50%, -50%);
    text-align: center;
    color: #EDBD79;
    display: flex
;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
	
}

.formout {
  display: flex;
  justify-content: center;
  bottom: 0;
}

form {
  margin: auto;
}

#password {
  border: 2px solid white;
  margin: 30px 0;
  padding: 10px;
  width: auto;
  max-width: 100%;
  outline: 0;
  background: white;
  color: black;
  font: inherit;
  line-height: normal;
}

/* Fade animations */
#fadein {

    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}


.wrong {
  animation: wrongPass 2s ease-out infinite;

}

@keyframes wrongPass {
  0% {
    color: white;
  }
  10% {
    color: white;
  }
  20% {
    color: white;
  }
  30% {
    color: black;
  }
  40% {
    color: white;
  }
  50% {
    color: black;
  }
  60% {
    color: white;
  }
  70% {
    color: black;
  }
  80% {
    color: white;
  }
  90% {
    color: black;
  }
  100% {
    color: white;
  }
}

/* Additional styles for responsiveness and buttons omitted for brevity. */
/* (The rest of your CSS code can remain as provided.) */


     /* New styles for the SVG border around the form */
      .password-border {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px; /* adjust padding as needed for the border space */
      }
      .password-border form {
        position: relative;
        z-index: 1;
      }
	  #password {
        text-align: center;
        font-family: 'Cinzel', serif;
        font-size: 1.2em;
        border: none;
        background: transparent;
        outline: none;
        color: #EDBD79;
	  width: 100%;}
	  
      .border-svg {
        position: absolute;
        top: 23px;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
		
        pointer-events: none; /* so clicks go to the form */
      }
	  
	     .st0{fill:none;stroke:#EDBD79;stroke-width:7;stroke-miterlimit:10;}
        .st1{fill:none;stroke:#EDBD79;stroke-width:4;stroke-miterlimit:10;}
	  
  /* Custom Tippy theme */
      .tippy-box[data-theme~="custom"] {
        background-color: #000; /* light gray */
        color: #EDBD79; /* dark gray text */
        text-align: center;
      }
      .tippy-box[data-theme~="custom"] .tippy-arrow {
        color: #000; /* arrow color matches background */
      }
	 
@media screen and (max-width: 420px) {
  .text {
    width:100%!important;
  }
}

a:hover {
color:#EDBD79!important;}


#forgot:hover {
color:#EDBD79!important;}
}