::selection {
  background: #ffb7b7; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #ffb7b7; /* Gecko Browsers */
}

@font-face {
  font-family: IBM Plex Mono;
  src: local('IBMPlexMono-Regular'),
       url("fonts/IBMPlexMono-Regular.woff2") format("woff2"),
       url("fonts/IBMPlexMono-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: IBM Plex Mono;
  src: local('IBMPlexMono-Bold'),
       url("fonts/IBMPlexMono-SemiBold.woff2") format("woff2"),
       url("fonts/IBMPlexMono-SemiBold.woff") format("woff");
  font-weight: 600;
  font-display: swap;
}

  *{
    box-sizing: border-box;
  }

  canvas{
    max-width: 200px;
    max-height: 200px;
    width: 22vw !important;
    height: 22vw !important;
    cursor:pointer;
    position:absolute;
    top:7px;
    left:6px;
  }

  body{
    font-family: IBM Plex Mono, Monospace;
    /* background-color: #f5f5f5; */
    margin:0;
    padding: 0;
  }

  a:link, a:visited, a:active{
    text-decoration: none;
    color:black;
  }

  a:link, .link{
    border-bottom: solid 1px transparent;
  }

  a:link:hover, .link:hover, .link:focus, .link:active{
    border-color: currentColor;
  }

  header, footer{
    background: white;
    padding:.25em .5em;
    float: left;
    width: 100%;
    min-height: 2.5em;
  }

  header{
    min-height: 13.5em;
  }

  footer a:link{
    display: inline-block;
    margin-right: 2em;
    margin-top:.25em;
  }

  footer span{
    display: inline-block;
    width:25%;
    font-weight: 600;
  }

  .container{
    padding:.25em .5em;
    float: left;
    /* color: darkgrey; */
    background-color: #fbece7;
    transition: background-color .3s;
  }

  .name{
    font-weight: 600;
    position: absolute;
  }

  .about{
    width: 50%;
    min-width: 28em;
    padding-bottom: .5em;
    margin-left: 25%;
  }

  .bio{
    line-height: 1.4em;
  }

  .contact{
    position: absolute;
    top:.25em;
    right: .5em;
  }

  .serie{
    display: block;
    position: relative;
    margin: 1em 0;
    float: left;
    width: 100%;
  }

  .serie:first-of-type{
    margin-top: 1em;
  }

  .title{
    font-weight: 600;
  }

  .title, .more{
    display: table;
    clear: both;
  }

  .more{
    margin-top:.5em;
    font-size: .75em;
    cursor: pointer;
  }

  .link{
    margin-bottom: 0.35em;
    display: inline-block;
  }

  .description{
    display: none;
    padding-right: 1em;
    height: 0;
    /* visibility: hidden; */
    opacity: 0;
    transition-property: height;
    transition-duration: .3s;
    transition-delay: .1s;
  }

  .more[active] .description{
    display: block;
    transition-property: opacity;
    transition-delay: .1s;
    opacity: 1;
    height: unset;
    visibility: visible;
    line-height: 1.3em;
  }

  .info{
    display: inline-block;
    width: 25%;
    float: left;
  }

  .album{
    display: inline-block;
    height: 100%;
    width: 75%;
    float: left;
    /* overflow: hidden; */
    /* overflow-x: scroll; */
    /* white-space: nowrap; */
  }

  .photo{
    display: inline-block;
    height: 100%;
    width: auto;
    vertical-align: top;
    margin-bottom: .25em;
    height: 6.5em;
    /* margin-right: .5em; */
    cursor: pointer;
    /* transition: filter .2s ease-out; */
  }

  .photo:not([active]):hover{
    /* transform-origin: top left; */
    /* filter: invert(1); */
    filter: brightness(1.05);
  }

  .photo[active]{
    /* transition: none; */
    object-fit: contain;
    object-position: left;
    display: block;
    max-height: 90vh;
    height: auto;
    width: 95%;
    background-color: transparent;
  }

  @media (max-width:700px) {
    canvas{
      width: calc(100vw - 23px)!important;
      height: calc(100vw - 23px)!important;
      max-width: 400px;
      max-height: 400px;
      position: relative;
      left: 3px;
    }
    header{
      margin-bottom: 1em;
    }

    .about {
      width: 100%;
      padding: .25em;
      margin-top: 1.1em;
      margin-left: 0;
      min-width: unset;
    }

    .info{
      width: 100%;
      margin-bottom: 1em;
    }

    .album{
      width: 100%;
    }

    .photo[active]{
      width: 100%;
    }

    .more[active] .description{
      font-size: 1.2em;
    }

    footer span{
      display: none;
    }
  }