@import url("fonts/montserrat.css");
@import url("fonts/roboto.css");
@import url("/css/index/header.css");
@import url("./main/task1.css");
@import url("./main/task2.css");
@import url("./main/task3.css");
@import url("/css/index/footer.css");

:root {
   --primary-color: #ff7b47;
   --secondary-color-1: #0d5c63;
   --secondary-color-2: #17213c;
   --text-color: #252b42;
   --second-text-color: #737373;
   --light-text-color: #fff;
   --dark-background-color: #252b42;
   --light-background-color: #fff;
   --hover-color: #2a7cc7;
   --disabled-element-color: #8ec2f2;
   --muted-color: #bdbdbd;
   --success-color: #2dc071;
   --alert-color: #e77c40;
   --danger-color: #e74040;
   --font-family: "Montserrat", sans-serif;
   --second-family: "Roboto", sans-serif;
}
.main {
   background-color: #fafafa;
}
h1,
h2,
h3,
h4,
h5,
h6 {
   margin: 0;
}
* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}
li {
   list-style-type: none;
   /* Убираем маркеры */
}
html {
   background: var(--light-text-color);
   text-decoration: none;
   scroll-behavior: smooth;
   font-size: 62.5%;
   font-weight: var(--font-weight);
   color: var(--second-text-color);
   font-family: var(--font-family), sans-serif;
}

* {
   padding: 0px;
   margin: 0px;
   border: none;
}
/*Для телефонов (до 600px)*/
@media only screen and (max-width: 600px) {
   .container {
   }
}
/*Для планшетов (от 601px до 1024px)*/
@media only screen and (min-width: 60px) and (max-width: 1024px) {
   .container {
      padding: 0 4rem;
   }
}
/*Для ноутбуков (от 1025px до 1440px)*/
@media only screen and (min-width: 1024px) and (max-width: 1440px) {
   .container {
      padding: 0 10rem;
   }
}
/*Для ПК (от 1441px и выше)*/
@media only screen and (min-width: 1440px) {
   .container {
      padding: 0 19.5rem;
   }
}
button{
   transition: all 0.2s ease-in;
}
html {
   background: var(--light-text-color);
   text-decoration: none;
   scroll-behavior: smooth;
   font-size: 62.5%;
   font-weight: var(--font-weight);
   color: var(--second-text-color);
   font-family: var(--font-family), sans-serif;
}
* {
   padding: 0px;
   margin: 0px;
   border: none;
}
.main {
   padding-top: 10rem;
   display: flex;
   align-items: center;
   flex-direction: column;
   row-gap: 19.5rem;
   height: 100%;
   padding-bottom: 10rem;
   background-color: #fafafa;
}
.main_container {
}
.grid_task {
}
.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border-width: 0;
}.skip-link {
   position: absolute;
   top: -40px;
   left: 0;
   background: #000;
   color: #fff;
   padding: 8px;
   z-index: 1000;
   transition: top 0.3s;
 }

 .skip-link:focus {
   top: 0;
 }