body {
  background-color: #f4f4f4;
  font-family: Arial,sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh
}

.container {
  max-width: 600px;
  padding: 20px;
  box-sizing: border-box;
  animation: fadeIn .5s ease-in-out
}

.result-details {
  background-color: #fff;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 10px 20px rgba(0,0,0,.1);
  margin-top: 20px;
  transition: transform .3s ease-in-out;
  height: auto
}

.result-details:hover {
  transform: scale(1.03)
}

.alert-danger,.error-message {
  color: #dc3545;
  font-weight: 700;
  margin-bottom: 20px
}

.result-info {
  padding: 10px 0
}

.result-info p {
  margin: 0
}

.pass {
  color: #28a745
}

.fail {
  color: #dc3545
}

.phone-input {
  margin-bottom: 20px
}

.check-result-btn,.reset-session-link {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .3s ease,color .3s ease
}

.check-result-btn {
  background-color: #007bff;
  margin-right: 10px
}

.reset-session-link {
  border: 1px solid #007bff;
  color: #363636
}

.reset-session-link:hover {
  background-color: #539ff0
}

.check-result-btn:hover {
  background-color: #0056b3
}

.reset-session-link:active {
  background-color: #007bff;
  color: #fff
}

@keyframes fadeIn {
  from {
      opacity: 0
  }

  to {
      opacity: 1
  }
}

.congratulations {
  display: inline-block;
  color: #28a745;
  font-size: 24px;
  font-weight: 700;
  transform-origin: 50% 50%;
  animation: scaleUp .5s ease-in-out
}
.button-container{
  text-align: right;
  
}

@keyframes scaleUp {
  from {
      transform: scale(0)
  }

  to {
      transform: scale(1)
  }
}