/* Fonts & Colors */
:root {
  --black: #0a0a0a;
  --yellow: #ffd500;
  --green: #00b050;
  --white: #fff;
  --gray: #ccc;
}

/* Общие стили для всего сайта */
body {
    margin: 0;
    padding: 0;
    font-family: "Arial", sans-serif;
    background-color: #f4f7f9;
    color: #333;
    line-height: 1.6;
    background-color: #333;
}

a {
    color: #1eff00;
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: #48b300;
}

header, footer {
    background-color: var(--black);
    color: var(--gray);
    padding: 20px 0;
    text-align: center;
}

header h1, footer p {
    margin: 0;
}
header{
    display:flex;
    justify-content: space-around;
    align-items: start;
    width:100%;
}
nav a {
    margin: 0 15px;
    font-weight: bold;
}

main {
    max-width: 1000px;
    margin: 30px auto;
    padding: 0 20px;
}
article{
    color:white;
    text-shadow: 1px 1px black;
}
h1 {
    color:var(--green);
}
h2, h3 {
    color:var(--yellow);
}
h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

h2 {
    font-size: 2rem;
    margin-bottom: 15px;
}

p {
    margin-bottom: 15px;
}

section {
    margin-bottom: 40px;
}

/* Кнопки */
button, .btn {
    padding: 10px 20px;
    background-color: #2563eb;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all ease-out 0.3s;
}

button:hover, .btn:hover {
    background-color: #1e40af;
}

/* Карточки / блоки */
.card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 20px;
    margin-bottom: 20px;
}

/* Адаптивность */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    main { padding: 0 15px; }
}

.nav > span{
  display:none;
}
@media(max-width:700px){
  .nav > a{
    display:none;
  }
  .nav > span{
    display:block;
    background-color: var(--yellow);
    width:70px;
    height:3px;
  }
  /* .nav > span:hover{
    background-color:var(--green);
  } */
  /* body > main > header > nav > span:nth-child(6) */
  .nav > span:nth-child(2){
    width:54px;
    margin:7px;
  }
}
.menu{
  display:grid;
  align-content: center;
  justify-content: center;
  width:100%;
  height:1vh;
  position:fixed;
  top:0;
  background-color: #0a0a0a;
  z-index: 1001;
  transition: all 1s ease-out;
  font-size:0px;
  opacity:0;
}
.menu > a{
  font-size:1px;
  transition: all 1s ease-out;
  opacity:0;
  color:#00b050;
  text-decoration: none;
}
.menu > a:hover{
  color:#ffd500;
  transition: all 1s ease-out;
}