* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #000;
  --background-color: #fff;
  --markered-text: #dadada;
  --line-before: #000;
}

body.dark-theme {
  --primary-color: #fff;
  --background-color: #282929;
  --markered-text: #697da3;
  --line-before: #697da3; 
}

.container {
  width: min(90%, 1200px);
  margin: 0 auto;
}

ul li {
  list-style: none;
}

a {
  color: var(--primary-color);
}


body {
  font-family: 'PT Sans';
  font-size: 1.75rem;
  background-color: var(--background-color);
  color: var(--primary-color);
  transition: all .4s ease;
}

.pt-sans-italic {
  font-style: italic;
}

.pt-bold {
  font-weight: 700;
}

.staatliches {
  font-family: 'Staatliches';
  font-size: 1.375rem;
  letter-spacing: 3%;
  color: var(--primary-color);
}

.tourney {
  font-family: 'Tourney';
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: 6%;
  text-transform: uppercase;
  line-height: 1.125rem;
  margin-left: 2px;
  color: var(--primary-color);
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  padding: 13px 0;
  background-color: var(--background-color);
  z-index: 1;
  margin-bottom: 70px;
  transition: all .4s ease;
}


nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  ul {
    display: flex;
    gap: 50px;
    margin-top: 5px;
    align-items: baseline;

    a {
      text-decoration: none;
    }

    .staatliches span {
      margin: 0 10px;
    }
  }
}

main {
  margin-top: 150px;
  background-image: url(../img/bg-picture.png);
  background-repeat: no-repeat;
  background-position: top 150px right 135px;
  background-attachment: fixed;
}

.main-content {
  width: 785px;
}

section {
  margin-bottom: 70px;

  h2 {
    font-family: "Francois One", sans-serif;
    font-size: 2.25rem;
    line-height: 2.25rem;
    letter-spacing: 4%;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 45px;

    &::before {
      content: '';
      width: 100px;
      height: 8px;
      background: var(--line-before);
      display: block;
      margin-bottom: 22px;
    }


    sup {
      font-family: "Farro", sans-serif;
      font-weight: 300;
      font-size: 1.125rem;
      letter-spacing: 4%;
      text-transform: none;
      margin-left: 10px;
      position: relative;
      top: -11px;
    }
  }

  p {
    font-size: 1.75rem;
    line-height: 48px;
    margin-bottom: 29px;
  }

  .first-ul li {
    margin-bottom: 25px;
    line-height: 3.21rem;
  }

  .second-ul li {
    margin-bottom: 50px;
    line-height: 3rem;
  }
}


.text-gray {
  background-color: var(--markered-text);
}

.heading-first-section {
  margin-bottom: 46px;
}

.heading-last-section {
  margin-bottom: 45px;

  &+p {
    margin-bottom: 40px;
  }
}


.wrapper {
  display: flex;
  gap: 30px;
  position: relative;

  .aside {
    width: 385px;
    display: flex;
    flex-direction: column;
    gap: 59px;
    position: sticky;
    top: 70px;
    left: 0;
    align-self: start;

    h2 {
      font-family: "Francois One", sans-serif;
      font-weight: 400;
      font-size: 2.23rem;
      line-height: 48px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 10px 10px 0 10px;
      margin-bottom: 0;

      &::after {
        content: '';
        width: 365px;
        height: 1px;
        background-color: #bdbdbd;
        display: block;
        margin-top: 10px;
      }
    }
  }
}



body:has(#themeToggle:checked) {
  label {
    background-image: url(../img/sun-svgrepo-com.svg);
    background-repeat: no-repeat;
    background-position: center;
  
    svg {
      visibility: hidden;
    }
  }

  nav img{
    filter: invert(1);
  }

  main{
    background-image: url(../img/bg2.png);
  }
}