@import "common.css";


body {
  background: var(--content-background-color);
  border: 20px solid var(--secondary-color);
  border-top: none;
}

/**
 * duplicated from index.css
 */
@media only screen and (min-width: 480px) {
  body {
    font-size: 23px;
    border-width: 40px;
  }
}


main,
header {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

section {
  width: 100%;
  margin: 0 auto;
  /*border: 1px solid #cdcdcd;*/
  padding: 2rem;
  background: var(--content-background-color);
  max-width: 900px;
  /*border-top: 1px solid #f2f2f2;*/
  margin-bottom: 1rem;
}

section:first-of-type {
  border-top: none;
}

.intro {
  /*margin-top: -3rem;*/
  text-align: center;
}

.heading {
  font-weight: normal;
  /*margin: 0 0 2rem;*/
}

.position {
  letter-spacing: -0.7px;
  font-weight: bold;
  margin: -0.4ex 0 0.6rem;
  grid-area: position;
}

.timeframe {
  opacity: 0.9;
  margin: 0;
  grid-area: timeframe;
}

@media only screen and (min-width: 501px) {
  .timeframe::before {
    content: '·';
    display: inline-block;
    margin-right: 1rem;
    margin-left: -1rem;
  }
}

.company {
  margin: 0;
  grid-area: company;
}

.logo {
  height: 100px;
  grid-area: logo;
}

@media only screen and (max-width: 640px) {
  .logo {
    margin-bottom: 1rem;
  }
}

.summary {
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid #e9e9e9;
  font-size: 0.95em;
  opacity: 0.9;
  grid-area: summary;
}

.summary :last-child {
  margin-bottom: 0;
}

.item {
  display: grid;
  grid-column-gap: 2rem;
  grid-template-areas:
    "logo position position position"
    "logo company timeframe ."
    "logo summary summary summary"
  ;
  justify-content: start;
  align-items: start;
  margin-left: -2rem;
  margin-right: -2rem;
  padding: 0 2rem;
}

@media only screen and (max-width: 640px) {
  .item {
    grid-template-areas:
      "logo logo logo"
      "position position position"
      "company company company"
      "timeframe timeframe timeframe"
      "summary summary summary"
    ;
    grid-template-columns: 40% 1fr 40%;
  }

  .logo {
    justify-self: center;
  }

  .company,
  .position,
  .timeframe {
    text-align: center
  }
}

.item.compact {
  grid-template-areas:
    "logo . . ."
    "logo position position position"
    "logo company timeframe ."
    "logo . . ."
;
}

@media only screen and (max-width: 640px) {
  .item.compact {
    text-align: center;
    justify-content: center;
    grid-template-areas:
      "logo"
      "position"
      "company"
      "timeframe"
    ;

    grid-template-columns: 1fr;
  }

  .item.compact .logo {
    justify-self: center;
  }
}

.item:not(:first-of-type) {
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid #cdcdcd;
}

.title {
  text-transform: uppercase;
  line-height: 0.8em;
  font-weight: 800;
  font-family: "Raleway", sans-serif;
  color: var(--content-color);
  opacity: 0.8;
  margin: 0 auto;
  text-align: center;
  padding: 5rem;
  display: inline-flex;
  flex-direction: column;
  font-size: 4rem;
}

@media only screen and (max-width: 640px) {
  .title {
    font-size: 3rem;
    padding: 2rem;
  }
}

.title::before {
  content: "This page tells you everything there is to know about";
  font-weight: normal;
  font-size: 1rem;
  text-transform: none;
  margin-top: -1rem;
  line-height: 1.2;
  margin-bottom: 1em;
}

.title::after {
  display: block;
  content: '';
  height: 0.5rem;
  background: var(--primary-color);
  width: 100%;
  margin-top: 0.5rem;
}

nav {
  /*padding: 1rem;*/
}

.home-link {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary-color);
  text-decoration: none;
  display: block;
  background: var(--secondary-color);
  padding: 1rem;
  padding-left: 0;
}

.home-link:hover,
.home-link:focus {
  text-decoration: underline;
}

.home-link::before {
  content: "← ";
}

.no-js #skills-marquee {
  list-style: initial;
  margin: initial;
  padding: initial;
}

#skills-marquee {
  list-style: none;
  padding: 0;
  text-justify: inter-word;
  font-size: 1.5rem;
  max-width: 980px;
  margin: 0 auto;
  font-weight: bold;
  display: grid;
  grid-gap: 10px;
}

@media screen and (min-width: 640px) {
  #skills-marquee {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 980px) {
  #skills-marquee {
    grid-template-columns: repeat(3, 1fr);
  }
}

#skills-marquee li {
  margin: 0;
  padding: 0;
  display: inline-flex;
  height: 2.25em;
  align-items: center;
}

@media screen and (min-width: 640px) {
  /*#skills-marquee li:nth-child(2n-1) {*/
  /*    text-align: center;*/
  /*    justify-content: center;*/
  /*}*/

  #skills-marquee li:nth-child(2n) {
    text-align: right;
    justify-content: flex-end;
  }
}


@media screen and (min-width: 980px) {
  #skills-marquee li:nth-child(2n) {
    text-align: initial;
    justify-content: initial;
  }

  #skills-marquee li:nth-child(3n-1) {
    text-align: center;
    justify-content: center;
  }

  #skills-marquee li:nth-child(3n) {
    text-align: right;
    justify-content: flex-end;
  }
}


#skills-marquee li:nth-child(n+13) {
  display: none;
}