.about-detail {
   margin-top: 12em;
   padding-top: var(--body-margin);
}

.about-title {
   height: max-content;
}

.about-detail h1 {
   font-size: var(--title-sz);
   border-bottom: var(--divider);
   padding-bottom: var(--body-spc);
   margin-bottom: var(--body-spc);
}

.about-title div {
   display: flex;
   justify-content: space-between;
}

.about-title div span {
   font-family: var(--sub-font);
   font-size: var(--body-sz);
   color: var(--main-clr);
}

.about-content {
   max-width: 1120px;
   margin: 0 auto;
}

.about-section {
   display: flex;
   margin-top: var(--body-margin);
   margin-bottom: var(--body-margin);
}

.about-section h2 {
   width: 25%;
   margin-right: 40px;
   font-family: var(--main-font);
   font-size: var(--body-sz);
   font-weight: var(--font-bold);
   text-transform: uppercase;
   color: var(--main-clr);
}

.about-section>div {
   width: 85%;
}

.about-content p {
   color: var(--main-clr);
   margin-bottom: var(--body-spc);
}

ul.accordion-list {
   margin: 0;
   padding: 0;
   list-style: none;
}

ul.accordion-list h3,
ul.accordion-list li {
   font-size: var(--body-sz);
}

ul.accordion-list h3 {
   text-transform: uppercase;
}

ul.accordion-list h3 span {
   text-transform: capitalize;
   font-weight: var(--font-light);
}

ul.accordion-list>li {
   border-top: var(--divider);
}

ul.accordion-list ul li:last-child {
   padding-bottom: var(--title-sz);
}

div.accordion-list-title {
   display: flex;
   width: 100%;
   justify-content: space-between;
   align-items: center;
   padding-top: var(--title-sz);
   padding-bottom: var(--title-sz);
   cursor: pointer;
}

/*
div.accordion-list-title:hover {
      background-color: var(--sub-clr);
}
*/
div.accordion-list-title .date {
   font-family: var(--sub-font);
   width: 20%;
}

div.accordion-list-title h3 {
   width: 50%;
}

div.accordion-list-title .company {
   width: 20%;
}

div.accordion-list-title .accordion {
   display: flex;
   height: 20px;
   width: 20px;
   justify-content: center;
   align-items: center;
   transition: var(--smooth);
   -webkit-transition: var(--smooth);
}

div.accordion-list-title.active .accordion {
   transform: rotate(-180deg);
}

div.accordion-list-title .accordion span {
   width: 12px;
   height: 2px;
   border-radius: 2px;
   background-color: var(--main-clr);
   transition: var(--smooth);
   -webkit-transition: var(--smooth);
   position: absolute;
}

div.accordion-list-title .accordion span:first-child {
   transform: rotate(90deg);
   -webkit-transform: rotate(90deg);
}

div.accordion-list-title.active .accordion span:first-child {
   transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
}

ul.accordion-list-details {
   list-style: disc;
   padding-left: 1em;
   padding-right: 1em;
   max-height: 0;
   overflow: hidden;
   transition: 1s;
   -webkit-transition: 1s;
}

ul.accordion-list-details.active {
   max-height: 300px;
}

.about-content div.skills {
   display: flex;
}

.skills ul {
   list-style-type: none;
   padding: 0;
}

div.skill-col {
   width: 33%;
   margin-right: var(--body-spc);
}

div.collabs {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: var(--body-spc);
   align-items: center;
   justify-content: center;
}

div.collabs a {
   height: 100px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 2px solid var(--main-bg);
   border-radius: 10px;
   height: 100px;
   background-color: #111;
   padding: var(--body-spc);
   transition: var(--smooth);
}

div.collabs a:hover {
   background-color: var(--main-bg);
   border: 2px solid var(--main-clr);
}

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



@media screen and (max-width: 1150px) {
   div.accordion-list-title {
      flex-wrap: wrap;
      padding-top: var(--body-sz);
      padding-bottom: var(--body-sz);
   }

   div.accordion-list-title .date {
      width: 50%;
      order: 1;
   }

   div.accordion-list-title .accordion {
      order: 2;
   }

   div.accordion-list-title h3 {
      order: 3;
   }

   div.accordion-list-title .company {
      order: 4;
      width: auto;
   }

   .about-content div.skills {
      flex-wrap: wrap;
   }

   div.skill-col {
      width: 50%;
      margin-right: 0;
   }
}

@media screen and (max-width: 768px) {
   .about-detail {
      margin-top: 6em;
   }

   .about-section {
      flex-direction: column;
   }

   .about-section h2 {
      margin-bottom: var(--body-spc);
   }

   .about-section>div {
      width: 100%;
   }

   .about-title div {
      flex-direction: column;
   }

   div.accordion-list-title {
      position: relative;
   }

   div.accordion-list-title .accordion {
      order: 3;
   }

   div.accordion-list-title .date {
      order: 1;
   }

   div.accordion-list-title h3 {
      width: 80%;
      order: 2;
   }

   div.accordion-list-title .company {
      order: 4;
      min-width: 25%;
   }
}

@media screen and (max-width: 600px) {
   div.skill-col {
      width: 100%;
   }

   div.collabs {
      grid-template-columns: 1fr 1fr;
   }
}