@charset "utf-8";
/**-----------------------------------------------------------
 * name: profile.css
 * purpose: styles for the profile "about me" page
 * author: david kim
 * last revised: january 3rd, 2021
 * Copyright 2020 David Kim. All rights reserved.
 -----------------------------------------------------------*/

/* main style, inclusive of everything(!!) on the page. Uses grid. */

.main-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 32px;
  grid-template-areas: "about" "resume" "courses" "skills" "contact" "footer";
}

.contents {
  max-width: 1000px;
}

/* Separate layer of abstraction for "container" that holds the
individual sections together separately */

.container {
  padding: 50px 50px 20px;
  margin-bottom: 20px;
  background-color: #fff;
}

/* Layout for the "about" grid item. Photo takes up the left side, and 
two text elements the right. */

.triple-grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 50px 1fr;
  grid-template-areas: "photo header" "photo text";
  column-gap: 50px;
  row-gap: 10px;
}

.about-me {
  grid-area: about;
  justify-self: center;
  align-self: center;
  /* Allows us to emulate a "max" between two options */
  min-width: 800px;
  width: calc(100% - 80px);
  margin-top: 50px;
}

#about-me-title {
  grid-area: header;
  justify-self: start;
  align-self: center;
}

#about-me-photo {
  grid-area: photo;
  justify-self: center;
  align-self: start;
  /* Slight offset to make it more visually pleasing */
  padding-top: 10px;
}

#about-me-photo img {
  width: 100%;
  height: auto;
}

#about-me-text {
  grid-area: text;
  font-size: 95%;
  line-height: 1.5;
  font-weight: 350;
}

/* Layout for the "resume" grid item. Short label on the left, and 
long text on the right. */

.dual-grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 1fr;
  grid-template-areas: "label content";
  column-gap: 50px;
}

.resume {
  grid-area: resume;
  justify-self: center;
  align-self: center;
  min-width: 800px;
  width: calc(100% - 80px);
}

#resume-label {
  grid-area: label;
  justify-self: start;
  align-self: start;
  /* Slight offset up to make it align with the entries */
  margin-top: -10px;
}

/* Resume's right-side text is a grid in and of itself, containing
the dates on the left and the description for that activity on the right. */

.resume-text {
  grid-area: content;
  justify-self: start;
  align-self: center;
}

.resume-entries {
  display: grid;
  grid-template-columns: 85px auto;
  grid-template-rows: 1fr;
  grid-template-areas: "dates description";
  column-gap: 10px;
  margin-bottom: 5px;
}

.resume-dates {
  grid-area: dates;
  justify-self: start;
  align-self: start;
}

.resume-descriptions {
  grid-area: description;
  justify-self: start;
  align-self: start;
}

/* Adds "-  " to every element of the description list */

.resume-descriptions>ul>li::before {
  /* \2022 is the CSS Code/unicode for a thick space */
  content: "-\00a0\00a0";
}

.wasabi {
  color: #1bc01b;
}

.amazon {
  color: #ff9900;
}

.courses {
  grid-area: courses;
  justify-self: center;
  align-self: center;
  min-width: 800px;
  width: calc(100% - 80px);
}

#course-label {
  grid-area: label;
  justify-self: start;
  align-self: start;
  /* Slight offset up to make it align with the entries */
  margin-top: -10px;
}

/* Course's right-side text is a grid in and of itself, containing
the course ids on the left and the course names on the right. */

.course-text {
  grid-area: content;
  justify-self: start;
  align-self: center;
}

.course-entries {
  display: grid;
  grid-template-columns: 85px auto;
  grid-template-rows: 1fr;
  grid-template-areas: "id name";
  column-gap: 10px;
  margin-bottom: 5px;
}

.course-ids {
  grid-area: id;
  justify-self: start;
  align-self: start;
}

.course-names {
  grid-area: name;
  justify-self: start;
  align-self: start;
}

/* Adds "-  " to every element of the course list */

.course-names>ul>li::before {
  /* \2022 is the CSS Code/unicode for a thick space */
  content: "-\00a0\00a0";
}

.skills {
  grid-area: skills;
  justify-self: center;
  align-self: center;
  min-width: 800px;
  width: calc(100% - 80px);
}

/* Felt a bit too abrupt, compared to other sections, so added a bit of padding */

#skills-container {
  padding-bottom: 30px;
}

.skills-label {
  grid-area: label;
  justify-self: start;
  align-self: center;
  font-size: 20px;
}

.skills-text {
  grid-area: content;
  justify-self: start;
  align-self: center;
  font-size: 16px;
}

.contact {
  grid-area: contact;
  justify-self: center;
  align-self: center;
  min-width: 800px;
  width: calc(100% - 80px);
}

.contact h2 {
  text-align: center;
}

.contact-entry {
  margin-bottom: 30px;
}

#contact-type {
  grid-area: label;
  justify-self: start;
  align-self: start;
  /* Slight offset up to make it align with the entries */
  margin-top: -7px;
}

#contact-type>h2 {
  text-align: left;
}

#contact-info {
  grid-area: content;
  justify-self: start;
  align-self: start;
  text-align: left;
}

/* Screens smaller than 800px */

@media only screen and (max-width: 800px) {
  .triple-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 50px auto;
    grid-template-areas: "photo" "header" "text";
  }
  .about-me {
    min-width: 400px;
    width: 100vw;
    margin-top: 20px;
  }
  .dual-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 50px 1fr;
    grid-template-areas: "label" "content";
  }
  .resume {
    min-width: 400px;
    width: 100vw;
  }
  .courses {
    min-width: 400px;
    width: 100vw;
  }
  .skills {
    min-width: 400px;
    width: 100vw;
  }
  .contact {
    min-width: 400px;
    width: 100vw;
  }
  #contact-type {
    margin-top: unset;
  }
  #contact-info {
    margin-top: 20px;
  }
}