:root {
  --logo_size: min(50vw, 50vh);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

.htop {
  position: fixed;
  top: 0;
  width: 100%;
  color: #e8e8e8;
  background-color: #111111;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 5px;
  height: 100%;
  z-index: 1;
}

.logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--logo_size);
  width: var(--logo_size);
}

.logo .gear{
  background: #ffffff linear-gradient(90deg, #ffe8e8, #ffffe8, #e8ffe8, #e8ffff, #e8e8ff, #ffe8ff, #ffe8e8) repeat-x;
  background-size: 200% 100%;
  height: 90%;
  width: 90%;
  mask-image: url(./assets/tandwiel.svg);
  mask-size: 100% 100%;
  mask-position: center;
  text-align: center;
  animation: rot 120s infinite linear, bg 30s infinite linear;
  transition: height 300ms, width 300ms;
}

@keyframes rot {
  0% {rotate: 0deg}
  100% {rotate: 360deg}
}

@keyframes bg {
  0% {background-position: 0% 100%}
  50% {background-position: 100% 200%}
  100% {background-position: 200% 300%}
}

.logo h2{
  font-size: calc(var(--logo_size) * 0.4);
  position: absolute;
  color: #ffe8e8;
  animation: col 30s infinite linear;
}

@keyframes col {
  0% {color: #ffe8e8}
  16% {color: #ffffe8}
  33% {color: #e8ffe8}
  50% {color: #e8ffff}
  67% {color: #e8e8ff}
  83% {color: #ffe8ff}
  100% {color: #ffe8e8}
}

.logo:hover .gear {
  height: 100%;
  width: 100%;
}