#content {
  padding: 0 !important;

  h3 {
    font-size: 2.5rem;

    @media screen and (max-width: 767px) {
      font-size: 1.85rem;
    }

    &:before {
      content: "<";
      font-family: oswald;
      color: var(--title);
      margin-right: .25rem;
      font-size: 2.5rem;

      @media screen and (max-width: 767px) {
        font-size: 1.85rem;
      }
    }

    &:after {
      content: "/>";
      font-family: oswald;
      color: var(--title);
      margin-left: .25rem;
      font-size: 2.5rem;

      @media screen and (max-width: 767px) {
        font-size: 1.85rem;
      }
    }
  }

  #cover {
    width: 100%;
    aspect-ratio: 4/1;

    background-size: cover;
    background-position: center;
    background-image: linear-gradient(#00000000, var(--background)), url("https://cdn.rileydeman.com/portfolio/img/keyboard.jpg");

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: .75% 1%;

    @media screen and (max-width: 767px) {
      aspect-ratio: 2/1;
    }
  }

  #titleDiv {
    padding: 2.5% 2% .5%;

    @media screen and (max-width: 767px) {
      padding: 5% 4%;
    }

    P {
      font-family: oswald;
      font-size: 1.25rem;

      @media screen and (max-width: 767px) {
        font-size: 1rem;
      }

      &:before {
        content: "///";
        margin-right: .5%;
        color: var(--subParagraph);
        font-family: maroco;
        font-size: 1.2rem;

        @media screen and (max-width: 767px) {
          margin-right: 1.5%;
        }
      }
    }
  }

  #intro {
    padding: .5%;
    display: flex;
    align-items: center;

    margin-bottom: 2%;

    @media screen and (max-width: 979px) {
      flex-direction: column;
    }

    #info {
      width: 50%;
      padding: 1%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;

      h2 {
        margin-bottom: 5%;
      }

      p {
        max-width: 70%;
        text-align: justify;
      }

      @media screen and (max-width: 979px) {
        width: 75%;
        margin-bottom: 2%;

        p {
          max-width: 100%;
        }
      }

      @media screen and (max-width: 767px) {
        width: 100%;
        padding: 2%;
      }
    }

    #photo {
      width: 50%;
      padding: .5%;

      @media screen and (max-width: 979px) {
        width: 100%;

        display: flex;
        justify-content: center;
        align-items: center;
      }

      img {
        width: 75%;
        border-radius: 20px;

        @media screen and (max-width: 767px) {
          width: 98%;
        }
      }
    }
  }

  #programmingSkills {
    margin-top: 2%;
    padding: 1%;
    background-color: var(--background2);

    #ps-tabs {
      margin: 1% 0 .5%;
      display: flex;
      border-bottom: 2px solid var(--primary);

      @media screen and (max-width: 979px) {
        flex-wrap: wrap;
      }

      .ps-tab {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: .75%;
        transition: background-color .5s ease;

        @media screen and (max-width: 979px) {
          width: 50%;
          padding: 1%;
          border-bottom: 1px solid var(--primary);
        }

        @media screen and (max-width: 650px) {
          width: 100%;
          padding: 1.25%;
        }

        p {
          font-family: maroco;
          font-size: 1.25em;
          text-align: center;
          user-select: none;
        }

        &:hover {
          background-color: var(--primary);
          cursor: pointer;
        }
      }

      .tab-selected {
        background-color: var(--primary);
      }
    }

    #ps-tabs-contents {
      display: flex;

      @media screen and (max-width: 650px) {
        margin-bottom: 1%;
      }

      .ps-tc {
        width: 0;
        overflow: hidden;
        transition: width .5s ease;
        display: grid;
        grid-template-columns: repeat(6, 16.25%);
        grid-column-gap: .5%;
        grid-auto-rows: 9svh;
        grid-row-gap: .5svh;

        @media screen and (max-width: 1200px) {
          grid-template-columns: repeat(4, 24.5%);
        }

        @media screen and (max-width: 767px) {
          grid-template-columns: repeat(2, 49.5%);
        }

        @media screen and (max-width: 480px) {
          grid-template-columns: repeat(1, 100%);
          grid-column-gap: 0;
        }

        .ps-tc-item {
          width: 100%;
          height: 100%;
          padding: 2.5% 5%;
          border-radius: 5px;
          background-color: var(--background);
          display: flex;
          align-items: center;

          @media screen and (max-width: 480px) {
            padding: 3.5% 5%;
          }

          img {
            aspect-ratio: 1/1;
            width: 12.5%;
            margin-right: 3.5%;
            user-select: none;

            @media screen and (max-width: 480px) {
              margin-right: 4%;
            }
          }

          p {
            font-family: oswald;
            font-size: 1.5em;
            user-select: none;
          }
        }
      }

      .tc-selected {
        width: 100%;
      }
    }
  }

  #meInaShortScript {
    padding: 1%;

    p {
      margin: 1% 0;
      text-align: justify;
      max-width: 50%;

      @media screen and (max-width: 1200px) {
        max-width: 75%;
      }

      @media screen and (max-width: 767px) {
        max-width: 90%;
        margin: 1% 1.5%;
      }
    }
  }

  #personalSkills {
    padding: 1%;
    background-color: var(--background2);

    #ps2-tabs {
      margin: 1% 0 .5%;
      display: flex;
      border-bottom: 2px solid var(--primary);

      @media screen and (max-width: 979px) {
        flex-wrap: wrap;
      }

      .ps2-tab {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: .75%;
        transition: background-color .5s ease;

        @media screen and (max-width: 979px) {
          width: 50%;
          padding: 1%;
          border-bottom: 1px solid var(--primary);
        }

        @media screen and (max-width: 650px) {
          width: 100%;
          padding: 1.25%;
        }

        p {
          font-family: maroco;
          font-size: 1.25em;
          text-align: center;
          user-select: none;
        }

        &:hover {
          background-color: var(--primary);
          cursor: pointer;
        }
      }

      .tab-selected {
        background-color: var(--primary);
      }
    }

    #ps2-tabs-contents {
      display: flex;

      @media screen and (max-width: 650px) {
        margin-bottom: 1%;
      }

      .ps2-tc {
        width: 0;
        overflow: hidden;
        transition: width .5s ease;
        display: grid;
        grid-template-columns: repeat(6, 16.25%);
        grid-column-gap: .5%;
        grid-auto-rows: 9svh;
        grid-row-gap: .5svh;

        @media screen and (max-width: 1200px) {
          grid-template-columns: repeat(4, 24.5%);
        }

        @media screen and (max-width: 767px) {
          grid-template-columns: repeat(2, 49.5%);
        }

        @media screen and (max-width: 480px) {
          grid-template-columns: repeat(1, 100%);
          grid-column-gap: 0;
        }

        .ps-tc-item {
          width: 100%;
          height: 100%;
          padding: 2.5% 5%;
          border-radius: 5px;
          background-color: var(--background);
          display: flex;
          align-items: center;

          @media screen and (max-width: 480px) {
            padding: 3.5% 5%;
          }

          img {
            aspect-ratio: 1/1;
            width: 12.5%;
            margin-right: 3.5%;
            user-select: none;

            @media screen and (max-width: 480px) {
              margin-right: 4%;
            }
          }

          p {
            font-family: oswald;
            font-size: 1.5em;
            user-select: none;
          }
        }
      }

      .tc-selected {
        width: 100%;
      }
    }
  }

  #education {
    padding: 1%;

    #toolText {
      opacity: .75;
      margin-bottom: .25%;

      @media screen and (max-width: 979px) {
        margin: 2% 0;
      }
    }

    #ed-repeater {
      display: grid;
      grid-template-columns: repeat(2, 49.5%);
      grid-column-gap: 1%;
      grid-row-gap: 1vh;
      margin: 1% 0;

      @media screen and (max-width: 979px) {
        grid-template-columns: 100%;
        margin: 1% 0 1.5%;
      }

      @media screen and (max-width: 500px) {
        padding: .5%;
      }

      .edItem {
        width: 100%;
        background-color: var(--primary25);
        border: 1px solid var(--primary55);
        border-radius: 10px;
        padding: 1.25%;

        @media screen and (min-width: 979px) and (max-width: 1200px) {
          padding: 1.75%;
        }

        @media screen and (max-width: 500px) {
          padding: 1.75%;
        }

        .edi-status {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: .25%;
          margin-bottom: .5%;

          .edis-dates {
            text-align: right;
          }

          .progressLabel {
            padding: .5% 1% .75%;
            border-radius: 5px;
            display: flex;
            align-items: center;
            width: max-content;
            margin-right: .5%;

            @media screen and (max-width: 500px) {
              padding: .75% 2% 1.25%;
            }

            p {
              margin: 0;
              white-space: nowrap;
              line-height: 1;
              user-select: none;
            }
          }

          .ps-success {
            background-color: var(--success80);
            border: 1px solid var(--success);
          }

          .ps-fail {
            background-color: var(--fail80);
            border: 1px solid var(--fail);
          }

          .ps-busy {
            background-color: var(--busy80);
            border: 1px solid var(--busy);
          }
        }

        .edi-school {
          h4 {
            margin-bottom: 1%;
          }

          p {
            .schoolName {
              font-weight: bold;
            }
          }
        }

        .edi-extra {
          width: 100%;
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          margin-top: 1%;

          @media screen and (min-width: 979px) and (max-width: 1200px) {
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;

            .edie-btn {
              margin-top: 1%;
            }
          }

          @media screen and (max-width: 500px) {
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
          }

          .edie-levels {
            &:first-child {
              margin-bottom: .75%;
            }

            p {
              span {
                opacity: .65;
              }
            }
          }

          .edie-btn {
            padding: 1.25% 1.5% 1.5%;
            background-color: var(--background);
            border: 1px solid var(--primary55);
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: max-content;

            @media screen and (max-width: 500px) {
              width: 100%;
              margin-top: 2%;
              padding: 1.5% 1.5% 1.75%;

              p {
                opacity: .9;
              }
            }

            p {
              font-size: 0.95em;
              margin: 0;
              white-space: nowrap;
              line-height: 1;
              user-select: none;
              opacity: .5;
              font-weight: bolder;
            }

            &:hover {
              background-color: var(--primary55);

              p {
                opacity: 1;
              }
            }
          }
        }
      }
    }
  }

  #workExperience {
    padding: 1%;
    background-color: var(--background2);

    #we-repeater {
      width: 100%;
      margin-top: 1.5%;
      margin-bottom: 1%;
      display: grid;
      justify-content: center;
      grid-template-columns: 49.5% 49.5%;
      column-gap: 1%;
      row-gap: 1vh;

      @media screen and (max-width: 979px) {
        grid-template-columns: 100%;
      }

      .weItem {
        width: 100%;
        height: 100%;
        padding: 1.5%;
        margin-bottom: 1%;
        border-radius: 10px;
        background-color: var(--background);

        @media screen and (max-width: 767px) {
          padding: 2%;
        }

        @media screen and (max-width: 480px) {
          padding: 2.25%;
        }

        .wei-top {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 1%;

          .typeLabel {
            padding: .5% 1% .75%;
            border-radius: 5px;
            display: flex;
            align-items: center;
            width: max-content;
            background-color: var(--primary25);
            border: 1px solid var(--primary55);

            @media screen and (max-width: 500px) {
              padding: .75% 2% 1.25%;
            }

            p {
              margin: 0;
              white-space: nowrap;
              line-height: 1;
              user-select: none;
            }
          }
        }

        .wei-info {
          margin-bottom: 1.25%;

          h4 {
            margin-bottom: .75%;
          }

          p {
            .company {
              font-weight: bold;
            }
          }
        }

        .wei-bottom {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;

          @media screen and (min-width: 979px) and (max-width: 1200px) {
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;

            .wei-btn {
              margin-top: 1%;
            }
          }

          @media screen and (max-width: 500px) {
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
          }

          p {
            @media screen and (min-width: 979px) and (max-width: 1200px) {
              margin: 1% 0;
            }

            @media screen and (max-width: 500px) {
              margin: 1.5% 0;
            }
          }

          .wei-btn {
            padding: 1.25% 1.5% 1.5%;
            background-color: var(--background);
            border: 1px solid var(--primary55);
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: max-content;

            @media screen and (max-width: 500px) {
              width: 100%;
              margin-top: 2%;
              padding: 1.5% 1.5% 1.75%;

              p {
                opacity: .9;
              }
            }

            p {
              font-size: 0.95em;
              margin: 0;
              white-space: nowrap;
              line-height: 1;
              user-select: none;
              opacity: .5;
              font-weight: bolder;
            }

            &:hover {
              background-color: var(--primary55);

              p {
                opacity: 1;
              }
            }
          }
        }
      }
    }
  }

  #funFacts {
    padding: 1%;

    #ffTop {
      display: flex;

      #ffTopLeft {
        width: 65%;

        display: flex;
        justify-content: flex-start;
        align-items: center;
      }

      #ffTopRight {
        width: 35%;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .controller {
          aspect-ratio: 1/1;
          width: 8%;
          margin: 0 1%;

          display: flex;
          justify-content: center;
          align-items: center;

          @media screen and (max-width: 1200px) {
            width: 10%;
          }

          @media screen and (max-width: 767px) {
            width: 15%;
          }

          @media screen and (max-width: 480px) {
            width: 22.5%;
          }

          img {
            aspect-ratio: 1/1;
            width: 80%;
            opacity: .5;
          }

          &:hover {
            cursor: pointer;

            img {
              opacity: 1;
            }
          }
        }
      }
    }

    #ff-repeater {
      margin-top: 1%;
      padding-bottom: .5%;
      width: 100%;
      display: flex;
      overflow-x: hidden;

      scroll-behavior: smooth;

      &::-webkit-scrollbar {
        display: none;
      }

      .ffItem {
        background-color: var(--primary25);
        border: 1px solid var(--primary55);
        width: 17.5%;
        margin-right: .5%;
        margin-left: .5%;
        flex-shrink: 0;
        border-radius: 5px;
        padding: .4% .4% .6%;

        @media screen and (max-width: 1200px) {
          width: 22.5%;
        }

        @media screen and (max-width: 979px) {
          width: 27.5%;
        }

        @media screen and (max-width: 767px) {
          width: 40%;
          padding: .6% .6% .6%;
        }

        @media screen and (max-width: 480px) {
          width: 70%;
        }

        img {
          aspect-ratio: 1/1;
          width: 100%;
          object-fit: cover;
          border-radius: 5px 5px 0 0;
        }

        #bottom {
          width: 100%;
          padding: 2%;

          h4 {
            margin-bottom: 2.5%;
          }
        }
      }

      &:first-child(1) {
        margin-left: 0;
      }

      &:last-child(1) {
        margin-right: 0;
      }
    }
  }
}