*{margin: 0; padding: 0; box-sizing: border-box;}
body {
  width: 100%;
  min-height: 100vh;
  font-family: Arial, sans-serif;
  background: var(--bg-main);
  overflow-x: hidden;
}


.register{color: var(--color-primary);}
/* @keyframes spin {
    0% {transform: rotateY(0deg) scale(1.2);}
    100% {transform: rotateY(360deg);} 
} */

#reg-wrapper{
    border-radius: 6px;
    box-shadow: 1px 3px 6px gray; 
    display: flex; 
    flex-direction: column; 
    gap: 4em; width: 50%; 
    height: fit-content;
    margin: 5rem auto;
    padding: 1em; 
}
#reg-wrapper h2{
   color: var(--color-primary);
}
#regForm{ 
    display: flex; 
    flex-direction: column;   
    gap: .5em;
}
input{
     border-radius: 5px;
     outline: none; 
     padding:1em; 
     width: 100%;
    }
    .sign{color: black;}

.btn {
  background: var(--color-primary);
  padding: .2em;
  width: clamp(7em, 12vw, 12em);
  height: 3em;
  border-radius: 1em;
  border: none;
  color: white;
  font-size: 1em;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease; 
}
.btn:hover{
  transform: scale(1.2);
  transition: transform 0.2s ease;
}