*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}
body {
  background-color: hsla(200, 100%, 98%, 1);
  color: hsla(200, 100%, 20%, 1);
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.page-container {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows:calc(100vh-4rem) 4rem ;
  place-items: center;
}
.side-bar {
    padding: 0 3rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color:rgb(118, 185, 219) ;
}
.contents {
  height: 100vh;
  overflow: scroll;
  scroll-behavior: smooth;

  font-size: 1.2rem;
}
.name {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bolder;
  font-size: 1.5rem;
  padding: 1rem 0;
}
.tagline {
  text-align: center;
  font-style: italic;
}
.tagline-author {
  text-align: center;
  font-weight: bold;
}
.hide {
  display: none;
}

h1 {
  text-align: center;
  font-weight: bolder;

}

section {
  padding: 10vh 3vw;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  scroll-snap-align: start;
}
.section-content {
  grid-template-columns: auto auto;
  row-gap: 0.5rem;
}

section h2 {
  text-align: center;
  font-weight: bolder;
}

#profile .section-content {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  text-align: left;
  gap: 0.5rem;
}
.section-content > .position {
  grid-column: 1 / span 2;
  font-weight: bold;
  font-size: 1.5rem;
}
.section-content > .institution {
  grid-column: 1 / span 2;
  padding-bottom: .5rem;
}
.section-content > .year {
  grid-column: 3;
  grid-row: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:1.5rem;
}

#otherinterests .section-content {
  /* display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr; */
  /* flex-direction: row; */
  /* gap: 10px; */
  display:flex;
  flex-wrap: wrap;
  gap:1rem;
  justify-content: center;
  align-items: center;
}

.otherinterest-item {
  text-decoration: none;
  /* width: clamp(100px, 30vw, 200px); */
  font-size: 1.1rem;
  color: hsla(200, 100%, 98%, 1);
  background-color: hsla(200, 100%, 10%, 1);
  border-radius: 4px;
  height: 4rem;
  width: min(16rem, 40vw);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: font-size 0.4s, color 0.4s, background-color 0.4s;
}
.otherinterest-item:hover {
    font-size: 1.2rem;
  background-color: lightgoldenrodyellow;
  color: red;
}

footer {
  background-color: hsla(200, 100%, 10%, 1);;
  color: hsla(200, 100%, 98%, 1);;
  width: 100%;
  grid-column: 1 / span 2;
  padding: 1rem;
  display:inline-block;
}

li{
    padding-bottom: 1rem;
}
#portrait {
  border-radius: 50%;
  width: min(70vw, 200px);
  height: min(70vw, 200px);
  border: 6px solid white;
}
@media screen and (max-width: 480px) {
}