html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    background-color: #ebdce1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.top-bar {
    width: 100%;
    height: 50px;
    background-color: #8D5B4C;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.sound {
    width: 35px;
    height: 35px;

}

.content {
    flex: 1; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; 
    padding: 20px 40px 60px 40px;
}


.center-circle{
  width: 320px;       
  height: 320px;
  border-radius: 50%;

  background-image: url("img/kaleidoscope copy 2.png");
  background-size: cover;
  background-repeat: no-repeat;

  margin: 0 auto;
    position: absolute;
  right:150px;
    top:66%;
  transform:translateY(-66%);
}
.circle-link:hover {
  opacity: 0.7;
}


.title-container{
  position: absolute;
  top: 30px;
  left: 40px;
  text-align: left;
  font-size: 45px;
  font-family: "Libre Bodoni", serif;
  color: #8D5B4C;
}
.copyright{
    position: absolute;
    bottom: 40px;
  left: 40px;
  text-align: left;
  font-size: 35px;
  font-family: "Libre Bodoni", serif;
  color: #8D5B4C;
}



a,
button,
.center-circle,
.text-ring,
body,
svg * {
  cursor: url("img/brownymouse.png"), auto;
}
@media (max-width: 768px){

  h1{
    font-size: 12vw;
    line-height: 1.05;
  }

  h2{
    font-size: 7vw;
  }

  h3{
    font-size: 5vw;
  }

}