body {
  background-color: #fff;
}

@font-face {
  font-family: Agrandir-Grand;
 src: url(../assets/Agrandir-Grand.otf); 
}

@font-face {
  font-family: Agrandir-WideLight;
 src: url(../assets/Agrandir-WideLight.otf); 
}

.helloHeadspace{
text-align: center;
  position: absolute;
  padding-top: 20px;
  left: 50%;
  transform: translate(-50%, -50%);
    width: 85%;

font-family: Agrandir-Grand;
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 32px;
    letter-spacing: 0.08em;

}


.center {
    display: block;
  margin-left: auto;
  margin-right: auto;
  width: 1040px;
}

.character {
    position: fixed;
width: 116px;
height: 116.5px;
left: 71px;
top: 41px;
}


.bottomText {
    text-align: left;
    padding-left: 13.5%;
    padding-right: 13.5%;
    font-family: Agrandir-WideLight;
    font-size: 56px;
    padding-top: 190px;
   
}

.appreciationSide {
    position: fixed;
    text-align: center;


left: -60px;
top: 50%;

font-family: Agrandir-WideLight;
font-style: normal;
font-weight: normal;
font-size: 25px;


letter-spacing: 0.125em;

color: #000000;

transform: rotate(-90deg);
}

.microsite {
    text-align: center;
    position: fixed;

right: -40px;
top: 50%;

font-family: Agrandir-WideLight;
font-style: normal;
font-weight: normal;
font-size: 25px;
line-height: 31px;
text-align: center;
letter-spacing: 0.125em;

color: #000000;

transform: rotate(90deg);
}



.circle {
    position: fixed;
width: 192px;
height: 190px;
right: 67px;
top: 41px;
 
    
    -webkit-animation:spin 12s linear infinite;
    -moz-animation:spin 12s linear infinite;
    animation:spin 12s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

}



.main {
    padding-top: 50px;
}