a {
    color: #0099ff;
    text-decoration: underline;
  }
body {
    min-height: 100vh;
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
    background-color: #1d1d1d;
    color: #ffffff;
    font-size: 16px;
    font-family: "Consolas", "Courier New", monospace;
    margin-left: 10px;
    margin-right: 0px;
}
.site {
    max-width: 651px;
    
    margin: 0 auto;
    padding: 0px 15px 0px 0px; 

    display: grid;
    
    grid-template-columns: 1fr;
    grid-template-areas: 
            "header"
            "main"
            "footer";
          } 
h1 {

    font-size: 24px;
    margin-top: 19px;
    font-weight: normal;
    text-align: center;
        }
.site-header p {
    display: block;
    box-sizing: border-box;
    
    width: 100%;
    padding: 0;
    
    margin-bottom: 16px;
    font-size: 16px;
    text-align: left;
   
} 

.site-main {
    
    margin-top: 37px;
}                 
  
h2 {
    display: block;
    font-size: 18px;
    margin-left: 76px;
    font-weight: normal;
    margin-top: 0px;
    margin-bottom: 13px;
}
h3 {
    font-size: 16px;
    font-weight: normal;
    margin-top: 18px;
    margin-bottom: 0px;
}
.faq {
    font-size: 24px;
    margin-bottom: 23px;
    margin-top: 74px;
    margin-left: 0px;

}
footer h2 {
    font-size: 24px;
    margin-left: 0px;
    
}  
ul {
    margin-left: 96px;
    margin-top: 0px; /* Отступ слева */
    padding-left: 0px;
}

li {
    list-style-type: none;
    margin-bottom: 5px;
} 
span {
    color: #ffff00;
    text-decoration-line: underline;
    text-decoration-color: #ffff00;
  }
.first-p {
    margin-bottom: 11px !important;
}
.p-header {
    margin-top: 0px;
} 
  li a {
      color: #f7f4f1;
      text-decoration: none;
    }
  li a:hover {
      text-decoration: underline;
      color: #ffff00;
     } 

.main p {
    display: block;
    border-left: 1px solid #ffffff; /* Параметры линии */ 
    margin-left: 53px; /* Отступ слева */
    margin-top: 11px;
    margin-bottom: 27px;
    padding-left: 22px; /* Расстояние от линии до текста */
    
} 
               
.source {
    font-size: 12px;
    text-decoration: none;
    color: #ffffff;
}
.hundred {
    margin-bottom: 27px;
}
div .footer {
    margin-left: 79px;
}
footer p {
    font-size: 14px;
    margin-top: 22px;
    margin-bottom: 1px;
}
.footer p:nth-child(2) {
    margin-top: 12px;
}
.footer p:last-child {
    margin-top: 10px;
}
footer h2 {
    margin-top: 83px;
}
@media (max-width: 320px) {
    body {
        margin: 0px 0px 8px 0px;
    }
    /* .site {
        margin-left: 19px;
    } */
    .main p {
        margin-left: 12px; 
        padding-left: 14px;
    }
   
    h1 {
        margin-top: 16px;
        margin-left: 50px;
        text-align: start;
    }
    h2 {
        margin-left: 12px;
    }
    h3 {
        margin-left: 12px;
    }
    .faq {
        margin-left: 12px;
    }
    .links-footer {
        margin-left: 12px;
    }
    div .footer {
        margin-left: 12px;
    }
    .site-header p {
        margin-left: 12px;
        padding-right: 10px;
        
    }
    ul {
        margin-left: 27px;
    }
    footer h2 {
        margin-top: 33px;
    }
    
}
@media (min-width: 320px) and (max-width: 651px) {
    .main p {
        margin-left: calc(12px + (53 - 12) * ((100vw - 320px) / (651 - 320)));
        padding-left: calc(14px + (22 - 14) * ((100vw - 320px) / (651 - 320)));
    }
    footer h2 {
        margin-top: calc(33px + (83 - 33) * ((100vw - 320px) / (651 - 320)));
    }
    div .footer {
        margin-left: calc(12px + (79 - 12) * ((100vw - 320px) / (651 - 320)));
    }
    ul {
        margin-left: calc(27px + (96 - 27) * ((100vw - 320px) / (651 - 320)));
    }
    h2 {
        margin-left: calc(12px + (76 - 12) * ((100vw - 320px) / (651 - 320)));
    }
}