@charset "utf-8";

:root{
}

#profile{
  img{
    border-radius: 15px;
    width:min(860px,100%);
  }
  dl{
    margin:20px 0 30px 0;
    background:#E3D3B7;
    border:1px solid #E3D3B7;
    border-top:none;
    display:grid;
    grid-template-columns: 11em 1fr;
    dt{
      padding:0.7em 0.5em 0.5em 0.5em;
      border-top:1px solid white;
    }
    dd{
      text-align:left;
      border-top:1px solid #E3D3B7;
      background:white;
      padding:0.7em 1em 0.5em 1em;
    }
  }
  iframe{
    width:100%;
    height:min(450px,90vh);
    border-radius: 15px;
  }
  @media (max-width: 768px) {
    dl{
      display:block;
      background:white;
      border:none;
      border-bottom:1px solid gray;
      dt{
        font-weight: 500;
        text-align: left;
        padding:10px 10px 0 10px;
        border-top:1px solid gray;
      }
      dd{
        padding:5px 10px 10px 10px;
        border-top:none;
        font-size: .9em;
      }
    }
  }
}