/* node/app01/views/style.css */

/* Dark background with light text */
/*
*/

:root {
  --bg_image: url('');
}

body {
  margin: 0;
  padding: 0;
  background-color: #EEE;
  color: #eee;            /* Light text */
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;    /* Ensure full height for center alignment if desired */
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: var(--bg_image);
  filter: blur(2px);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  z-index: -1;
}

/* For landscape orientation on larger screens */


.title {
  margin-top: 40px;
  font-size: 2em;
  color: #FFF;
}

/* The "frame" that visually contains content in the center */
.frame {
  background: #222;         /* Dark grey inner background */
  border: 2px solid #900;   /* Red border around the frame */
  border-radius: 6px;
  width: 90%;
  max-width: 600px;
  padding: 3em;
  margin: 140px auto;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.7);
}

/* Spinner container & animation */
.spinner {
  width: 60px;
  height: 60px;
  border: 6px solid #333;   /* Slightly lighter grey ring */
  border-top: 6px solid #c00; /* Red ring for top arc */
  border-radius: 50%;
  margin: 0 auto 1em;
  animation: spin 1s linear infinite;
}

/* Keyframe for the spinner rotation */
@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Simple alert boxes with different accent colors */
.alert {
  padding: 20px;
  margin-bottom: 15px;
  border-radius: 4px;
}

.alert-danger {
  background-color: #3f0000; /* Dark red background */
  color: #faa;               /* Light red text */
}

.alert-success {
/*  background-color: #003300; /* Dark green background */
  background-color: #068a06; /* Dark green background */
/*  color: #afa;               /* Light green text */
  margin: 20px 21px 23px;
}

/* Text used during the checking process */
.check-text {
  font-size: 1.1em;
  color: #ccc;
}