html {
    box-sizing: border-box;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
  }
  html, body {
    overscroll-behavior: none;
    color: rgb(255, 38, 38);
    mix-blend-mode:exclusion;
    /* background-color: rgb(94, 38, 38); */
  }
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }
  
  ::selection {
    color: rgb(255, 255, 255);
    /* background: #ffffe0; */
    background: rgb(255, 38, 226);
  }
  
  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ol,
  ul {
    margin: 0;
    padding: 0;
    font-weight: normal;
    overflow-wrap: break-word;
  }
  header {
    position: sticky;
    top: 0; 
    /* background: white; */
    /* backdrop-filter: blur(10px); */
  }
  h1 {
    font-size: 3em;
/* padding: 10px; */
  }
  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
  }
  
  img {
    /* cursor: pointer; */
    user-select:none;
    -webkit-user-select: none;
    max-width: 100%;
  }
  
  .block {
    cursor:default;
  }
  

  
  .expand img {
    width:100%;
    filter: none;
  }
 
  /* img:hover {
    filter: invert(100%);
  } */
  
  section {
    display: flex;
    position: relative;
    justify-content: center;
    max-width: 100vw;
  }

  #blockspace {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap: 40px 40px;
    /* padding: 160px 20px 60px; */
    justify-content: start;
    overflow: visible;
    /* max-width: calc(100vw - 80px); */
  }
  
  /* .block {
  } */

.top {
  display: flex;
  position: fixed;
  justify-content: left;
  white-space: wrap;
  font-size: 2em;
  top: 0em;
  right: 0em;
  padding: .5em .8em;
  z-index: 101;
  max-width: 70vw;      

}

.left {
  padding-bottom: 1em;
  max-width: 25vw;
  position: fixed;
  /* background: rgba(255, 255, 255, 0.9); */
  padding: 1.5em;
  z-index: 101;
}

.left:nth-of-type(1) {
  /* top: 25%; */
    bottom: .2em;
right: 0;
  /* left: 15%; */
}

.left:nth-of-type(2) {
  /* top: 20%; */
    /* left: 25%; */
}

.left:nth-of-type(3) {
  bottom: .2em;
  /* left: 50px; */
}

.hidden {
  display: none;
}

.aboutbutton {
  cursor: cell;
  user-select: none;
  -webkit-user-select: none;
  color: rgb(255, 38, 38);
}

.aboutbutton:hover {
  /* text-decoration: underline solid rgb(16, 255, 48) 3px;
  text-underline-offset: 3px; */
  font-style:oblique;
}

#about {
  cursor: cell;
  user-select: none;
  -webkit-user-select: none;
}

.expand {
  width: 50%;
}

.block-title {
  color: rgb(255, 255, 255);
  background-color: rgb(255, 0, 0);
  width: fit-content;
}

.onlymobile {
  display:none;
}
  
  @media only screen and (max-width: 900px) {
      #blockspace {
          grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      }
      .block:nth-child(3n+1) {
        grid-column: span 1;
      }
      
      .block:nth-child(5n+2) {
        grid-column: span 2;
      }
        .onlydesktop {
          display:none;
        }


      }
  
  
  
  
  @media only screen and (max-width: 600px) {
    /* .grid-container {
      grid-template-columns: repeat(1, 1fr);
    } */
    .expand {
      width: 100%;
    }
  
    .onlymobile {
      display:block;
    }

    h1 {

       font-size: 50px;
    }

    .left {
max-width: 100vw;
    }
    
/* 
        .aboutbutton h1.top{
 }
    */
.left:nth-of-type(1) {
   bottom: 5em;
}
  }