@font-face {
  font-family: 'VerveineRegular';
  src: url('../font/VerveineRegular.woff') format('woff'), /* Modern Browsers */
       url('../font/VerveineRegular.TTF')  format('truetype'); /* Safari, Android, iOS */
}

@font-face {
  font-family: 'Tondo';
  src: url('../font/Tondo.woff') format('woff'), /* Modern Browsers */
       url('../font/Tondo.TTF')  format('truetype'); /* Safari, Android, iOS */
}

:root {

  --cl-accent: hsl(339, 88%, 39%);


  --tx-sm: 12px;
  --tx-md: 16px;
  --tx-lg: 20px;
  --tx-xl: 24px;
  --tx-2xl: 28px;
  --tx-3xl: 34px;
  --tx-4xl: 40px;
  --tx-5xl: 48px;

  --cl-text-h: 0;
  --cl-text-s: 0;
  --cl-text-l: 15;

  --cl-text-s-prct: calc(var(--cl-text-s) * 1%);
  --cl-text-l-prct: calc(var(--cl-text-l) * 1%);

  --cl-text: hsl(
    var(--cl-text-h),
    var(--cl-text-s-prct),
    var(--cl-text-l-prct)
  );

}

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  user-select: none;
}

html, body{
  min-height: 100vh;
  font-family: Tondo;
}

body {
  position: relative;
}

.main-bg{
  --cs-paralax-offest: 0px;
  --cs-size-multiplier: 1;

  position: fixed;
  inset: 0;

  background-image: 
    url('../img/logo_red.svg'),
    url('../img/logo_blue.svg'),
    url('../img/logo_yellow.svg');
  background-position:
    calc(100vw * .75) calc(0vh - 64px - calc(var(--cs-paralax-offest) * 0.9)),
    calc(0vw - 128px) calc(100vh * .5 - 128px - calc(var(--cs-paralax-offest) * 1.1)),
    calc(100vw - 256px) calc(100vh - 256px - calc(var(--cs-paralax-offest) * 0.8));
  background-size:
    calc(128px * var(--cs-size-multiplier)) calc(128px * var(--cs-size-multiplier)),
    calc(256px * var(--cs-size-multiplier)) calc(256px * var(--cs-size-multiplier)),
    calc(512px * var(--cs-size-multiplier)) calc(512px * var(--cs-size-multiplier));
  background-repeat: 
    no-repeat,
    no-repeat,
    no-repeat;
  

  opacity: .5;
  filter: blur(4px) grayscale(.25);
  z-index: -1;
}

.main-content-wrapper{
  padding: 8rem 0;

  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.text-5xl{
  font-size: var(--tx-5xl);
}

.text-4xl{
  font-size: var(--tx-4xl);
}

.text-3xl{
  font-size: var(--tx-3xl);
}

.text-2xl{
  font-size: var(--tx-2xl);
}

.text-xl{
  font-size: var(--tx-xl);
}

.text-lg{
  font-size: var(--tx-lg);
}

.text-md{
  font-size: var(--tx-md);
}

.text-sm{
  font-size: var(--tx-sm);
}

.text-center {
  text-align: center;
}

.text-decorated {
  font-family: VerveineRegular;
}

.text-highlighted {
  text-decoration: underline 2px;
  color: var(--cl-accent);
}

.text-muted {
  color: hsl(
    var(--cl-text-h),
    var(--cl-text-s-prct),
    calc(var(--cl-text-l-prct) + 25%)
  );
}

.btn{
  --cs-color: var(--cl-accent);
  --cs-color-text: #fff;

  cursor: pointer;
  padding: 1rem 4rem;
  border-radius: 4px;
  background-color: var(--cs-color);
  color: var(--cs-color-text);

  text-decoration: none;
  border: none;
}

:is(section, header).full-page{
  height: 100dvh;
}

:is(section, header).full-page.first{
  margin-top: -8rem;
  height: 100dvh;
}
:is(section, header).full-page.last{
  margin-bottom: -8rem;
  height: 100dvh;
}

:is(section, header).full-page.first.last{
  height: 100dvh;
}

:is(section, header).centered{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.rating-list{
  display: flex;

  gap: 1rem;
  align-items: center;
  justify-content: center;

  margin: 1rem 0;
  max-width: 700px;
}

.rating-list .rating-option{
  cursor: pointer;
  transition-duration: .15s;
}

.rating-list[aria-disabled="true"] *{
  pointer-events: none;
}

.rating-list:not([data-value=""]) .rating-option[aria-checked="true"]{
  scale: 1.1;
}

.rating-list:not([data-value=""]) .rating-option:not([aria-checked="true"]){
  scale: .9;
  filter: grayscale(.5);
}

.rating-list .rating-option-font{
  font-size: 96px;
}

.rating-list .rating-option-img img{
  width: 100%;
  aspect-ratio: 1 / 1;
}

.no-select-highlight, .no-select-highlight *{
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

:is(.no-select-highlight, .no-select-highlight *):is(:focus, :hover) {
  outline: none !important;
}

.rating-list .rating-option-img{
  width: calc(700px / 5);
  min-width: 0;
  min-height: 0;
}

[class*="js-selected-rating"]{
  width: calc(700px / 5);
  aspect-ratio: 1 / 1;
}

[class*="js-selected-rating"][src="undefined"]{
  display: none;
}

section.hide{
  display: none !important;
}

@keyframes ShowTransitionOpacity {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

section.show-transition--opacity{
  animation: ShowTransitionOpacity .3s;
}

@keyframes ShowTransitionSlideFromRight {
  from {
    translate: 48px 0px;
  }

  to {
    translate: 0px 0px;
  }
}

section.show-transition--slide-from-right{
  animation: ShowTransitionSlideFromRight .3s;
}

@keyframes ShowTransitionSlideFromLeft {
  from {
    translate: -48px 0px;
  }

  to {
    translate: 0px 0px;
  }
}

section.show-transition--slide-from-left{
  animation: ShowTransitionSlideFromLeft .3s;
}

@keyframes ShowTransitionSlideFromTop {
  from {
    translate: 0px -48px;
  }

  to {
    translate: 0px 0px;
  }
}

section.show-transition--slide-from-top{
  animation: ShowTransitionSlideFromTop .3s;
}

@keyframes ShowTransitionSlideFromBottom {
  from {
    translate: 0px 48px;
  }

  to {
    translate: 0px 0px;
  }
}

section.show-transition--slide-from-bottom{
  animation: ShowTransitionSlideFromBottom .3s;
}

@keyframes HideTransitionOpacity {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

section.hide-transition--opacity{
  animation: HideTransitionOpacity .3s;
}

@keyframes HideTransitionSlideToBottom {
  from {
    translate: 0px 0px;
  }

  to {
    translate: 0px 48px;
  }
}

section.hide-transition--slide-to-bottom{
  animation: HideTransitionSlideToBottom .3s;
}

@keyframes HideTransitionSlideToTop {
  from {
    translate: 0px 0px;
  }

  to {
    translate: 0px -48px;
  }
}

section.hide-transition--slide-to-top{
  animation: HideTransitionSlideToTop .3s;
}

@keyframes HideTransitionSlideToLeft {
  from {
    translate: 0px 0px;
  }

  to {
    translate: -48px 0px;
  }
}

section.hide-transition--slide-to-left{
  animation: HideTransitionSlideToLeft .3s;
}

@keyframes HideTransitionSlideToRight {
  from {
    translate: 0px 0px;
  }

  to {
    translate: 48px 0px;
  }
}

section.hide-transition--slide-to-right{
  animation: HideTransitionSlideToRight .3s;
}

section.hide-transition--opacity.hide-transition--slide-to-right{
  animation: HideTransitionOpacity .3s, HideTransitionSlideToRight .3s;
}

section.hide-transition--opacity.hide-transition--slide-to-left{
  animation: HideTransitionOpacity .3s, HideTransitionSlideToLeft .3s;
}

section.hide-transition--opacity.hide-transition--slide-to-bottom{
  animation: HideTransitionOpacity .3s, HideTransitionSlideToBottom .3s;
}

section.hide-transition--opacity.hide-transition--slide-to-top{
  animation: HideTransitionOpacity .3s, HideTransitionSlideToTop .3s;
}


section.show-transition--opacity.show-transition--slide-from-right{
  animation: ShowTransitionOpacity .3s, ShowTransitionSlideFromRight .3s;
}

section.show-transition--opacity.show-transition--slide-from-left{
  animation: ShowTransitionOpacity .3s, ShowTransitionSlideFromLeft .3s;
}

section.show-transition--opacity.show-transition--slide-from-bottom{
  animation: ShowTransitionOpacity .3s, ShowTransitionSlideFromBottom .3s;
}

section.show-transition--opacity.show-transition--slide-from-top{
  animation: ShowTransitionOpacity .3s, ShowTransitionSlideFromTop .3s;
}

.rating-summary{
  max-width: 700px;
}
.rating-summary > *{
  width: calc(700px / 5);
}