:root {
  --light-green: #a3d9a5;
  --medium-green: #2e8b57;
  --light-grey: #e1dfe0;
  --dark-green: #1e5631;
  --text-color: #1a1a1a;
  --bg-color: #f6fff8;
}

/* Общие стили */
body {
  margin: 0;
  font-family: "Segoe UI", sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}



a{
    text-decoration: none;
    list-style: none;
}

.art li a{
  text-decoration: none;
  list-style: none;
  color: black;
}

.arh li a{
  text-decoration: none;
  color: black;
}

a:hover{
  color: var(--dark-green);
}

a:focus-visible {
  outline: 1px solid var(--dark-green);
  border-radius: 10px;
}

pre .language-markdown{
  max-width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
  text-align: justify;
  font-family: "Segoe UI", sans-serif;
  line-height: 1.5;

}

/* .o-list {
  line-height: 1.5;
} */

p{
  text-align: justify;
  text-indent: 20px;
}
ol, ul {

  text-align: justify; 
}

th, tr, td{
  padding: 10px; 
  border: 1px solid black;
  text-align: center;
}

table {
  margin: auto;
}

.o-list {
  counter-reset: level1;
  list-style-type: none;
  padding-left: 0;
}
.o-list > li {
  counter-increment: level1;
  counter-reset: level2;

}
.o-list > li::before{
  content:counter(level1) ".";
}
.o-list ul {
  padding-left: 0;
}
.o-list ul > li {
  counter-increment: level2;
  list-style-type: none;
  padding-left: 0;
}
.o-list ul > li::before{
  content:counter(level1)"."counter(level2)".";
}



.layout {
  display: flex;
  min-height: 100vh;
}

/*Бургер*/
#burger {
  display: none;
  /* background: none;
  border: none;
  color: black;
  font-size: 1.8em;
  cursor: pointer;
  transition: transform 0.3s; */
}

/* Сайдбар для больших экранов */
#sidebar {
  background-color: var(--medium-green);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 250px;
}


/* Меню страниц */
#menu {
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  padding: 10px 10px;

}

#menu li {
  margin: 5px 0;
  text-align: center;
}

#menu a {
  color: white;
  text-decoration: none;
  display: block;
  padding: 10px;
  border-radius: 8px;
  transition: background 0.3s;
}   


/* Основная часть */
main {
  margin-left: 250px;
  flex-grow: 1;
  padding: 5px 40px;
  transition: margin-left 0.3s;
}

/* Меню со сылками на сайт доннту и магистров */
#header {
  padding: 0 4% 0 0;  
}
header ul {
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: end;
  flex-shrink: 0;
  gap:30px;
}
header a {
    text-decoration: none;
    display: block;
    color: black;
    transition: background 0.3s;
    padding: 5px;
}

/* Футер */
footer {
  text-align: center;
  padding: 10px;
  color: #555;
  border-top: 1px solid #ccc;
}
footer p {
  text-align: center;
  text-indent: 0px;
}


/*Раздел info*/
.photo img {
  border-radius: 10px;
  width: 180px;
  height: 240px;
}
.info{
    background-color: var(--medium-green);
    text-decoration: none;
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap:30px;
    justify-content: start;
    flex-grow: 1;
    color: white;
    border-radius: 30px;
    padding: 30px;
}
.info li{
    line-height: 1.5;
}
.info a{
  color: white;
}


/*Раздел about*/
.video {
  overflow: hidden;
  margin: auto;
  padding-bottom: 10px;
}
#video {
  margin-left: auto;
  margin-right: auto;
  display: block;
  clip-path: inset(1px 1px);
  width: 40%;
}


.grid-resume {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0;
  border: 1px solid #ddd;
}

  .grid-row {
    display: contents;
  }
  .grid-header {
    grid-column: 1;
    padding: 12px;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    font-weight: bold;
    vertical-align: top;
  }

  .grid-content {
    grid-column: 2;
    padding: 12px;
    border-bottom: 1px solid #ddd;
    vertical-align: top;
  }

  /* Сохраняем существующие стили для совместимости */
  .grid-content ol {
    margin: 0;
    padding-left: 20px;
  }

  .grid-content li {
    margin-bottom: 5px;
  }

/* Раздел .ind */
.cosplay,.grog {
  width: 100%;
  height: auto;
  display: block;
  max-width: 600px;
  margin: auto;
}
.other a{
  text-decoration: none;
  display: block;
  color: black;
}

.ind h3{
  text-indent: 20px;
}
.ind h2, #sci h2{
  text-align: center;
}


/* Раздел .sci */
.sci, .abouut{
    overflow: hidden;
}

#sci h3{
  /* text-align: center; */
  text-indent: 20px;
}

.art p{
  text-indent: 0;
  text-align: start;
  left: 0;
}
.art {
  margin-left: 0;
}

.tr {
  overflow: hidden;
}

.tr img{
  width: 100%;
  height: auto;
  display: block;
  max-width: 600px;
  object-fit: contain;
  margin: auto;

}

.tr p a, .tr ol li a{
  color: black;
}

#tr_sources li{
  word-break: break-all;
  overflow-wrap: break-word;
}


/* Контент */
#spa-content {
  margin-top: 20px;
}





/* Адаптив */
@media (max-width: 768px) {
  .layout {
    flex-direction: column;
    /* max-height: 50vh; */
  }

  body{
    overflow-x: hidden;
  }

/* Раздел info */
  .info{
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
    color: white;
    border-radius: 30px;
    padding: 30px;
    font-size: small;
}

.info h1{
   text-align: center;
   font-size: 1.3em;
}
.info p, a{
  font-size:1em;
}

header h1 {
    font-size: 1.3em;
}

.about h1,.ind h1, .sci h1, .referat h1{
  font-size: 1.5em;
} 

.about h2,.ind h2, .sci h2, .referat h2{
  font-size: 1.3em;
} 

.about h3,.ind h3, .sci h3, .referat h3{
  font-size: 1.2em;
} 

.photo img {
  width: 120px;
  height: 160px;
}


  #burger {
    display: block;
    position: absolute;
    left: 15px;
    top: 30px;
    font-size: 1.3em;
    color: #2e8b57;
  }

  #menu{
    position: fixed;
    top:0;
    right: 0;
    width: 250px;
    height: auto;
    border-radius: 10px;
    outline: 1px solid white;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    background: #2e8b57;
  }
  #menu.active {
    transform: translateX(0%);
  }

  #menu li{ 
    margin: 0; 
  }


  main {
    margin-left: 0;
  }

  /* ? */
  #sidebar {
    width: 100%;
    height: auto;
    position: static;
    /* flex-direction: row;
    justify-content: space-around; */
  }

  #video { 
    width: 80%;
  }

  .grid-resume {
      word-wrap: break-word;
      overflow-wrap: break-word;
      hyphens: auto;
      font-size: 0.9em;
  }

  .ind {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    font-size: 0.9em;
  }
}