/* Document styles */
:root {
  --primary: #2fafac;
  --accent: #28a598;
}

* {
  font-family: 'Ubuntu', sans-serif;
}

.l-body {
  background-color: #fff;
  margin: 0 30px;
}

.experiences {
  margin-top: 25px;
}

/* contact */
.bio-overview__contact {
  font-style: normal;
}

.contact-info {
  margin-top: 0;
}

.contact-info__icon {
  width: 20px;
}

.contact-info__link,
.experience__link {
  color: inherit;
  text-decoration: none;
}

.contact-info__link:hover,
.experience__link:hover {
  color: var(--accent);
  transition: all .3s ease;
}

.contact-info__method {
  margin-bottom: 15px;
}

/* decoration */
.bio-overview__title, .experience__heading {
  border-bottom: 2px solid var(--primary);
}

.experience__date {
  border-bottom: 1.5px solid var(--primary);
}

.experience__details__segment-link {
  color: var(--primary);
  text-decoration: none;
}

.header__profession {
  border-bottom: 1.5px solid #fff;
  padding-bottom: 15px;
  width: 70%;
}

/* flexbox */
.bio-overview {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.experience__date-location, .experience__role__organization {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
}

.l-main {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
}

/* headings */
.bio-overview__title, .experience__heading {
  color: var(--primary);
  text-transform: uppercase;
}

.header__name {
  color: #fff;
  font-weight: 500;
}

.experience__date, .experience__location, .experience__date-education {
  color: var(--primary);
  font-style: italic;
  font-weight: 400;
  margin-top: 5px;
}

.experience__heading {
  margin: 10px 0;
}

.experience__role__organization-name {
  color: #222;
  font-size: 1.2em;
  font-weight: 300;
  margin: 5px 0;
}

.experience__role__title {
  color: var(--primary);
  font-weight: 600;
  margin: 0;
}

/*added custom css for margin in projects*/
.experience__role {
  margin-block-start: auto;
}

.l-header {
  background-color: var(--primary);
  margin-bottom: 25px;
  padding: 15px;
}

/* lists */
.contact-info, .experience__details, .interests, .skills, .volunteerism {
  list-style-type: none;
  padding: 0;
}

.experience__details__segment {
  margin-bottom: 5%;
}

.experience__date, .experience__date-education {
  padding-bottom: 5%;
  width: 60%;
}

.experience__details, .experience__details__volunteerism {
  line-height: 1.5;
  margin: 0 15px 35px 15px;
  padding-left: 0;
}

.experience__details {
  list-style: square url('../img/icons8-unchecked-checkbox-10.png');
}

.experience__details__volunteerism {
  list-style: none;
}

.experience__details__volunteerism li {
  margin-bottom: 15px;
}

.experience__details__volunteerism-highlight {
  color: #8E8E8E;
  font-style: italic;
  line-height: 1.2;
  margin-top: 0;
}

.interests li {
  border: 2px solid lightgrey;
}

.interests li, .skills li {
  border-radius: 5px;
  display: inline-block;
  margin: 5px;
  padding: 5px;
  text-align: center;
}

.skills li {
  background-color: var(--primary);
  border: 2px solid var(--primary);
  color: #fff;
}

.interests li:hover,
.skills li:hover {
  background-color: var(--accent);
  border: 2px solid var(--accent);
  color: #fff;
  transition: all .3s ease;
}

/* header contents */
.header__description {
  color: #fff;
}

.header__profession {
  color: #fff;
  font-size: 1.3em;
  font-weight: lighter;
  margin-top: 1%;
}

@media only screen and (min-width: 768px) {

  /* Document styles  */
  .l-body {
    margin: 0;
  }

  .bio-overview * {
    margin-right: 5%;
    padding-right: 7%;
  }

  /* decorative lines */
  .experience__date, .experience__date-education {
    padding-bottom: 20px;
    width: 20%;
  }

  .header__profession {
    padding-bottom: 15px;
    width: 20%;
  }

  /* experiences */
  .experience__heading {
    margin-top: 0;
  }

  .experience__role__organization {
    margin-top: 0;
  }

  /* flexbox */
  .bio-overview {
    flex-basis: 25%;
  }

  .l-main {
    align-items: stretch;
    flex-direction: row;
    justify-content: space-around;
    margin: auto;
    width: 90%;
  }

  .experiences {
    flex-basis: 75%;
    margin-top: 0;
  }

  /* headings */
  .bio-overview__title {
    margin: 40px 0 0;
  }

  .l-header {
    margin: 0 0 30px 5%;
    padding: 5px 0 5px 30px;
  }

  .header__name {
    margin-bottom: 0;
  }

  /* lists */
  .experience__details {
    line-height: 1.3;
    margin-bottom: 45px;
  }

  .experience__details__segment {
    margin: 0 150px 10px 0;
  }

  .experience__details__volunteerism {
    list-style: none;
    font-size: 1.2em;
    margin-bottom: 45px;
    padding-left: 0;
  }

  .experience__details__volunteerism li {
    margin-bottom: 0;
  }

  .experience__details__volunteerism-highlight {
    font-size: 0.8em;
    margin-right: 100px;
  }

  .interests li, .skills li {
    display: inline-block;
    margin: 0 5px 20px 0;
    padding: 5px 20px;
  }
}

@media (prefers-color-scheme: dark) {
  .l-header {
    background-color: var(--accent);
  }

  .bio-overview__title,
  .experience__date,
  .experience__heading {
    border-bottom-color: var(--accent);
  }

  .bio-overview__title,
  .experience__date,
  .experience__date-education,
  .experience__details__segment-link,
  .experience__heading,
  .experience__location,
  .experience__role__title {
    color: var(--accent);
  }


  p {
    color: #fff;
  }

  .contact-info__method,
  .experience__details__segment,
  .experience__role__organization,
  .experience__role__organization-name {
    color: #fff;
  }

  .interests li {
    background-color: lightgrey;
  }

  .l-body {
    background-color: #333;
  }
}

@media screen and (prefers-reduced-motion: reduce) {

  .contact-info__link:hover,
  .experience__link:hover,
  .interests li:hover,
  .skills li:hover {
    transition: none;
  }
}