@charset "UTF-8";
/* CSS Document */
.dropdown{
  display:none;
}
label,
li{
  display:block;
  font-family: grad, serif;
  text-align: left;
}
label {
  border-bottom: 0.3px solid;
}
li a {
  font-size: 1.4rem;
}
li::before,
label::before{
  content:"";
  display:block;
  position:absolute;
  right:-35%;
  width:.5em;
  height:.5em;
  border-top:#ADADAD 1px solid;
  border-left:#ADADAD 1px solid;
  transform:rotate(135deg);
  margin-top: 0.6rem;
}
input[type="checkbox"]{
  display:none;
}
label[for="menu"]{
  display:block;
}
label[for="menu"]::before{
  transform:rotate(225deg);
}
#menu:checked + .dropdown{
  display:block;
  padding: 0;
}
.profile-wrapper {
  width: 100vw;
  max-width: 800px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.photo-wrapper {
  width: calc(100vw - 180px);
  max-width: 500px;
}
.about-wrapper {
padding: 10px 90px 0 0;
}
.about-wrapper dl {
  text-align: right;
  letter-spacing: 0.1rem;
  margin: 0;
}
.about-wrapper dt {
  font-size: 1.3rem;
  font-weight: 300;
}
.about-wrapper dd {
  font-size: 1.3rem;
  font-weight: 300;
}
.labels-wrapper {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, 0%);
}
.labels-flex p {
  font-size: 0.5rem;
  margin: 0;
}
.labels-flex p a {
  color: #FFF;
}
.labels-wrapper span {
  font-size: 0.5rem;
}
@media(max-width:374px) {
  .about-wrapper dt,
  .about-wrapper dd {
    font-size: 1.2rem;
  }
  .labels-wrapper {
  bottom: 15px;
}
.labels-flex p {
  font-size: 0.2rem;
}
.labels-wrapper span {
  font-size: 0.2rem;
}
}
@media(min-width:768px) {
  .profile-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 40px;
  }
  .photo-wrapper {
  width: 30%;
  max-width: none;
}
  .about-wrapper {
  padding-right: 0px;
}
  .about-wrapper dt,
  .about-wrapper dd {
    font-size: 1.5rem;
  }
.labels-flex {
  display: flex;
  justify-content: center;
  gap: 5px;
}
}