* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body, main {
  height: 100%;
}

main {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;

  text-align: center;
}

p {
  text-align: left;
}

a, a:visited {
  text-decoration: none;

  color: inherit;
}

p a {
  text-decoration: underline;
}

img {
  max-width: 300px;
}

section {
  color: white;
  background-color: #34495e;
}

.start {
  padding: 5px 15px;

  color: black;
  border-radius: 20px;
  background-color: #16a085;
}

.right a:hover {
  text-decoration: none;
}

.right {
  flex-basis: 40%;

  background-color: inherit;
}

section {
  display: flex;
  align-items: center;
  flex-basis: 60%;
  flex-direction: column;
  justify-content: center;

  width: 100%;
  height: 100%;
}

section > div {
  max-width: 500px;
  padding: 0 30px;
}

@media only screen and (min-width: 750px) {
  main {
    flex-direction: row;
  }
}