@font-face {
  font-family: 'Baskerville';
  src: url('fonts/BASKVILL.woff2') format('woff2'),
    url('fonts/BASKVILL.TTF') format('truetype');
  font-style: normal;
  font-display: swap;
}

/* Inter Regular */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Regular.woff2') format('woff2'),
    url('fonts/Inter-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Inter Medium */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Medium.woff2') format('woff2'),
    url('fonts/Inter-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Inter Bold */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Bold.woff2') format('woff2'),
    url('fonts/Inter-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --defaultHeight: 1080;
  --percent: var(--defaultHeight) * 100;
  --mult: var(--vh) / var(--percent);
}

@property --c1 {
  syntax: '<color>';
  initial-value: #e9cecc;
  inherits: false;
}

@property --c2 {
  syntax: '<color>';
  initial-value: #f5dedc;
  inherits: false;
}

* {
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  overflow: hidden;
  color: white;
  background: var(--c1);
  background-image: linear-gradient(180deg, var(--c1) 0%, var(--c2) 50%);
  transition: --c1 0.4s ease, --c2 0.4s ease;
  user-select: none;
}

body.bg1 {
  --c1: #e9cecc;
  --c2: #f5dedc;
}

body.bg2 {
  --c1: #eccbcc;
  --c2: #f6d5d6;
}

body.bg3 {
  --c1: #eac0c2;
  --c2: #f2c9cb;
}

/* result */
.result body {
  background-image: linear-gradient(90deg, var(--c1) 27%, var(--c2) 73%);
}

.result body.bg1 {
  --c1: #FFFFFF;
  --c2: #FFF6F8;
}

.result body.bg2 {
  --c1: #FFF6F8;
  --c2: #FFEDF1;
}

.result body.bg3 {
  --c1: #FFEDF1;
  --c2: #F6D7D6;
}


.cta {
  text-transform: uppercase;
}

.title {
  font-family: 'Baskerville', sans-serif;
  font-size: calc(48 * var(--mult));
  font-weight: normal;
}
/*
#home .title {
  text-shadow: 0px 0px 9px rgba(0, 0, 0, 0.2);
}

#home .text {
  text-shadow: 0px 0px 18px rgba(0, 0, 0, 0.44);
}
*/

.quiz .title {
  font-size: calc(56 * var(--mult));
}

#result .title {
  font-size: calc(64 * var(--mult));
}

#result .title span {
  display: block;
  font-family: "Inter";
  font-size: calc(25 * var(--mult));
  letter-spacing: calc(2 * var(--mult));
}

.subtitle {
  /* font-family: 'Baskerville', sans-serif; */
  font-size: calc(22 * var(--mult));
}

.text {
  font-size: calc(22 * var(--mult));
  text-align: center;
}

.medium {
  font-weight: 500;
}

.bold {
  font-weight: 700;
}

h1 {
  text-align: center;
  font-weight: 500;
}

section {
  display: none;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.activate {
  display: flex;
}

hr {
  color: #8C8B8B;
  width: 21%;
  margin-top: 2.5em;
  margin-bottom: 0;
}

#home {
  background-image: url("images/home.webp");
  background-position: 40% center;
  background-repeat: no-repeat;
  background-size: cover;
  align-items: flex-start;
}

.container-v {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 44%;
  max-width: 100%;
  padding: calc(75 * var(--mult)) 1rem calc(140 * var(--mult));
  box-sizing: border-box;
}

#q1 .container-v {
  width: 33%;
}

#q2 .container-v {
  width: 35%;
}

#q3 .container-v {
  width: 100%;
}

#q3 .enonce {
  width: 55%;
}

button {
  font-weight: 700;
  font-size: calc(26.6 * var(--mult));
  color: #EAC0C2;
  border: 0;
  background-color: white;
  width: fit-content;
  padding: calc(26.6 * var(--mult)) calc(35 * var(--mult));
  cursor: pointer;
}

#home button {
  font-weight: 500;
}

#result {
  color: black;
}

#result button {
  letter-spacing: 6px;
  padding: calc(26.6 * var(--mult)) calc(65 * var(--mult));
  font-size: calc(26.6 * 0.8 * var(--mult));
  border: 1px solid black;
  background-color: transparent;
  color: black;
}


button:hover {
  background-color: #EAC0C2;
  color: white;
}

.continue {
  position: absolute;
  font-family: "Inter";
  /* font-weight: 700; */
  bottom: max(min(3%, 48px), 12px);
  letter-spacing: 2px;
  cursor: pointer;
  padding: 1rem 2rem;
}

.see {
  color: #B58788;
  font-family: "Baskerville";
  /* font-weight: 700; */
  letter-spacing: 2px;
  cursor: pointer;
  padding: 1rem 2rem;
}

#see-notes {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}

.hidable {
  transition: opacity 0.4s ease;
}

.hide {
  opacity: 0;
}


/* Q1 */

.container-alt {
  width: 100%;
  position: relative;
  /* overflow: hidden; */
}

.circle {
  width: 120vw;
  aspect-ratio: 1;
  border: 2px solid white;
  height: 120vw;
  border-radius: 50%;
  position: relative;
  /* transform: rotate(-30deg); */
  transition: transform 0.6s ease-in-out;
  touch-action: pan-y;
  /* autorise swipe horizontal */
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  /* transition: border-color 0.4s ease; */
}

.bg2 .circle {
  border-color: #C59A9B;
}

.bg2 #q1 .curve-text text {
  fill: #C59A9B;
}

.bg2 .arrow g {
  stroke: #C59A9B;
}

.bg2 .point:before {
  background-color: #C59A9B;
}

.bg3 .circle {
  border-color: #B58788;
}

.bg3 #q1 .curve-text text {
  fill: #B58788;
}

.bg3 .arrow g {
  stroke: #B58788;
}

.bg3 .point:before {
  background-color: #B58788;
}


.circle:active {
  cursor: grabbing;
}

.circle svg {
  pointer-events: none;
}

.half {
  height: 50%;
}

#q1 .container-v {
  height: 55%;
}

#q1 .container-alt {
  height: 45%;
}

#q1 .container-alt {
  display: flex;
  justify-content: center;
}

.hotspot-container {
  --angle: 0deg;
  width: 100%;
  height: 100%;
  transform: rotate(var(--angle));
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.hotspot {
  cursor: pointer;
  position: absolute;
}

.point:before {
  content: '';
  display: block;
  width: 17px;
  height: 17px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  transition: background-color 0.4s ease, opacity 0.4s ease;
}

.left .mask,
.right .mask {
  transform: translate(-50%, -100%);
}

.selected .hotspot {
  width: 100px;
  height: 100px;
  background: none;
  background-repeat: no-repeat;
  background-size: contain;
}

.selected .hotspot.masked {
  transform: translateY(100%);
}


.selected .hotspot.alpha {
  opacity: 0;
}

.selected.anim .hotspot.masked {
  transition: transform 1s;
}

.selected.anim .hotspot.alpha {
  transition: opacity 1s;
}


.mask {
  width: 100px;
  height: 100px;
  cursor: pointer !important;
  overflow: hidden;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  position: absolute;
  pointer-events: auto;
}

.point {
  width: 100px;
  height: 100px;
  cursor: pointer !important;
  overflow: hidden;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  position: absolute;
  pointer-events: none;
}

/* .left.selected .mask, .right.selected .mask {
  transform: translate(-50%, -100%);
} */

.top.selected .mask {
  height: 50px;
  transform: translate(-50%, -100%)
}

.top.selected .point:before {
  opacity: 0;
}

.top.selected .hotspot {
  background-image: url(images/SOLEIL-cut.webp);
  transform: translateY(50%);
}


.selected.play .hotspot {
  transform: translateY(0);
  opacity: 1;
  /* clip-path: inset(0 0 0 0); */
}



.right.selected .hotspot {
  background-image: url(images/SOLEIL.webp);
}

.left.selected .hotspot {
  background-image: url(images/moon.webp);
}

.arrow {
  position: absolute;
  left: 30%;
  top: 0;
  transform-origin: center left;
  transform: translateY(-60%) scale(var(--scale));
  stroke: white;
  fill: white;
  transition: stroke 0.4s ease;
  cursor: pointer;
}

.curve-text {
  position: absolute;
}

.curve-text text {
  font-family: Inter, sans-serif;
  /* font-weight: 700; */
  font-size: 1px;
  letter-spacing: 0px;
  dominant-baseline: middle;
  text-anchor: middle;
  fill: white;
  pointer-events: auto;
  cursor: pointer;
  transition: fill 0.4s ease;
}

.galaxies .curve-text text {
  fill: #C59A9B;
  font-size: 4.6px;
  dominant-baseline: unset;
}

.galaxies .top .curve-text text {
  fill: white;
  font-size: 4.2px;
}

.galaxies .right .curve-text text {
  fill: #B58788;
  font-size: 5px;
}

#q2 .container-alt {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: baseline;
  height: 40%;
  min-height: 230px;
}

#q2 {
  justify-content: start;
}

#q2 .container-v {
  height: 25%;
}

.zones {
  position: absolute;
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  justify-content: space-evenly;
  align-items: baseline;
}

.propalzone {
  width: 28%;
  max-width: 375px;
  height: 100%;
  cursor: pointer;
}

.choosed .propal:not(.selected) {
  opacity: 0.29;
}

.propal {
  width: 28%;
  max-width: 375px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3%;
  align-items: center;
  height: 100%;
  cursor: pointer;
}

.propal div {
  width: 100%;
}

.propal .icon {
  border-bottom: 3px solid #f9e2de;
  height: 50%;
  max-height: 100px;
  position: relative;
  overflow: hidden;
}

.propal .icon:after {
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
  width: 100%;
  display: block;
  --astreEnd: 0;
  --astreStart: 120%;
  transform: translateY(var(--astreStart));
  animation: astreAppear 4s ease forwards;
  position: absolute;
  top: 0;
  left: 0;
}

.p1.propal .icon:after {
  height: 50%;
  top: unset;
  bottom: 0;
}

.propal .text {
  letter-spacing: 0.5px;
  text-shadow: none;
}

.p1 .icon:after {
  background-image: url(images/SOLEIL-cut2.webp);
  background-position: center bottom;
  animation-duration: 3s;
}

.p2 .icon::after {
  background-image: url(images/SOLEIL.webp);
  animation-delay: 0.3s;
}

.p3 .icon:after {
  background-image: url(images/moon.webp);
  animation-delay: 0.7s;
}

#q3 .container-v {
  padding-top: 0;
}

.enonce {
  text-align: center;
}

.galaxies {
  position: relative;
  width: calc(1050 * var(--mult));
  max-width: 100%;
  height: calc(660 * var(--mult));
  margin: calc(46 * var(--mult)) 0 0
}

.galaxies .curve-text {
  overflow: visible;
}

.galaxy {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: calc(600 * var(--mult));
  height: calc(600 * var(--mult));
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  animation: turnRight 30s linear infinite;

}

.galaxy.top {
  top: 0;
  width: calc(725 * var(--mult));
  height: calc(725 * var(--mult));
  left: calc(50% - 362 * var(--mult));
  background-image: url(images/circle-top.webp);
  animation: turnLeft 30s linear infinite;
  animation-delay: -12s;
}

.galaxy.left {
  top: 1%;
  width: calc(700 * var(--mult));
  height: calc(700 * var(--mult));
  left: 0;
  background-image: url(images/circle-left.webp);
  animation-delay: -5.5s;
  /*tocheck deg*/
}

.galaxy.right {
  bottom: 0;
  right: 0;
  background-image: url(images/circle-right.webp);
}

.galaxy.paused {
  animation-play-state: paused;
}

.selected .galaxy.paused, .galaxies:hover .galaxy:not(:hover) {
  opacity: 0.29;
}

.galaxies:hover .galaxy:not(:hover) {
  animation-play-state: paused;
}
.galaxies:hover .galaxy:hover {
  animation-play-state: running;
  opacity: 1;
}


.galaxy {
  pointer-events: none;
}

#q3 .galaxy .icon,
#q3 .galaxy .curve-text text {
  pointer-events: auto;
  cursor: pointer;
}

#q3 .galaxy .icon:hover,
#q3 .galaxy .curve-text text:hover {
  pointer-events: auto;
  animation-play-state: paused;
  /* filter: drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.1)); */
}

.galaxy .icon {
  width: calc(100 * var(--mult) * 1.37);
  height: calc(100 * var(--mult) * 1.37);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
}


.top.galaxy .icon {
  background-image: url(images/SOLEIL-cut.webp);
  transform:
    translate(-50%, -50%) rotate(300deg) translateY(calc(-330 * var(--mult)));
}

.right.galaxy .icon {
  background-image: url(images/moon.webp);
  transform:
    translate(-50%, -50%) rotate(330deg) translateY(calc(265 * var(--mult)));
}

.left.galaxy .icon {
  background-image: url(images/SOLEIL.webp);
  transform:
    translate(-50%, -50%) rotate(20deg) translateY(calc(-275 * var(--mult)));
  /*tocheck deg*/
}

@keyframes turnRight {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes turnLeft {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(-360deg);
  }
}

.container-h {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.result-img {
  height: 72%;
  object-fit: contain;
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.container-img {
  width: 94%;
  /* width: 100%; */
  height: 100%;
  display: flex;
  justify-content: right;
  align-items: center;
}

.container-h .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.category {
  text-align: center;
  font-weight: 500;
  font-size: calc(23.5 * var(--mult));
  letter-spacing: calc(1.5 * var(--mult));
}

.mt-0 {
  margin-top: 0;
}

.category h2 {
  margin-bottom: 0;
  margin-top: 0;
}

.category .cat-details {
  margin-bottom: 0;
  margin-top: 0;
  font-size: calc(19 * var(--mult));
}

.categories {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin: 2.5em 0 2.5em;
}

#result .container-h {
  width: 100%;
  justify-content: space-evenly;
}

#result .container {
  width: 30%;
}

#result .text {
  width: 100%;
  text-shadow: none;
  font-size: calc(26 * var(--mult));
  margin-bottom: 0;
  color: #8C8B8B;
  font-family: "Baskerville";
}

#result .text span {
  color: black;
}

.cat-details {
  color: #8C8B8B;
}

.line-wrapper {
  /* on agrandit un peu ce qui apparait car certains mots dépassent la taille initiale prévue par le design */
  -webkit-clip-path: polygon(-2% 0, 104% 0, 104% 100%, -2% 100%);
  clip-path: polygon(-2% 0, 104% 0, 104% 100%, -2% 100%);
  overflow: hidden;
}

.line-animated {
  transform: translateY(110%);
  animation: emerge 0.35s ease-in forwards;
}

@keyframes emerge {
  0% {
    transform: translateY(110%);
  }

  100% {
    transform: translateY(0%);
  }
}

@keyframes astreAppear {
  0% {
    transform: translateY(var(--astreStart))
  }

  100% {
    transform: translateY(var(--astreEnd));
  }
}

.anim-a1 {
  animation: opacity 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.1s;
  animation-fill-mode: both;
}

.anim-a2 {
  animation: opacity 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.15s;
  animation-fill-mode: both;
}

.anim-a3 {
  animation: opacity 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.2s;
  animation-fill-mode: both;
}

.anim-a4 {
  animation: opacity 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.25s;
  animation-fill-mode: both;
}

.anim-a5 {
  animation: opacity 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.3s;
  animation-fill-mode: both;
}

.anim-a6 {
  animation: opacity 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.35s;
  animation-fill-mode: both;
}

.anim-a7 {
  animation: opacity 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.4s;
  animation-fill-mode: both;
}

.anim-a8 {
  animation: opacity 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.65s;
  animation-fill-mode: both;
}

/* ANIMATION */
@keyframes opacity {
  0% {
    opacity: 0;
    visibility: hidden;
  }

  to {
    opacity: 1;
    visibility: visible;
  }
}

.continue {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.show {
  opacity: 1;
}

@media screen and (orientation: landscape) {
  .portrait {
    display: none;
  }

  #home .container-v {
    min-height: 39%;
    height: auto;
    padding: 0 6% 1%;
  }

  #home .title {
    margin-top: 0;
    margin-bottom: 0;
  }

  #home .text-group {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  #home .text {
    padding: 0 2em;
    margin: auto 0;
  }
  .galaxies {
    transform-origin: center top;
    transform: scale(0.95);
  }
}

@media screen and (orientation: landscape) and (max-aspect-ratio:1700/745) {
  #q3 .enonce {
    width: 66%;
  }
}

@media screen and (orientation: landscape) and (max-aspect-ratio:1400/745) {
  #q3 .enonce {
    width: 90%;
  }
}

@media screen and (orientation: landscape) and (max-aspect-ratio:1050/745) {
  #q3 .enonce {
    width: 95%;
  }
  .galaxies {
    transform-origin: center top;
    transform: scale(0.85);
  }
}




@media screen and (orientation: portrait) {
  .landscape {
    display: none;
  }

  hr {
    width: 30%;
  }

  h2.category {
    margin-bottom: 0.5em;
  }

  #home {
    background-position: 26% top;
  }

  .container-v,
  .enonce {
    width: 100% !important;
  }

  .arrow {
    left: 8%;
    top: -2%;
  }

  .circle {
    width: 160vw;
    height: 160vw;
    /* transform: translateX(-25%); */
  }

  .curve-text text {
    font-size: 2px;
  }

  #result .container-h {
    flex-direction: column;
  }

  #result .container {
    /* gap: 3.58%; */
  }

  #result .container-img {
    height: 18%;
    justify-content: center;
  }

  .result-img {
    height: 46.6vh;
    transform: translateX(4.25%);
    margin-right: 1vh;
  }

  #result .text {
    width: 100%;
    padding: 0 3em;
    font-size: calc(22 * var(--mult));
  }

  .category, #result .title span, .category .cat-details {
    font-size: calc(18 * var(--mult));
  }


  #result .container {
    min-height: 100%;
    width: 100%;
    justify-content: flex-start;
    overflow-y: visible;
  }

  .result body,
  html.result {
    overflow-y: auto;
    min-height: 100vh;
    height: auto;
  }

  html.result section {
    min-height: 100vh;
    height: auto;
  }

  #result button {
    padding-left: calc(60 * var(--mult));
    padding-right: calc(60 * var(--mult));
    font-size: calc(26.6 * 0.6 * var(--mult));
  }

  .quiz .title {
    font-size: calc(46 * var(--mult));
  }

  #home {
    background-image: url("images/home_portrait.webp");
    /* background-position: right top; */
    justify-content: flex-start;
  }

  #home .container-v {
    padding-top: calc(0 * var(--mult));
    height: calc(38% + 0 * var(--mult) + 140 * var(--mult));
  }

  #result .text,
  #result button {
    margin-top: 3.58vh;
    box-sizing: border-box;
  }

  #result button {
    margin-bottom: 3.58vh;
  }

  #result div.category {
    margin-top: 1.58vh;
  }

  #result .title {
    padding-left: 0.8em;
    padding-right: 0.8em;
    margin-top: 4.8vh;
    margin-bottom: 4.8vh;
    font-size: calc(38 * var(--mult));
  }

  .left {
    --angle: -90deg;
  }

  .right {
    --angle: 90deg;
  }

  .propal .text {
    font-size: calc(16 * var(--mult));
  }

  .galaxies {
    height: 60vw;
    margin: auto;
  }

  .galaxies .curve-text text {
    font-size: 6px;
  }

  .galaxies .top .curve-text text {
    font-size: 5.5px;
  }

  .galaxies .right .curve-text text {
    font-size: 6.5px;
  }

  .galaxy.top {
    top: 0;
    width: 65vw;
    height: 65vw;
    left: calc(17.5vw - 1rem);
    animation-delay: -9.5s;
  }

  .galaxy.left {
    top: 2vw;
    width: 58vw;
    height: 58vw;
    left: calc(1vw - 1rem);
    animation-delay: -6s;
  }

  .galaxy.right {
    top: 16vw;
    right: 1vw;
    width: 51.5vw;
    height: 51.5vw;
    animation-delay: -2s;
  }

  .galaxy .icon {
    width: 75px;
    height: 75px;
  }

  .top.galaxy .icon {
    transform: translate(-50%, -50%) rotate(280deg) translateY(calc(-29.5vw));
  }

  .left.galaxy .icon {
    transform: translate(-50%, -50%) rotate(90deg) translateY(calc(-22vw));
  }

  .right.galaxy .icon {
    transform: translate(-50%, -50%) rotate(130deg) translateY(calc(-23vw));
  }

  #result .title {
    order: 1;
  }

  #result .result-img {
    order: 2;
  }

  #result .cta {
    order: 8;
    animation-delay: 0.2s;
  }

  #result .text {
    order: 4;
  }

  #result hr {
    order: 5;
  }

  #result .see {
    order: 8;
  }

  #result .categories {
    order: 7;
  }


}

@media screen and (orientation: portrait) and (min-aspect-ratio: 375/667) {
  .propal .text {
    font-size: calc(20 * var(--mult));
  }

  .bg1 #result .title,
  .bg3 #result .title {
    width: 60%;
  }

  .galaxies {
    transform-origin: center top;
    transform: scale(0.9);
  }

  #q3 .enonce {
    width: 96% !important;
  }

}

@media screen and (orientation: portrait) and (min-aspect-ratio: 1024/1366) {
   #q3 .enonce {
    width: 80% !important;
  }
}
@media screen and (orientation: portrait) and (min-aspect-ratio: 412/915) {
   #q3 .enonce {
    width: 93% !important;
  }
}
@media screen and (orientation: portrait) and (min-aspect-ratio: 360/740) {
   #q3 .enonce {
    width: 85% !important;
  }
}

@media screen and (orientation: portrait) and (max-aspect-ratio: 375/667) {
  #home .title {
    font-size: calc(46 * var(--mult));
  }
  #home .text {
    font-size: calc(21.5 * var(--mult));
  }
  #home button {
    padding: calc(24 * var(--mult)) calc(35 * var(--mult))
  }

}