/* id */
a,
a:visited {
  color: #387C70;
  font-weight: bold;
}
a:hover {
  border-bottom: 1px solid #387C70;
}

html {
  font-size: 16px;
}


/* tools */
.border-square-2 {
  border: solid 2px #86C8BC;
  border-radius: 5px;
}

.border-bottom-1-black {
  border-bottom: 1px solid #333;
}

.cursor-pointer {
  cursor: pointer;
}

.font-size-1 {
  font-size: 1rem;
}
.font-size-1-1 {
  font-size: 1.1rem;
}
.font-size-1-3 {
  font-size: 1.3rem;
}
.font-size-1-5 {
  font-size: 1.5rem;
}

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

.list-style-circle {
  list-style: circle;
}
.list-style-disc {
  list-style: disc;
}
.list-style-none {
  list-style: none;
}
.list-style-square {
  list-style: square;
}

.margin-bottom-0-5 {
  margin-bottom: .5rem;
}
.margin-bottom-1 {
  margin-bottom: 1rem;
}
.margin-bottom-2 {
  margin-bottom: 2rem;
}
.margin-bottom-3 {
  margin-bottom: 3rem;
}

.margin-left-1 {
  margin-left: 1rem;
}
.margin-left-2 {
  margin-left: 2rem;
}

.min-height-200 {
  min-height: 200px;
}
.min-height-1050 {
  min-height: 1050px;
}

.padding-0-5 {
  padding: .5rem;
}
.padding-bottom-0-5 {
  padding-bottom: .5rem;
}

.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}

.underline-green {
  text-decoration: underline;
  text-decoration-thickness: .5rem;
  text-decoration-color: #CEEDC7;
  text-underline-offset: -.3rem;
  text-decoration-skip-ink: none;
}
.underline-pink {
  text-decoration: underline;
  text-decoration-thickness: .5rem;
  text-decoration-color: #FFD4B2;
  text-underline-offset: -.3rem;
  text-decoration-skip-ink: none;
}
.underline-yellow {
  text-decoration: underline;
  text-decoration-thickness: .5rem;
  text-decoration-color: #FFF6BD;
  text-underline-offset: -.3rem;
  text-decoration-skip-ink: none;
}


/* each items */
.header-logo {
  width: 300px;
}

.summary-img {
  width: 200px;
}

.twitter-timeline {
  height: 1000;
}


/* micromodal */
.modal {
  display: none;
}
.modal.is-open {
  display: block;
}
.modal__overlay {
  align-items: center;
  background: rgba(0,0,0,0.6);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}
.modal__container {
  background-color: #fff;
  border-radius: 4px;
  box-sizing: border-box;
  max-height: 70vh;
  max-width: 90vw;
  overflow-y: auto;
  padding: 2rem;
}
.modal__header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.modal__title {
  box-sizing: border-box;
  color: #00449e;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 0;
  margin-top: 0;
}
.modal__close {
  background: transparent;
  border: 0;
}
.modal__content {
  color: rgba(0,0,0,.8);
  line-height: 1.5;
  margin-bottom: 2rem;
  margin-top: 2rem;
}


/* grid areas */
.about-1-1 {
  grid-area: about-1-1;
}
.about-1-2 {
  grid-area: about-1-2;
}
.about-2-1 {
  grid-area: about-2-1;
}
.about-2-2 {
  grid-area: about-2-2;
}
.about-3-1 {
  grid-area: about-3-1;
}
.about-3-2 {
  grid-area: about-3-2;
}
.about-4-1 {
  grid-area: about-4-1;
}
.about-4-2 {
  grid-area: about-4-2;
}
.about-5-1 {
  grid-area: about-5-1;
}
.about-5-2 {
  grid-area: about-5-2;
}
.about-6-1 {
  grid-area: about-6-1;
}
.about-6-2 {
  grid-area: about-6-2;
}
.about-7-1 {
  grid-area: about-7-1;
}
.about-7-2 {
  grid-area: about-7-2;
}

.content {
  grid-area: content;
  padding: 0 1rem;
}

.empty {
  grid-area: empty;
}

.footer {
  font-size: 1rem;
  grid-area: footer;
  padding: 0 1rem 1rem 1rem;
}

.footer-nav {
  font-size: 1rem;
  grid-area: footer-nav;
  padding: 1rem 2rem 0 2rem;
}
.footer-nav-1 {
  grid-area: footer-nav-1;
}
.footer-nav-2 {
  grid-area: footer-nav-2;
}
.footer-nav-3 {
  grid-area: footer-nav-3;
}
.footer-nav-4 {
  grid-area: footer-nav-4;
}
.footer-nav-5 {
  grid-area: footer-nav-5;
}

.header {
  grid-area: header;
  padding: 1rem;
}

.nav {
  font-size: 1.3rem;
  grid-area: nav;
  margin-bottom: 1rem;
  padding: 0 1rem;
}
.nav-1 {
  grid-area: nav-1;
}
.nav-2 {
  grid-area: nav-2;
}
.nav-3 {
  grid-area: nav-3;
}
.nav-4 {
  grid-area: nav-4;
}

.side {
  grid-area: sidebar;
  padding: 0 1rem;
}

.summary-content-1 {
  grid-area: summary-content-1;
}
.summary-content-2 {
  grid-area: summary-content-2;
}


/* grid wrappers */
.wrapper {
  background-color: #F9F9F9;
  border-color: #86C8BC;
  border-style: solid;
  border-width: 20px 5px;
  display: grid;
  font-size: 1.4rem;
  gap: 20px;
  grid-template-areas:
    "header"
    "nav"
    "content"
    "sidebar"
    "empty"
    "footer-nav"
    "footer";
  justify-items: center;
}
.wrapper-about {
  display: grid;
  gap: 10px;
  grid-template-areas:
    "about-1-1 about-1-2"
    "about-2-1 about-2-2"
    "about-3-1 about-3-2"
    "about-4-1 about-4-2"
    "about-5-1 about-5-2"
    "about-6-1 about-6-2"
    "about-7-1 about-7-2";
  grid-template-columns: 1fr 2fr;
}
.wrapper-footer-nav {
  display: grid;
  gap: 20px;
  grid-template-areas:
    "footer-nav-1 footer-nav-2"
    "footer-nav-3 footer-nav-4"
    "footer-nav-5 footer-nav-5";
}
.wrapper-nav {
  display: grid;
  gap: 20px;
  grid-template-areas:
    "nav-1 nav-2"
    "nav-3 nav-4";
}
.wrapper-summary-content {
  align-items: center;
  display: grid;
  gap: 20px;
  grid-template-areas:
    "summary-content-1"
    "summary-content-2";
  justify-items: center;
}


/* media query */
@media (min-width: 768px) {
  .content {
    padding-left: 0;
  }

  .empty {
    width: 3vw;
  }

  .summary-img {
    width: inherit;
  }

  .wrapper {
    border-width: 20px 30px;
    grid-template-columns: 2fr 5fr;
    grid-template-areas:
      "header     header     header"
      "nav        nav        nav"
      "sidebar    content    empty"
      "footer-nav footer-nav footer-nav"
      "footer     footer     footer";
  }
  .wrapper-about {
    grid-template-columns: 1fr 4fr;
  }
  .wrapper-footer-nav {
    grid-template-areas:
      "footer-nav-1 footer-nav-2 footer-nav-3 footer-nav-4 footer-nav-5";
  }
  .wrapper-nav {
    gap: 40px;
    grid-template-areas:
      "nav-1 nav-2 nav-3 nav-4";
  }
  .wrapper-summary-content {
    grid-template-areas:
      "summary-content-1 summary-content-2";
  }
}
@media (min-width: 1366px) {
  .empty {
    width: 5vw;
  }
}