@import url(base.css);

#url {
  font-size: 100px;
}

#logo {
  max-width: 600px;
  width: 100%;
  min-width: 200px;
}

#logo__javascript {
  fill: var(--text-color);
}

#grid {
  display: grid;
  align-content: space-around;
  justify-content: space-around;
  justify-items: center;
  gap: 20px;
  padding: 20px;
}

body:not(.mobile) {
  #grid {
    margin-top: 10vh;
  }

  #heading {
    text-align: center;
    width: 100%;
  }

  #content {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 777px;
  }
}

body.mobile {
  @media (orientation: landscape) {
    #grid {
      grid-template-columns: repeat(13, 1fr);
      padding: 0 20px;
    }

    #heading {
      grid-column-start: 1;
      grid-column-end: 7;
    }

    #content {
      grid-column-start: 1;
      grid-column-end: 7;
    }

    #links {
      grid-column-start: 7;
      grid-column-end: 14;
    }
  }
}