/* max device width is deprecated, but still supported by all browsers according to w3c,
max-device-width here ensures that all devices below 720p are recognized as mobile devices,
an appropriate breakpoint for desktop in pixels may not be appropriate for mobile devices.
and until we have a reliable relative unit that normalizes physical screen size and pixel density, 
this is a reasonable way to ensure desired behavior.
*/
@media only screen and (max-width: 959px),
  only screen and (max-device-width: 1023px) {
  header {
    padding-top: 10vw;
  }

  #hero {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 10vw 60vw 10vw;
    padding-top: 8vw;
  }
  #hero .left {
    visibility: hidden;
  }

  #hero .right {
    justify-self: center;
    width: fit-content;
    height: fit-content;
    grid-column: 2;
    grid-row: 2;
  }

  #hero .right > * {
    height: 60vw;
    width: 60vw;
    margin: 2vw;
  }

  #scrollcontainer {
    display: none;
  }

  #textbox {
    padding-left: 5vw;
    padding-right: 5vw;
    padding-bottom: 5vw;
  }

  .textboxcolor1 {
    background: linear-gradient(180deg, #e5e6d8 0%, #454544 20vw, black 200%);
  }

  .textboxcolor2 {
    background: linear-gradient(180deg, #454544 20vw, black 200%);
  }

  #textbox > section {
    padding-top: 25vw;
  }

  #textbox h1,
  #textbox h2 {
    width: fit-content;
  }

  #textbox h1 {
    font-size: 10vw;
    margin-bottom: 5vw;
  }

  #textbox h2 {
    font-size: 6vw;
    margin-top: 5vw;
    margin-bottom: 5vw;
  }

  #textbox p {
    font-size: 4vw;
    margin-bottom: 1vw;
    line-height: 7vw;
  }

  .list {
    font-size: 3vw;
    padding-left: 3vw;
    padding-top: 1vw;
    grid-template-columns: 1fr 1fr;
    line-height: 5vw;
  }

  .bottomarea {
    padding-left: 0vw;
    padding-right: 0vw;
  }

  .bottomareasound {
    padding-left: 0vw;
    padding-right: 0vw;
    padding-top: 0vw;
    padding-bottom: 5vw;
    min-height: 0vh;
    display: flex;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    justify-content: center;
    background-color: #e5e6d8;
  }

  /* software specific css */
  .softwarebottomarea {
    padding-left: 2vw;
    padding-right: 2vw;
    display: grid;
    grid-template-rows: fit-content;
    background-color: #e5e6d8;
  }

  .softwareitem {
    width: 100%;
    padding-left: 0vw;
    padding-right: 0vw;
    padding-top: 1vw;
    margin-top: 2vw;
    display: grid;
    grid-template-columns: 0% 100%;
    grid-template-rows: fit-content;
    background-color: #e5e6d8;
  }

  .softwareitem:last-of-type {
    margin-bottom: 2vw;
  }

  .softwareAside {
    grid-column: 2;
    display: grid;
    grid-template-rows: fit-content fit-content fit-content 1fr;
    grid-template-columns: 100%;
    margin-left: 1vw;
  }

  .asideTop > h1 {
    color: #e5e6d8;
    color: #454544;
    font-size: 6vw;
    padding-right: 1vw;
    font-family: "Roboto", sans-serif;
  }

  .asideText > p {
    font-size: 4vw;
    margin-bottom: 1vw;
    font-family: "Archivo", sans-serif;
    line-height: 4vw;
  }
}