body {
   background: #d5d4f8;
   font-family: Arial, sans-serif;
   margin: 0;
   padding: 0;
}
/* Glavni container */
.container {
   width: 400px;
   max-width: 90%; /* da stane na mobilne */
   margin: 80px auto;
   padding: 20px;
   background: #ffffff;
   text-align: center;
   border-radius: 70px;
   box-shadow: 0px 0px 10px #7f099c;
}
h1 {
   margin-bottom: 20px;
}
.btn {
   display: inline-block;
   padding: 15px 38px;
   background: #a17cd1;
   color: white;
   text-decoration: none;
   border-radius: 70px;
   margin-top: 10px;
   transition: 0.3s;
}
.btn:hover {
   background: #a296b9;
}
input {
   padding: 10px;
   width: 90%;
   margin: 10px 0;
}

@media (max-width: 480px) {
   .container {
       width: 95%;
       padding: 15px;
       border-radius: 40px;
       margin-top: 40px;
   }
   .btn {
       width: 100%;
       padding: 14px;
   }
   input {
       width: 95%;
   }
}
/* Tableti */
@media (max-width: 768px) {
   .container {
       width: 80%;
       border-radius: 50px;
   }
}
/* Veći ekrani / laptopi */
@media (min-width: 1200px) {
   .container {
       width: 450px;
   }
}