/* file import */
/* COLOR THEME */ /* $radius is the parameter of the function */
:root {
  --setAngle:0deg;
  --fallAngle:0deg;
}

* { /* Consider borders inside boxes > margin is outside, padding is inside */
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

body::before {
  position: absolute;
  content: "";
  background: no-repeat center/100% url("../img/book.jpg");
  margin-top: 2vh;
  width: 290px;
  height: 145px;
  border: 0.2rem solid #002b36;
  -webkit-border-radius: 0.3rem;
  -moz-border-radius: 0.3rem;
  border-radius: 0.3rem;
  font-size: 110%;
  color: #6c71c4;
  text-align: center;
  line-height: calc(250px - 2rem);
}

body {
  -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
  -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
  -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
  background-color: #93a1a1;
  height: 100vh;
  height: 100svh;
  margin: 0 auto;
  padding: 0.25rem;
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  font-size: clamp(0.75rem, 2vw, 1.35rem);
  color: #073642;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.wrapper {
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  border-radius: 0.25rem;
  /* using the mixins function */
  width: clamp(300px, 50%, 500px);
  background-color: #fdf6e3;
  margin: 0.25rem;
  position: relative;
  transform-origin: calc(100% - 1rem) 1rem;
  -webkit-transform-origin: calc(100% - 1rem) 1rem;
  -o-transform-origin: calc(100% - 1rem) 1rem;
  -moz-transform-origin: calc(100% - 1rem) 1rem;
  rotate: var(--setAngle);
}

.wrapper.punchAhole {
  mask: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 2" width="100%"><path d="M.605.297S.605.396.737.429.869.33.869.297.836.165.737.165.6199.229.6129.2967L.605.297ZM0 0H.9988V2H0Z"></path></svg>') top right/100% no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 2" width="100%"><path d="M.605.297S.605.396.737.429.869.33.869.297.836.165.737.165.6199.229.6129.2967L.605.297ZM0 0H.9988V2H0Z"></path></svg>') top right/100% no-repeat;
}

.wrapper.pendule {
  -webkit-animation: pendule 0.85s both ease-in;
  animation: pendule 0.85s both ease-in;
}

.wrapper.penduleAdjust {
  rotate: var(--fallAngle);
  transition: rotate 0.5s cubic-bezier(0.66, 0.59, 0.35, 1.36);
  -webkit-transition: rotate 0.5s cubic-bezier(0.66, 0.59, 0.35, 1.36);
  -moz-transition: rotate 0.5s cubic-bezier(0.66, 0.59, 0.35, 1.36);
  -o-transition: rotate 0.5s cubic-bezier(0.66, 0.59, 0.35, 1.36);
}

/*
@keyframes pendule {
	0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	20% { -webkit-transform: rotate(calc(.6*var(--fallAngle))); transform: rotate(calc(.6*var(--fallAngle)));
	 -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
	40% { -webkit-transform: rotate(var(--fallAngle)); transform: rotate(var(--fallAngle)); }
	60% { -webkit-transform: rotate(calc(.9*var(--fallAngle))); transform: rotate(calc(.9*var(--fallAngle))); }
	100% { -webkit-transform: rotate(var(--fallAngle)); transform: rotate(var(--fallAngle)); }
}
*/
@keyframes pendule {
  0% {
    rotate: 0;
  }
  20% {
    rotate: calc(0.6 * var(--fallAngle));
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    rotate: var(--fallAngle);
  }
  60% {
    rotate: calc(0.9 * var(--fallAngle));
  }
  100% {
    rotate: var(--fallAngle);
  }
}
.border {
  margin: calc(3.25 * (clamp(0.2rem, 0.4vw, 0.3rem) + 0.05rem) - (clamp(0.2rem, 0.4vw, 0.3rem) + 0.05rem));
  border: clamp(0.2rem, 0.4vw, 0.3rem) solid #073642;
  padding: 1.25rem;
}

circle, ellipse {
  cx: calc(3.25 * (clamp(0.2rem, 0.4vw, 0.3rem) + 0.05rem) + 1px);
  cy: calc(3.25 * (clamp(0.2rem, 0.4vw, 0.3rem) + 0.05rem) + 1px);
}

#mask {
  fill: #fdf6e3;
  r: calc(3.25 * (clamp(0.2rem, 0.4vw, 0.3rem) + 0.05rem));
}

#head {
  fill: #073642;
  r: calc(clamp(0.2rem, 0.4vw, 0.3rem) + 0.05rem);
}

#slit {
  fill: #fdf6e3;
  rx: 0.065rem;
  ry: calc(2 * (clamp(0.2rem, 0.4vw, 0.3rem) + 0.05rem));
}

.screw {
  position: absolute;
  width: calc(2 * 3.25 * (clamp(0.2rem, 0.4vw, 0.3rem) + 0.05rem) + 2px);
  height: calc(2 * 3.25 * (clamp(0.2rem, 0.4vw, 0.3rem) + 0.05rem) + 2px);
}

.topLeft {
  rotate: 40deg;
  top: 0;
  left: 0;
}

.topRight {
  rotate: 70deg;
  top: 0;
  right: 0;
}

.bottomRight {
  rotate: 30deg;
  bottom: 0;
  right: 0;
}

.bottomLeft {
  rotate: 95deg;
  bottom: 0;
  left: 0;
}

#TL.rot, #TR.rot, #BL.rot, #BR.rot {
  rotate: -1000deg;
  scale: 1.5;
  transition: all 1s linear;
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -o-transition: all 1s linear;
}

.title-container {
  margin-top: -0.1em;
  margin-bottom: 0.2em;
  font-size: 200%;
  display: flex;
  justify-content: space-between;
}

.blackboard {
  display: flex;
  flex-flow: column;
  gap: 0.4em;
  position: relative;
}

.container {
  display: flex;
  align-items: center;
  align-content: space-between;
  justify-content: space-between;
  gap: 0.9em;
}

img {
  padding: 0.15rem;
  aspect-ratio: 1/1;
  order: -1;
  -webkit-filter: invert(41%) sepia(95%) saturate(562%) hue-rotate(31deg) brightness(105%) contrast(102%);
  filter: invert(41%) sepia(95%) saturate(562%) hue-rotate(31deg) brightness(105%) contrast(102%);
}

.tool:hover {
  -webkit-filter: invert(31%) sepia(69%) saturate(1667%) hue-rotate(354deg) brightness(92%) contrast(91%);
  filter: invert(31%) sepia(69%) saturate(1667%) hue-rotate(354deg) brightness(92%) contrast(91%);
  cursor: pointer;
}

.clicked {
  -webkit-filter: invert(31%) sepia(69%) saturate(1667%) hue-rotate(354deg) brightness(92%) contrast(91%);
  filter: invert(31%) sepia(69%) saturate(1667%) hue-rotate(354deg) brightness(92%) contrast(91%);
}

#marteau {
  scale: -1 1;
}

#marteau.clicked {
  animation: bam 1.5s;
}

@keyframes bam {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(-15deg);
  }
  20% {
    transform: rotate(50deg);
  }
}
#cle.clicked {
  animation: cliquet 0.5s linear;
  transform-origin: 83% 17%;
  -webkit-transform-origin: 83% 17%;
  -moz-transform-origin: 83% 17%;
  -o-transform-origin: 83% 17%;
}

@keyframes cliquet {
  0% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(90deg);
  }
}
#turnevis {
  rotate: 0deg;
}

#turnevis.clicked {
  transition: rotate 0.3s ease-in-out;
  -webkit-transition: rotate 0.3s ease-in-out;
  -moz-transition: rotate 0.3s ease-in-out;
  -o-transition: rotate 0.3s ease-in-out;
}

#scie {
  rotate: 0deg;
  transition: rotate 0.5s ease-out;
  -webkit-transition: rotate 0.5s ease-out;
  -moz-transition: rotate 0.5s ease-out;
  -o-transition: rotate 0.5s ease-out;
}

#scie.clicked {
  rotate: 60deg;
  animation: krrr 0.5s linear 0.5s 5;
}

@keyframes krrr {
  0% {
    translate: 0px;
  }
  33% {
    translate: 5px;
  }
  66% {
    translate: -5px;
  }
}
.subtitle {
  font-size: 130%;
  white-space: nowrap;
  margin-left: auto;
  text-align: right;
}

.coord {
  line-height: 1.5;
  margin-left: auto;
  text-align: right;
  font-style: normal;
}

.text {
  height: 0px;
  padding-inline: 1rem;
  overflow: hidden;
}

.expanding {
  height: auto;
}

/* styling links */
a:link, a:visited {
  color: #859900;
  text-decoration: none;
}

a:hover {
  color: #cb4b16;
  cursor: pointer;
}

a:active {
  color: #cb4b16;
}

/*# sourceMappingURL=styles.css.map */