index.scss

@import '_universal';
@import '_header';
@import '_footer';

#main {
  width: 95%;
  margin: auto;
  padding-bottom: 50px;

  .left {
    p {
      text-transform: uppercase;
      font-weight: 100;
      font-size: 24px;
    }

    h1, p {
      padding-left: 20px;
    }

    img {
      margin-left: 20px;
      // Necessary to use margin here to prevent the image from deforming.
    }

    a {
      color: inherit;
    }

    a:hover {
      color: $link;
    }

  }

  .right {
    background-image: url('img/aiart.png');
    background-position: left top;
    margin-bottom: 20px;
  }

  @media only screen and (min-width: 600px) {
    .left, .right {
      display: inline-block;
      vertical-align: middle;
    }

    .left {
      width: 45%;
      height: calc(100vh - 80px);
    }

    .left > div {
      padding-top: 25vh;
    }

    .right {
      width: 54%;
      height: calc(100vh - 100px);
    }
  }

  @media only screen and (max-width: 600px) {
    .left {
      height: calc(40vh - 40px);
      width: 100%;
    }

    .left > div {
      padding-top: 5vh;
    }

    .right {
      height: calc(70vh - 110px);
      width: 80%;
      margin: auto;
    }
  }

  @media only screen and (max-width: 600px) and (max-height: 575px) {
    .right {
      visibility: hidden;
    }
  }

  @media only screen and (max-width: 310px) and (max-height: 710px) {
    .right {
      visibility: hidden;
    }
  }

  @media only screen and (max-height: 600px) {
    .left > div {
      padding-top: 5vh;
    }
  }
}

#introduction {
  padding-bottom: 50px;

  .box-container {
    display: flex;
    justify-content: center;
  }

  h1 {
    text-align: center;
    margin-bottom: 20px;
  }

  p {
    margin-bottom: 40px;
    text-indent: 24px;
  }

  svg {
    margin-right: 16px;
    display: inline-block;
    vertical-align: middle;
    fill: $dark-gray;
  }
}

#see {
  background-color: #555;
  background-position: center;
}