@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 30deg;
  inherits: false;
}

html, body {
  height: auto;
  min-height: 100%;
  margin: 0;
}

html {
  background: 
    url('overcloud.png'),
    linear-gradient(var(--gradient-angle), rgba(155, 42, 151, 1) 0%, rgba(217, 65, 154, 1) 27%, rgba(250, 120, 120, 1) 54%, rgba(255, 176, 97, 1) 83%, rgba(237, 196, 83, 1) 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center, center;
  background-attachment: fixed, fixed;
  animation: rotateAngle 40s linear infinite;
}

body {
  min-height: 100vh;
  text-align: center;
  box-sizing: border-box;
  padding: 20px;
}

@keyframes rotateAngle {
  from { --gradient-angle: 0deg; }
  to { --gradient-angle: 360deg; }
}

img {
  max-width: 90%;
  height: auto;
  display: block;
  margin: 0 auto 20px auto;
}

.links {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

a {
  background-color: rgba(255, 255, 255, 0.574);
  color: rgb(0, 0, 0);
  font-size: 20px;
  font-family: "Lucida Console", monospace;
  padding: 8px 16px;
  border-radius: 32px;
  text-decoration: none;
  margin-bottom: 20px;
}

a:hover {
  background-color: rgb(255, 255, 255);
  text-decoration: underline;
}

@media (max-width: 600px) {
  html {
    background-attachment: scroll, scroll;
  }
  a {
    font-size: 16px;
  }
}