/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: #f4f4f4;
  color: #333;
  width: 100%;
  text-align: center;
  margin: auto;
  flex-direction: column;
  align-items: center;
  display: grid;
  padding: 0;
  box-sizing: border-box;
}
.header {
  background-color: #007BFF; /* Blue background */
  color: white; /* White text */
  display: flex;
  align-items: center;
  position: relative;
  margin:10px;
  padding: 0 20px; /* Padding for spacing */
}

/* Container for buttons on the left */
.buttons {
  display: flex;
  gap: 10px; /* Space between buttons */
}

/* Style for green link buttons */
.back-button {
  background-color: green;
  color: white;
  padding: 8px 12px;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
}

/* Style for the header title, centered */
.header-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
header {
  display: flex;
  background-color: blue;
  width: 100%; /* Полная ширина страницы */
  color: white;
  padding: 10px 0; /* Немного увеличил padding сверху/снизу для красоты */
  align-items: center;
  text-align: center;
  margin: auto;
  justify-content: center; 
  position: relative;
}

main {
  margin: auto;
  padding: 20px;
  width: 80%;
  background: #fff;
  align-items: center;
  justify-content: center; /* Центруем горизонтально */
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

footer {
  clear: both;
  text-align: center;
  background-color: #333;
  color: #fff;
  margin: auto;
  position: absolute;
  bottom: 0;
  width: 100%; /* Полная ширина страницы */
  padding: 10px 0; /* Немного увеличил padding сверху/снизу для красоты */
}
    h1 {
      margin-top: 0;
    }
    a.button {
      display: inline-block;
      padding: 20px;
      background-color: blue;
      color: white;
      text-decoration: none;
      border-radius: 12px;
      margin: 10px;
    }
    a.button:hover {
      background-color: #F88017;
    }
       password {
       width: 100%;
       padding: 30px;
       font-size: 1.2em;
       margin: 20px auto; /* top/bottom 20px, left/right auto (centered) */
       border: 2px solid #ccc;
       border-radius: 5px;
    }
       password:focus {
       outline: none;
       border-color: #4CAF50;
       box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
    }
    .back-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none; /* removes underline */
  padding: 10px 15px;
  color:white;
  background-color: green;
  border-radius: 5px;
  font-size: 1em;
  transition: background-color 0.3s, transform 0.2s;
}

.back-link:hover {
  background-color: darkgreen;
  transform: translateY(-2px);
}

  .color-swatch {
    width: 100px;
    height: 100px;
    border: 2px solid #ccc;
    cursor: pointer;
    display: inline-block;
    border-radius: 8px;
    transition: border-color 0.3s;
    padding: 10px;
    margin: 10px;
  }

  .color-swatch:hover {
    border-color: #888;
  }

  /* Hide the default color input */
  input[type="color"] {
    display: none;
  }

  /* Style for the color info text */
  .color-info {
    margin-top: 15px;
  }
  
  qrcode { margin-top: 20px; }
  
   #qrcode { margin-top: 20px; }