@media only screen and (max-device-width : 799px) {
html{
    font-size: 42px;
}

h1, nav.main h1, nav.main span{
    font-size: 2.5rem;
}

h2, nav.next{
    font-size: 1.75rem;
}

h3{
    font-size: 1rem;
}


nav.main{
    width: 100%;
    right: -100%;
}

.navbutton{
    width: 1.75rem;
}

footer p{
    column-count: 1;
}

ul.projects summary::after, ul.projects summary:hover::after{
    content: '▼';
    position: relative;
    display: inline-block;
    font-size: 1.75rem;
    line-height: 1;
    margin-left: var(--main-padding);
}

ul.projects li details[open] > summary::after, ul.projects li details[open] > summary:hover::after {
    content: '▲';
    position: relative;
    display: inline-block;
    font-size: 1.75rem;
    line-height: 1;
    margin-left: var(--main-padding);
}

ul.projects li details p, ul.projects li details{
    margin: var(--main-padding);
}

main.chapter article section #footnotes{
    column-count: 2;
}

.chapter nav{
    margin-right: 3rem;
}

nav.main li{
    line-height: 2;
}

.swiper.video .swiper-slide{
    width: 90%;
}

.swiper.video .swiper-slide a:hover figure video {
    opacity: 1;
}

.swiper.video .swiper-slide figure figcaption{
    font-size: 1rem;
}


.exercise {
    grid-template-columns: 1fr;
  }
  .exercise figure {
    grid-row: 2;
  }
  .exercise .close {
    position: fixed;
    font-size: 1.25rem;
  }
  main.chapter article aside.options ul {
    flex-wrap: wrap;
  }

}