/* 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." */
/* Общие стили */
/* Палитра и базовые установки */
:root {
  --green: #a8d5ba; /* пастельный зелёный */
  --black: #000000;
  --white: #ffffff;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--green);
  color: var(--black);
  font-family: Tahoma, Arial, sans-serif; /* Y2K вайб */
  line-height: 1.6;
}

/* Титульный блок */
.hero {
  background: var(--green);
  text-align: center;
  padding: 10px;
  border-bottom: 3px solid var(--black);
}

.hero h1 {
  margin: 0 0 0px 0;
  font-weight: 700;
}

.hero p {
  margin: 0 0 25px 0;
  color: #222;
}

/* Навигация (4 квадратные кнопки) */
.nav-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 10px;
}

.nav-buttons a {
  display: block;
  width: 140px;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--black);
  border: 2px solid var(--black);
  background: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%);
  box-shadow:
    inset 0 0 5px rgba(255,255,255,0.8),
    inset 0 4px 6px rgba(255,255,255,0.6);
  transition: background .2s ease, box-shadow .2s ease;
}

.nav-buttons a:hover {
  background: linear-gradient(to bottom, #d0d0d0 0%, #b0b0b0 100%);
  box-shadow:
    inset 0 0 8px rgba(0,0,0,0.2),
    inset 0 4px 8px rgba(0,0,0,0.3);
}

/* Карточка контента */
.card {
  background: var(--white);
  border: 3px solid var(--black);
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  text-align: left;
}

.card p {
  margin: 0 0 25px 0;
}

/* Меньше анимаций для тех, кому это важно */
@media (prefers-reduced-motion: reduce) {
  .nav-buttons a {
    transition: none;
  }
  /* Галерея */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  max-width: 900px;
  margin: 20px auto;
}

.gallery-item {
  background: linear-gradient(to bottom, #ffffff, #e0e0e0);
  border: 2px solid #333;
  padding: 8px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  text-align: center;
}

.gallery-item img {
  max-width: 100%;
  cursor: pointer;
  border: 1px solid #666;
}

.gallery-item p {
  margin: 8px 0 0;
  font-size: 14px;
}

/* Модальное окно */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(0,0,0,0.8);
}

.modal-content {
  display: block;
  max-width: 80%;
  margin: auto;
}

#caption {
  text-align: center;
  color: #fff;
  padding: 10px;
}

#close {
  position: absolute;
  top: 20px;
  right: 40px;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
}

/* Общие стили */
body {
    font-family: Arial, sans-serif;
    color: black;
    margin: 0;
    padding: 0;
}

/* Титульный блок */
#hero {
    background-color: #a8d5ba;
    color: black;
    text-align: center;
    padding: 10px;
    font-family: Arial, sans-serif;
}

#hero h1 {
    margin-bottom: 0px;
}

#hero p {
    margin-bottom: 25px;
    color: #222;
}

/* Кнопки навигации */
.nav-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.nav-buttons a {
    background: linear-gradient(to bottom, white 0%, #e0e0e0 100%);
    color: black;
    text-decoration: none;
    padding: 20px;
    width: 140px;
    text-align: center;
    border: 2px solid black;
    font-weight: bold;
    box-shadow: inset 0 0 5px rgba(255,255,255,0.8),
                inset 0 4px 6px rgba(255,255,255,0.6);
    text-transform: uppercase;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.nav-buttons a:hover {
    background: linear-gradient(to bottom, #d0d0d0 0%, #b0b0b0 100%);
    box-shadow: inset 0 0 8px rgba(0,0,0,0.2),
                inset 0 4px 8px rgba(0,0,0,0.3);
}

/* Приветственный текст */
#intro {
    background-color: white;
    border: 3px solid black;
    padding: 20px;
    margin: 40px auto;
    max-width: 800px;
    font-family: Tahoma, Arial, sans-serif;
    color: black;
    line-height: 1.6;
    text-align: left;
}

#intro p {
    margin-bottom: 25px;
}

style.css

/* Палитра и базовые установки */
:root {
  --green: #a8d5ba; /* пастельный зелёный */
  --black: #000000;
  --white: #ffffff;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--green);
  color: var(--black);
  font-family: Tahoma, Arial, sans-serif; /* Y2K вайб */
  line-height: 1.6;
}

/* Титульный блок */
.hero {
  background: var(--green);
  text-align: center;
  padding: 10px;
  border-bottom: 3px solid var(--black);
}

.hero h1 {
  margin: 0 0 0px 0;
  font-weight: 700;
}

.hero p {
  margin: 0 0 25px 0;
  color: #222;
}

/* Навигация (4 квадратные кнопки) */
.nav-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 10px;
}

.nav-buttons a {
  display: block;
  width: 140px;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--black);
  border: 2px solid var(--black);
  background: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%);
  box-shadow:
    inset 0 0 5px rgba(255,255,255,0.8),
    inset 0 4px 6px rgba(255,255,255,0.6);
  transition: background .2s ease, box-shadow .2s ease;
}

.nav-buttons a:hover {
  background: linear-gradient(to bottom, #d0d0d0 0%, #b0b0b0 100%);
  box-shadow:
    inset 0 0 8px rgba(0,0,0,0.2),
    inset 0 4px 8px rgba(0,0,0,0.3);
}

/* Карточка контента */
.card {
  background: var(--white);
  border: 3px solid var(--black);
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  text-align: left;
}

.card p {
  margin: 0 0 25px 0;
}

body {
  margin: 0;
  font-family: Tahoma, Arial, sans-serif;
  background: linear-gradient(to bottom, #c0d8ff 0%, #a0c4ff 100%);
  color: #000;
}

/* Глянцевая Y2K-кнопка */
.nav-buttons a {
  display: inline-block;
  padding: 12px 20px;
  border: 2px solid #333;
  border-radius: 6px;
  background: linear-gradient(to bottom, #ffffff 0%, #dcdcdc 48%, #c0c0c0 49%, #a0a0a0 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(0,0,0,0.3),
    2px 2px 4px rgba(0,0,0,0.3);
  text-decoration: none;
  font-weight: bold;
  color: #000;
  text-shadow: 1px 1px #fff;
}

.nav-buttons a:hover {
  background: linear-gradient(to bottom, #f0f0f0 0%, #d0d0d0 48%, #b0b0b0 49%, #909090 100%);
}

/* Пластиковая карточка */
.card {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  background: linear-gradient(to bottom, #fdfdfd 0%, #f5f5f5 100%);
  border: 2px solid #333;
  border-radius: 8px;
  box-shadow:
    4px 4px 8px rgba(0,0,0,0.4),
    inset 0 1px 3px rgba(255,255,255,0.6);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  max-width: 900px;
  margin: 0 auto;
}

.gallery-item {
  background: linear-gradient(to bottom, #ffffff, #e0e0e0);
  border: 2px solid #333;
  padding: 8px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  text-align: center;
}

.gallery-item img {
  max-width: 100%;
  cursor: pointer;
  border: 1px solid #666;
}

.gallery-item p {
  margin: 8px 0 0;
  font-size: 14px;
}

/* Модальное окно */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(0,0,0,0.8);
}

.modal-content {
  display: block;
  max-width: 80%;
  margin: auto;
}

#caption {
  text-align: center;
  color: #fff;
  padding: 10px;
}

#close {
  position: absolute;
  top: 20px;
  right: 40px;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
}

body {
  background: #dff0df;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: #111;
}

/* Y2K-кнопка */
.y2k-button {
  display: inline-block;
  background: linear-gradient(to bottom, #fff, #c4e3c4);
  border: 2px solid #333;
  color: #000;
  padding: 8px 14px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

.y2k-button:hover {
  background: linear-gradient(to bottom, #fff, #a6d8a6);
}

/* Галерея */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  max-width: 900px;
  margin: 20px auto;
}

.gallery-item {
  background: linear-gradient(to bottom, #ffffff, #e0e0e0);
  border: 2px solid #333;
  padding: 8px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  text-align: center;
}

.gallery-item img {
  max-width: 100%;
  cursor: pointer;
  border: 1px solid #666;
}

.gallery-item p {
  margin: 8px 0 0;
  font-size: 14px;
}

/* Модальное окно */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(0,0,0,0.8);
}

.modal-content {
  display: block;
  max-width: 80%;
  margin: auto;
}

#caption {
  text-align: center;
  color: #fff;
  padding: 10px;
}

#close {
  position: absolute;
  top: 20px;
  right: 40px;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 900px;
  margin: 20px auto;
}

.gallery-item {
  background: linear-gradient(to bottom, #ffffff, #e0e0e0);
  border: 2px solid #333;
  padding: 5px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Модалка */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(0,0,0,0.85);
}

.modal-content {
  display: block;
  max-width: 90%;
  margin: auto;
}

#caption {
  text-align: center;
  color: #fff;
  padding: 10px;
}

#close {
  position: absolute;
  top: 20px;
  right: 40px;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
}
}