/*---------------ROOT ELEMENTS---------------*/
@font-face {
  font-family: "MainFont";
  src: url("../fonts/font.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ofwhite-color: #eeeae5;
  --ofwhite-color-translucid: rgba(238, 234, 229, 0.8);
  --main-color: #ff61d1;
  --yellow-color: #ffff00;
  --light-yellow-color: #ffffe5;
  --border: 1px solid rgba(0,0,0,0.5);
  --border-darker: 1px solid rgba(0,0,0,0.8);
  --main-font: "neue-haas-grotesk-display", sans-serif;
  --signature-font: "stix-two-text", serif;
  --main-transition: all 0.5s ease-in-out;
}

ul, ul *{list-style:none;}
h1{text-transform:uppercase; line-height:0.9; text-align:center; letter-spacing:-0.75px;}
p{font-size:14px; letter-spacing:-0.5px; line-height:1;}


@keyframes breathe-resting {
  0%   { background-color: #ffffe5; }
  40%  { background-color: #ffff00; }
  100% { background-color: #ffffe5; }
}

@keyframes breathe-walking {
  0%   { background-color: #ffffe5; }
  30%  { background-color: #ffff00; }
  45%  { background-color: #ffff00; }
  100% { background-color: #ffffe5; }
}

body{font-family: "MainFont", Arial, sans-serif; background-color:var(--light-yellow-color); color:var(--main-color); -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-kerning: normal; font-synthesis: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;}
body.breathe-resting {background-color: #ffffe5; animation: breathe-resting 5s cubic-bezier(0.45, 0, 0.55, 1) infinite;}
body.breathe-walking {background-color: #ffffe5; animation: breathe-walking 2.6s ease-in-out infinite;}

#audios{display:none;}
#buttons {margin-top:50px;}
#buttons ul li {width:fit-content; margin-bottom:5px; border:1px solid var(--main-color); border-radius:20px; line-height:1; padding:4px 6px 3px 3px; cursor:pointer; text-transform:uppercase; font-size:14px; transition:all 0.3s ease-in-out;}
#buttons ul li:hover {background-color:var(--yellow-color);}
#buttons ul li.active{background-color:var(--yellow-color);}
#buttons ul li span:after{ content:""; display:inline-block; width:0; height:0; margin-left:5px; border-style:solid; border-width: 5px 0 6px 6px; border-color: transparent transparent transparent currentColor;}
#buttons ul li.active span:after{margin-left:4px; margin-right:1px; width: 2px; height: 10px; border-width: 0 2px; border-color: currentColor;}
#footer{position:fixed; bottom:20px; transform:translateX(-50%); left:50%;}
#footer .production svg{margin-left:40px; width:150px; fill:var(--main-color);}
#footer .support h6{text-align:center; text-transform:uppercase; font-size:9px; margin-bottom:17px;}
#footer .support svg{width:220px; fill:var(--main-color);}