html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: sans-serif;
  overflow: hidden;
}

.background {
  position: absolute;
  width: 100%;
  height: 100%;
}

main {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: white;
  mix-blend-mode: hard-light;
}

.circle {
  position: relative;
  width: 600px;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 15px gray solid;
  border-radius: 50%;
  cursor: pointer;

  transition: width 1s linear, height 1s linear, border-width 1s linear;
}

@media (max-width: 1175px) {
  .circle {
    border-color: transparent;
  }
}

@media (min-width: 1475px) {
  .circle::before {
    content: '';
    position: absolute;
    width: 900px;
    height: 900px;
    border-width: 15px;
    border-style: solid;
    border-color: transparent gray;
    border-radius: 50%;
    cursor: pointer;
  }
}

@media (min-width: 1750px) {
  .circle::after {
    content: '';
    position: absolute;
    width: 1200px;
    height: 1200px;
    border-width: 15px;
    border-style: solid;
    border-color: transparent gray;
    border-radius: 50%;
    cursor: pointer;
  }
}

.circle.big {
  width: 0;
  height: 0;
  border-width: 50vw;
  border-color: gray;
}

img.me {
  width: 300px;
  height: 300px;
  border-radius: 50%;

  transition: width 1s linear, height 1s linear;
}

.circle.big img.me {
  width: 0;
  height: 0;
}

.links {
  position: absolute;
  left: 0;
  padding: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.links a {
  display: block;
  color: grey;
  font-size: 1.8em;
  font-weight: bold;
  text-decoration: none;
  line-height: 2em;
  cursor: default;
}

.links a:hover {
  text-decoration: underline;
}

.links.mirror {
  left: auto;
  right: 0;
  top: 50%;
  transform: scaleX(-1) translateY(-50%);
}

img.penguin {
  position: absolute;
  top: 20px;
  right: 20px;
  height: 30px;
}