* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  width: 100vw;
  background-color: RGB(53, 152, 220);
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  height: 35vh;
  width: 100vmin;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

main {
  height: 100%;
  width: 100%;
  display: flex;
}

main > aside {
  width: 2vmin;
  height: 2vmin;
  font-size: 1rem;
  align-self: center;
  justify-self: center;
  color: RGB(53, 152, 220);
  background-color: RGB(202, 227, 246);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.arrow {
  border: solid RGB(53, 152, 220);
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
}

main > article {
  height: 30vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

article > img {
  width: 95%;
  height: 80%;
  background-size: contain;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
}

footer > button {
  width: 1vmin;
  height: 1vmin;
  background-color: RGB(41, 115, 165);
  border: 0;
  border-radius: 20px;
  margin-right: 2vw;
  cursor: pointer;
}

button:hover {
  border: 0;
  background-color: RGB(16, 38, 55);
}

button:active {
  border: 0;
  background-color: RGB(16, 38, 55);
}