body, html {
  height: 100%;
  margin: 0;
  padding: 0;
  background: rgb(66,20,42);/* Fallback for old browsers */
  background: linear-gradient(0deg, rgba(66,20,42,1) 0%, rgba(128,71,99,1) 56%, rgba(129,56,91,1) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
}

.container.card {
  text-align: center;
  padding: 50px 20px;
  background:#f4f4f4;
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 4px );
  -webkit-backdrop-filter: blur( 4px );
  border-radius: 10px;
  border: 1px solid rgba( 255, 255, 255, 0.18 );
  position: relative;
  width: auto;
  min-width: 500px;
  margin: auto;
  overflow: hidden;
}

/* Media query for mobile devices */
@media (max-width: 768px) {
  .container.card {
    min-width: 0; /* Override min-width for mobile */
    width: 100%; /* Full width on mobile */
    max-width: 100%; /* Ensures container doesn't exceed the viewport width */
    min-height: 80dvh;
  }
}

h1 {
  font-size: 1.5em;
  color: #81385b;
}

.logo {
  width: 200px;
  height: auto;
  display: block;
  margin: 0 auto 20px;
}

.form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.row {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 10px;
}

.column {
  width: 100%;
  padding: 5px;
}

input[type="text"] {
  width: calc(100% - 20px);
  padding: 10px;
  margin-top: 8px;
  margin-bottom: 14px;
  border-radius: 6px;
  border: 1px solid #81385b;
  box-sizing: border-box;
  font-size:15px;
  font-family: 'Montserrat', sans-serif;
}

.button-row {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0;
}

button {
  padding: 15px 20px;
  background: rgb(0,90,134);
  background: linear-gradient(0deg, rgba(0,90,134,1) 0%, rgba(33,157,212,1) 49%, rgba(0,172,242,1) 100%);
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.3s;
  max-width: 70%;
  width: auto;
  margin: 0 auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  font-family: 'Montserrat', sans-serif;
}

button:hover {
  background: rgb(0,110,164);
  background: linear-gradient(0deg, rgba(0,110,164,1) 0%, rgba(37,172,232,1) 49%, rgba(65,200,255,1) 100%);
}

label {
  display: block;
  text-align: center;
  margin-bottom: 5px;
  padding-left: 10px;
}

.url-box {
  text-align: center;
  background-color: #f4f4f4;
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
}

.final-url {
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  word-break: break-all;
  display: inline-block;
  margin-top: 10px;
}

.reset-button {
  padding: 15px 20px;
  background: linear-gradient(135deg, rgba(26,4,14,1) 0%, rgba(50,25,35,1) 100%);
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  margin: 20px auto 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  font-family: 'Montserrat', sans-serif;
}

.reset-button:hover {
  background: linear-gradient(135deg, rgba(20,3,11,1) 0%, rgba(40,20,30,1) 100%);
}

/* New styles for card-like elements */
.card {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  padding: 20px;
}

/* Style adjustments for links */
a {
  color: #81385b; /* Brand color for links */
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}