/*
1. Define colors custom properties
2. Assign color custom properties to properties where value is shared between light and dark mode
3. Assign color custom properties to properties where value differs between light and dark mode
4. Define other custom properties
5. Define global styles
*/

  /*  1. Define colors custom properties */

  :root {
    --black: 31, 31, 31;
    --white: 255, 255, 255;
    --red: 220, 38, 38;

    --grey: 238, 238, 238;
    --orange: 214,73,51;
    --pink: 245,239,242;
    --blue: 146, 220, 229;
  }

  /* 2. Assign colors to properties where value is same in both light and dark mode */

  :root {
    --primary-background: var(--pink);
    
    --primary-highlight: var(--white);

    --secondary-background: var(--grey);
    --secondary-text: var(--black);
    --secondary-highlight: var(--white);
  }

  /* 3. Assign colors to properties where value differs between light and dark mode */

  @media (prefers-color-scheme: light) {
    :root {
      --ui-background: var(--grey);
      --ui-text: var(--black);
      --ui-highlight: var(--white);
      --primary-text: var(--orange);
    }
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --ui-background: var(--black);
      --ui-text: var(--white);
      --ui-highlight: var(--grey);
      --primary-text: var(--black);
    }
  }

  /* 4. Define other custom properties */

  :root {
    --border-radius-default: 4px;
    --error-text: var(--red);
  }

  /* 5. Define global styles */


    * {
        box-sizing: border-box;
      }

      @media all and (max-width: 400px) {
        .design-systems-webring ul {
          width: 100%;
        }
        .design-systems-webring li {
          width: 33%;
        }
        .design-systems-webring ul li a span {
          display: none;
        }
      }

      @media all and (max-width: 749.99px) {
        .tabs input:not(:checked) + .label:after {
          content: "+";
          display: inline-block;
          margin-left: 1rem;
        }
      }
      @media all and (max-width: 879.99px) {
        .content {
          margin-top: 1.5rem;
          --paddingBottom: 2rem;
        }
        .panel:not(.photos) {
          flex-direction: column;
        }
        .photos img {
          max-width: 250px;
        }
      }
      @media all and (min-width: 880px) {
        :root {
          --bodyPadding: 3rem;
          --h2WebringFontSize: 1.25rem;
          --contentDirection: row;
          --columnWidth: 33%;
          --columnHorizontalPadding: 2rem;
        }

        .border-left {
          border-left: 4px solid rgb(var(--blue));
        }

        .border-right {
          border-right: 4px solid rgb(var(--blue));
        }

        .tabs .label {
          min-height: 130px;
        }

        .panel {
          margin-top: 24px;
        }

        .photos img {
          max-width: 350px;
        }
      }
      @media all and (min-width: 460px) and (max-width: 1049.99px) {
        :root {
          --tabFontSize: 1.25rem;
          --tabFontZoomSize: 1.5rem;
        }
      }

      @media all and (min-width: 1050px) and (max-width: 1349.99px) {
        :root {
          --tabFontSize: 2rem;
          --tabFontZoomSize: 2.25rem;
        }
      }
      @media all and (min-width: 1350px) and (max-width: 1599.99px) {
        :root {
          --tabFontSize: 2.25rem;
          --tabFontZoomSize: 2.5rem;
        }
      }
      @media all and (min-width: 1600px) {
        :root {
          --tabFontSize: 2.5rem;
          --tabFontZoomSize: 3.25rem;
        }
      }

      body {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 100vh;
        padding-top: var(--bodyPadding, 2rem);
        border-top: 8px solid rgb(var(--blue));
        background-color: rgb(var(--ui-background));
        color: rgb(var(--ui-text));
        font-family: 'Merriweather', 'Georgia', serif;
        line-height: 1.6;
        margin: 0;
      }

      @media (prefers-reduced-motion: no-preference) {
        body,
        .content {
          animation: mymove 24s infinite;
        }
      }

      @keyframes mymove {
        14% {
          border-color: rgb(var(--blue));
        }
        36% {
          border-color: rgb(var(--orange));
        }
        64% {
          border-color: rgb(var(--orange));
        }
        86% {
          border-color: rgb(var(--blue));
        }
      }

      p {
        margin-top: 0;
      }

      main {
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto 48px auto;
        max-width: 1700px;
      }

      .main {
        display: flex;
        flex-direction: var(--contentDirection, column);
        gap: 32px;
      }

      .content {
        width: var(--columnWidth, 100%);
        padding: 1rem var(--columnHorizontalPadding, 2.25rem)
          var(--paddingBottom, 1rem);
      }

      .stretch {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        gap: 16px;
        width: var(--columnWidth, 100%);
        align-items: center;
      }

      img {
        max-width: 100%;
        height: auto;
      }

      .webring {
        display: flex;
        text-align: center;
        justify-content: center;
      }

      .design-systems-webring h2 {
        font-size: var(--h2WebringFontSize, 1rem);
        margin-top: 0;
        margin-bottom: 0.5rem;
      }

      .design-systems-webring p {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
      }

      .design-systems-webring a:link,
      .design-systems-webring a:visited {
        color: rgb(var(--white));
      }

      .design-systems-webring a:hover,
      .design-systems-webring a:active {
        color: rgb(var(--blue));
      }

      .design-systems-webring ul {
        list-style: none;
        margin: 0;
        padding-left: 0;
        display: flex;
        gap: 16px;
        justify-self: center;
      }

      .design-systems-webring li {
        margin: 0;
      }

      .design-systems-webring li a {
        font-size: 0.875rem;
        line-height: 1.25;
      }

      .design-systems-webring li:first-child a:before {
        content: "<<";
        margin-right: 4px;
      }

      .design-systems-webring li:last-child a:after {
        content: ">>";
        margin-left: 4px;
      }

      .page-footer {
        width: 100%;
        padding: 1.5rem 0;
        margin: 0 auto;
        background: rgb(var(--black));
        color: rgb(var(--white));
      }

      .tabs {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
      }

      .tab {
        position: absolute;
        opacity: 0;
      }

      .tabs .label {
        width: 100%;
        padding: 22px 20px;
        cursor: pointer;
        font-weight: 600;
        text-align: center;
        line-height: 1;
        font-size: var(--tabFontSize, 1rem);
        transition:
          font-size 0.3s linear,
          opacity 0.2s ease-in-out;
        opacity: 0.6;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .tabs .label:hover {
        opacity: 0.8;
      }

      .tab:checked + .label {
        opacity: 1;
        font-size: var(--tabFontZoomSize, 1.75rem);
      }

      .panel {
        display: none;
        padding: 24px;
        width: 100%;
      }

      .tab:checked + .label + .panel {
        display: flex;
      }

      .photos {
        flex-wrap: wrap;
        gap: 24px;
        justify-content: center;
      }

      @media (min-width: 750px) {
        .panel {
          order: 99;
        }
        .tabs .label {
          width: 25%;
        }
      }

      .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      .content__section {
        width: 100%;
      }

      .content__section--buttons {
        display: flex;
        gap: 24px;
      }

      @media all and (max-width: 1199.99px) {
        h3 {
          font-size: 1.75rem;
        }
      }

      @media all and (min-width: 1200px) {
        h3 {
          font-size: 2.75rem;
        }
        .content__list {
          font-size: 1.5rem;
        }
      }

      h3 {
        margin-top: 0;
      }

      .content__list {
        list-style: lower-roman;
        list-style-position: inside;
        padding-left: 0;

        li::marker {
          font-size: 2.25rem;
          font-weight: bold;
        }
      }