div.form{
		  background-color:#ffffff25;
		  max-width: 70vw;
		  margin-top:5%;
	}
	form {
  display: flex;
  flex-direction: column;
  width: 50%;
}

label, input {
  width: 90%;
  margin-bottom: 10px;
}

input[type="text"], input[type="password"] {
  padding: 6px 01px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color:#00000050;
  backdrop-filter:blur(1px);
}


input[type="submit"] {
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 0; /* Alapértelmezett térköz */
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

input[type="submit"] {
  animation: pulse 2s infinite;
}

@media (min-width: 600px) {
  form {
    flex-direction: row;
  }

  label, input {
    width: 45%;
    margin-bottom: 20;
  }

  label {
    text-align: right;
    padding-right: 20px;
  }
}
@media (max-width: 480px) {
  div.form {
    margin-top: 20%;
  }

  input[type="submit"] {
    margin-bottom: 20px; /* Mobilon nagyobb térköz */
    color: skyblue;
    border: none;
    font-size: 16px;
    border-radius: 4px;
    animation: pulse 2s infinite; /* Pulzáló animáció alkalmazása */
    padding: 10px 25px; /* Kisebb gomb esetén is megfelelő párnázás */
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Animáció definíciója kívül a stílus blokkban */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}




::placeholder { 
color: gray;
opacity: 1; 
}

:-ms-input-placeholder { 
  color: gray;
}

::-ms-input-placeholder { 
  color: gray;
}
  .text-success{
    color:lightgreen;
  }
  .text-danger{
    color:crimson;
  }
  .is-valid{
    background-color:#060 !important;
    color:#0f0 !important;
  }
  .is-invalid{
    background-color:#600 !important;
    color:#f00 !important;
  }
  
    body {
            font-family: Arial, sans-serif;
            margin: 20px;
            text-align: center;
        }
   .highlight-text {
            font-weight: bolder;
            font-size: 13px;
            text-align: left;
            /*display: inline-block;*/
            color: #ff0000;
            animation: blink 1s infinite;
        }

        @keyframes blink {
            50% {
                opacity: 0;
            }
        }
        
        #rules {
            width: 80%;
            height: 120px;
            font-size: 11px;
            font-weight: bolder;
            color: #ccc;
            margin-top: 20px;
        }
    
            #accept {
            margin-top: 20px;
        }