body,html{scrollbar-width:none;font-family:serif;font-size:1rem}

::-webkit-scrollbar {
  display: none;
}

body {
  max-width: 1200px;
  height: fit-content;

  margin: 0 auto;
  

  padding: 5%;
}

.masthead {
  position: static;

  height: fit-content;

  text-align: left;
  margin: 0;
  padding: 1%;
}

.masthead h1 {
  margin: 0;
  padding: 0;

  width: auto;

  font-family: "Visby Bold";
  font-size: clamp(2rem, 5vw, 4rem);

  display: inline;
}

.masthead > div {
  position: relative;
  
  max-width: 1200px;
}

.pfp {
  position: absolute;

  width: 3em;

  right: 0;

  border-radius: 100%;
  border: 2px solid;

  cursor: pointer;

}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 5px var(--text-primary); }
  50% { box-shadow: 0 0 20px var(--text-primary); }
}

.pfp.glow {
  animation: glow 2s ease-in-out infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.pfp.playing {
  animation: rotate 10s linear infinite;
}

.music-credit {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: monospace;
  font-size: 1.2rem;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  display: none;
  z-index: 1000;
}

body.playing audio,
body.playing .masthead,
body.playing .view,
body.playing .footer,
body.playing .theme-toggle {
  filter: blur(5px);
}

.pfp.playing {
  z-index: 1001;
}

.view {
  width: auto;
  min-height: 65vh;
  height: auto;

  border: 1px solid;

  border-left: 0;
  border-right: 0;

  padding: 1%;


  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1%;
}

.left-pane,
.right-pane {
  display: grid;
  gap: 1%;

  text-align: justify;
}

.left-pane {
  /* grid-template-rows: 2fr 1fr; */
  grid-auto-rows: max-content auto;

}

.left-pane > div,
.right-pane > div {
  padding: 2%;
}


.left-bottom {
  display: grid;
  gap: 0;

  height: fit-content;

  grid-template-columns: 1fr 1fr;

  text-align: left;

  border-top: 1px solid rgba(255, 255, 255, .5);
}

.left-bottom h3 {
  text-align: center;

}

.notes {
  border-right: 1px solid rgba(255, 255, 255, .5);
}

.notes > ul,
.blogs > ul {
  list-style:circle;
  /* padding-left: 30px; */
}


.right-pane {
  grid-auto-rows: fit-content(100%);
  /* grid-template-rows: 2fr 3fr; */
}

.projects {
  border-bottom: 1px solid rgba(255, 255, 255, .5) !important;
}

.projects h3 {
  text-align: center;
}

.projects ul {
  list-style: lower-greek;
}

.footer {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  /* justify-content: center; */
}

@media (max-width: 1199px) {

  .view {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .left-pane,
  .right-pane {
    display: contents;
  }

  .whoami {
    order: 1;
  }

  .projects {
    order: 2;
  }

  .projects::before {
    content: '';
    display: block;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.5);
    margin: 1em 0;
  }

  .left-bottom {
    order: 3;
    border-bottom: 1px solid rgba(255, 255, 255, .5);
  }

  .right-pane > div:nth-child(2) {
    order: 4;
  }



  body {
    padding: 3%;
    overflow-y: auto;
  }

  .footer {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

}

@media (max-width: 768px) {



  body {
    padding: 2%;
    font-size: 100%;
    line-height: 1.5;
  }

  .pfp {
    width: 2.5em;
  }

  .view {
    padding: 0.5%;
  }

  .left-pane,
  .right-pane {
    text-align: left;
  }

  .left-pane > div,
  .right-pane > div {
    padding: 1%;
  }

  .footer div {
    font-size: 90%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
  }

}

@media (max-width: 600px) {

  .left-bottom {
    grid-template-columns: 1fr;
  }

  .notes {
    border-right: none;
  }

  body {
    font-size: 95%;
  }



}