/* 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) {
  footer {
    padding-bottom: 10vw;
  }

  #footerborder h1,
  #footerborder h2 {
    padding-left: 0.8vw;
    font-size: 3vw;
    letter-spacing: 0.6vw;
  }

  .footercontent {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    width: 100%;
    z-index: 1;
  }

  /* footer icon general behaviour */

  .footercontent a {
    display: flex;
    align-self: center;
    justify-self: center;
  }

  .footercontent .icon {
    display: flex;
    align-self: center;
    justify-self: center;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.5));
  }

  .footercontent .icon:hover {
    transition: height 0.1s;
    height: 8.5vw;
    filter: drop-shadow(0px 8px 8px rgba(0, 0, 0, 0.5));
  }

  .footercontent .icon:not(:hover) {
    transition: height 0.1s;
    height: 8vw;
  }

  /* Footer placements */
  #admin {
    grid-column: 1;
    grid-row: 3;
  }

  #footericons {
    display: grid;
    width: 80%;
    justify-self: center;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 15vw;
    grid-column: 1;
  }

  #contact {
    grid-column: 1;
    grid-row: 2;
  }

  .footerbox {
    justify-self: left;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 1vw;
    padding-left: 20vw;
  }

  .footerbox h1 {
    font-family: "Roboto", sans-serif;
    font-size: 5vw;
  }
  .footerbox li {
    list-style-type: none;
    font-family: "Archivo", sans-serif;
    font-size: 4vw;
  }
}