@charset "UTF-8";
/*!
Theme Name: Lucie Collin Portfolio
Description: Thème Lucie Collin Portfolio
Version: 1.0
Author: Juliette Fontaine as. Juliet Colombe
*/
:root {
  --violet: #a9c8ff;
  --yellow: #fffb96;
  --green: #38ba98;
  --pink: #f7a8d5;
  --red: #e56556;
  --marginWeb: 80px;
  --marginMob: 15px;
  --marginWebLeftRight: 315px;
  --headerHeight: 105px;
}

body.hidden {
  opacity: 0;
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

body.visible {
  opacity: 1;
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  cursor: url("./assets/img/eclat.png") 16 16, auto !important;
  line-height: 1.5;
  font-family: "Cascadia Code Regular";
  font-weight: bolder;
  font-size: 16px;
}
@media (max-width: 768px) {
  body {
    font-size: 18px;
    overflow-x: hidden !important;
  }
}

a {
  text-decoration: none;
  color: inherit;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}

p:empty {
  display: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
code,
table,
th,
td {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

button {
  background: transparent;
  border: 0;
  padding: 0;
}

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

ol,
li,
ul {
  list-style: none;
}

textarea {
  resize: vertical;
}

img {
  border: 0;
}

.box {
  opacity: 0;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  -webkit-transition: opacity 0.6s ease-out, -webkit-transform 0.6s ease-out;
  transition: opacity 0.6s ease-out, -webkit-transform 0.6s ease-out;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
}

.box.visible {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

h1 {
  font-size: 40px;
  font-family: "Cascadia Code Bold";
  line-height: 1;
}
@media (max-width: 768px) {
  h1 {
    padding-left: var(--marginMob);
  }
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding-bottom: 10px;
  background-color: white;
  -webkit-transition: top 0.5s ease-in-out;
  transition: top 0.5s ease-in-out;
  z-index: 100;
}

.logo-desktop {
  padding-left: 1rem;
  padding-top: 1rem;
  width: 24vw;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
@media (min-width: 2000px) {
  .logo-desktop {
    padding-left: 2.5rem;
    padding-top: 2.5rem;
  }
}
.logo-desktop svg {
  width: 100%;
}
.logo-desktop:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}

.logo-mobile {
  padding: var(--marginMob);
  width: 100vw;
}
.logo-mobile svg {
  width: 100%;
}

.logo-header.mobile.color-on .logo-desktop {
  display: none;
}
.logo-header.mobile.color-on .logo-mobile .color-off {
  display: none;
}
.logo-header.mobile.color-on .logo-mobile .color-on {
  display: block;
}

.logo-header.mobile.color-off .logo-desktop {
  display: none;
}
.logo-header.mobile.color-off .logo-mobile .color-on {
  display: block;
}
.logo-header.mobile.color-off .logo-mobile .color-off {
  display: none;
}

.logo-header.desktop.color-on .logo-mobile {
  display: none;
}
.logo-header.desktop.color-on .logo-desktop .color-off {
  display: none;
}
.logo-header.desktop.color-on .logo-desktop .color-on {
  display: block;
}

.logo-header.desktop.color-off .logo-mobile {
  display: none;
}
.logo-header.desktop.color-off .logo-desktop .color-on {
  display: block;
}
.logo-header.desktop.color-off .logo-desktop .color-off {
  display: none;
}

.go-back-button {
  position: absolute;
  right: 20px;
  z-index: 101;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.go-back-button:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
.go-back-button span {
  text-transform: lowercase;
}
@media (max-width: 768px) {
  .go-back-button {
    top: 70px;
    font-size: 16px;
  }
}
@media (min-width: 768px) {
  .go-back-button {
    top: 33px;
  }
}
.go-back-button span {
  font-family: "Cascadia Code Light";
  font-weight: 200;
  font-style: italic;
}

.go-back-svg {
  position: relative;
  top: 2px;
  right: 13px;
}
.go-back-svg svg {
  width: 15px;
  height: 15px;
}
@media (max-width: 768px) {
  .go-back-svg {
    top: 3px;
  }
}

.body-home #header {
  background-color: transparent !important;
}
.body-home .logo-header {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: inline-block;
}

.page-home_container {
  padding-top: var-(--headerHeight);
  padding-left: var(--marginMob);
  padding-right: var(--marginMob);
  height: 100dvh;
  overflow-y: hidden;
  overflow-x: hidden;
}

@media (max-width: 400px) {
  .grid-container {
    height: calc(100dvh - 6rem);
  }
  .button-illustration.grid-item-right.grid-item {
    bottom: -2rem !important;
  }
  .button-about.grid-item-right.grid-item {
    bottom: 0 !important;
  }
  .page-home_container svg {
    width: 11rem;
  }
  .grid-item.button-sd svg {
    width: 14rem !important;
    position: relative;
    bottom: 2.5rem;
  }
  .grid-item.button-gd {
    position: relative;
    top: 1rem;
  }
  .button-beauty {
    position: relative;
    top: -2rem;
  }
}
@media (max-width: 900px) {
  .grid-container {
    display: -ms-grid;
    display: grid;
    gap: 0px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -ms-grid-columns: 50% 0px 50%;
    grid-template-columns: 50% 50%;
    height: calc(100dvh - 2rem);
    margin-top: 2rem;
  }
  .grid-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .button-illustration.grid-item-right.grid-item {
    display: block;
    position: relative;
    left: -3rem;
    bottom: -6rem;
  }
  .button-illustration.grid-item-right.grid-item svg {
    width: 15rem;
  }
  .button-about.grid-item-right.grid-item {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
    position: relative;
    bottom: -5rem;
  }
}
@media (min-width: 768px) and (max-width: 1000px) {
  .page-home_container {
    padding: 0 3rem;
  }
  .page-home_container .grid-container {
    height: calc(100dvh - 5rem);
    margin-top: 5rem;
    padding-bottom: 1rem;
  }
  .page-home_container svg {
    width: 20rem;
    height: auto;
  }
  .toggle-button-icon {
    width: 5rem;
  }
  .button-illustration.grid-item-right.grid-item svg {
    width: 28rem;
  }
  .button-beauty {
    position: relative;
    top: -2rem;
  }
  .logo-header.mobile.color-off .logo-mobile .color-on svg {
    height: 134px;
    left: -13px;
    position: relative;
  }
}
@media (min-width: 1000px) {
  .page-home_container .grid-container {
    -ms-grid-columns: 1fr 0px 1fr 0px 1fr;
    grid-template-columns: repeat(3, 1fr);
    display: -ms-grid;
    display: grid;
    gap: 3rem 0px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    height: 100vh;
    -ms-flex-line-pack: center;
        align-content: center;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0 2rem;
  }
  .page-home_container .grid-item.button-sd {
    -ms-grid-column-span: 2;
    grid-column: span 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .page-home_container .grid-item.button-sd svg {
    width: 26rem;
  }
  .page-home_container svg {
    width: 18rem;
    height: auto;
  }
  .grid-item.button-beauty {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .button-illustration.grid-item-right.grid-item svg {
    width: 23rem;
  }
  .button-illustration.grid-item-right.grid-item .grid-item:nth-child(5) {
    -ms-grid-column-span: 2;
    grid-column: span 2;
  }
  .toggle-button-icon {
    width: 5rem;
  }
}
@media (min-width: 1270px) {
  .page-home_container .grid-container {
    padding-top: 3rem;
  }
  .page-home_container .grid-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .page-home_container svg {
    width: 15rem;
    height: auto;
  }
  .button-illustration.grid-item-right.grid-item svg {
    width: 18rem;
  }
  .grid-item.button-sd svg {
    width: 18rem !important;
  }
  .toggle-button-icon {
    width: 4.5rem;
  }
}
@media (min-width: 1910px) {
  .logo-desktop {
    padding-left: 3rem;
    padding-top: 3rem;
  }
  .page-home_container svg {
    width: 28rem;
    height: auto;
  }
  .button-illustration.grid-item-right.grid-item svg {
    width: 36rem;
  }
  .grid-item.button-sd svg {
    width: 39rem;
  }
  .toggle-button-icon {
    width: 7rem;
  }
}
#giggler-skake {
  cursor: url("./assets/img/eclat.png") 16 16, auto !important;
  -webkit-transition: -webkit-transform 0.1s ease;
  transition: -webkit-transform 0.1s ease;
  transition: transform 0.1s ease;
  transition: transform 0.1s ease, -webkit-transform 0.1s ease;
}

.shake {
  -webkit-animation: shake 0.5s;
          animation: shake 0.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@-webkit-keyframes shake {
  0% {
    -webkit-transform: translate(1px, 1px) rotate(0deg);
            transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    -webkit-transform: translate(-1px, -2px) rotate(-1deg);
            transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    -webkit-transform: translate(-3px, 0px) rotate(1deg);
            transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    -webkit-transform: translate(3px, 2px) rotate(0deg);
            transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(1px, -1px) rotate(1deg);
            transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    -webkit-transform: translate(-1px, 2px) rotate(-1deg);
            transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    -webkit-transform: translate(-3px, 1px) rotate(0deg);
            transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(3px, 1px) rotate(-1deg);
            transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    -webkit-transform: translate(-1px, -1px) rotate(1deg);
            transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    -webkit-transform: translate(1px, 2px) rotate(0deg);
            transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(1px, -2px) rotate(-1deg);
            transform: translate(1px, -2px) rotate(-1deg);
  }
}

@keyframes shake {
  0% {
    -webkit-transform: translate(1px, 1px) rotate(0deg);
            transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    -webkit-transform: translate(-1px, -2px) rotate(-1deg);
            transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    -webkit-transform: translate(-3px, 0px) rotate(1deg);
            transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    -webkit-transform: translate(3px, 2px) rotate(0deg);
            transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(1px, -1px) rotate(1deg);
            transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    -webkit-transform: translate(-1px, 2px) rotate(-1deg);
            transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    -webkit-transform: translate(-3px, 1px) rotate(0deg);
            transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(3px, 1px) rotate(-1deg);
            transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    -webkit-transform: translate(-1px, -1px) rotate(1deg);
            transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    -webkit-transform: translate(1px, 2px) rotate(0deg);
            transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(1px, -2px) rotate(-1deg);
            transform: translate(1px, -2px) rotate(-1deg);
  }
}
#giggler-beat {
  cursor: url("./assets/img/eclat.png") 16 16, auto !important;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.heartbeat {
  -webkit-animation: heartbeat 1s ease-in-out;
          animation: heartbeat 1s ease-in-out;
}

@-webkit-keyframes heartbeat {
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  75% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

@keyframes heartbeat {
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  75% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
#giggler-rotate {
  cursor: url("./assets/img/eclat.png") 16 16, auto !important;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}

.rotate {
  -webkit-animation: rotate 0.5s ease-out;
          animation: rotate 0.5s ease-out;
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
#giggler-swing {
  cursor: url("./assets/img/eclat.png") 16 16, auto !important;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}

.swing {
  -webkit-animation: swing 0.6s ease-in-out;
          animation: swing 0.6s ease-in-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@-webkit-keyframes swing {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
  50% {
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
  75% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes swing {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
  50% {
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
  75% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
#giggler-move {
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-transform-origin: left;
          transform-origin: left;
  cursor: url("./assets/img/eclat.png") 16 16, auto !important;
}
#giggler-move:hover {
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
}

#toggle-button {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}

.toggle-button-icon {
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
.toggle-button-icon:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.button-gd .color-off {
  fill: var(--red);
}
.button-gd .color-off.background {
  fill: black;
  stroke: var(--red);
}

.button-illustration .color-off {
  fill: var(--pink);
}
.button-illustration .color-off.background {
  fill: black;
  stroke: var(--pink);
}

.button-beauty .color-off {
  fill: var(--violet);
}
.button-beauty .color-off.background {
  fill: black;
  stroke: var(--violet);
}

.button-about .color-off {
  fill: var(--green);
}
.button-about .color-off.background {
  fill: black;
  stroke: var(--green);
}

.button-sd .color-off {
  fill: var(--yellow);
}
.button-sd .color-off.background {
  fill: black;
  stroke: var(--yellow);
}

body.color-off {
  background-color: black;
}

.body-home #go-back-button {
  display: none;
}

@media (max-width: 768px) {
  .page-simple_container {
    padding-top: var(--headerHeight);
  }
}
@media (min-width: 768px) {
  .page-simple_container {
    padding: var(--marginWeb);
    padding-top: calc(var(--headerHeight) + 20px);
  }
}
@media (min-width: 1910px) {
  .page-simple_container {
    padding-top: 12rem;
  }
}
.page-simple_container p {
  padding-left: 15px;
}
.page-simple_gallery-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  padding-top: 15px;
}
@media (max-width: 768px) {
  .page-simple_gallery-container {
    padding: 15px;
  }
}
@media (max-width: 768px) {
  .page-simple_gallery-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.page-simple_column {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 5px;
  width: 50%;
}
@media (max-width: 768px) {
  .page-simple_column {
    width: 100%;
  }
}
.page-simple_column figure {
  margin: 0;
}
.page-simple_column img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  position: relative;
}
.page-simple_column figcaption {
  text-align: start;
  margin-top: 5px;
  font-size: 14px;
  font-family: "Cascadia Code Light";
}

.page-simple_column.first-column {
  gap: 20px;
}

.page-simple_column.second-column {
  gap: 20px;
}

.page-simple_column.third-column {
  gap: 20px;
}

.page-design_container {
  padding-top: calc(var(--headerHeight) + 10px);
}
.page-design_container h1 {
  text-transform: capitalize;
  text-align: center;
  margin-bottom: 15px;
}
@media (min-width: 768px) {
  .page-design_container {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 30px;
  }
}
@media (min-width: 1910px) {
  .page-design_container {
    padding-top: 12rem;
  }
}
.page-design_subtitle {
  font-size: 40px;
  font-family: "Cascadia Code Bold";
  line-height: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-transform: capitalize;
  margin-bottom: 15px;
}
@media (max-width: 768px) {
  .page-design_subtitle {
    padding-left: var(--marginMob);
  }
}
.page-design_posts-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 15px 1fr 15px 1fr;
  grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
  gap: 15px;
  padding-top: 15px;
}
@media (max-width: 768px) {
  .page-design_posts-container {
    padding: 15px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.page-design_post-item {
  position: relative;
  width: 100%;
}
.page-design_image-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
@media (min-width: 1920px) {
  .page-design_image-container {
    height: 600px;
  }
}
.page-design_post-thumbnail {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.page-design_read-more {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: #000000;
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-decoration: none;
  -webkit-transition: scale 0.5s;
  transition: scale 0.5s;
}

.page-design_posts-container:hover .read-more {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}

.page-design_read-more::before {
  content: "+";
  -webkit-transition: content 0.5s;
  transition: content 0.5s;
  font-size: 35px;
}

.page-design_read-more:hover::before {
  content: "GO";
  font-family: "Cascadia Code Bold";
  font-size: 25px !important;
  font-style: italic;
}

h2 {
  text-align: start;
  margin-top: 5px;
  color: #000000;
  font-family: "Cascadia Code Light";
}

.page-simple_container h1 {
  text-transform: capitalize;
  text-align: center;
  margin-bottom: 15px;
}

.page-single_gallery {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow-y: scroll;
  gap: 15px;
}

.page-single_title-fixed {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  z-index: 15;
  padding-top: calc(var(--headerHeight) + 20px);
}
.page-single_title-fixed h1 {
  text-transform: lowercase;
}
.page-single_title-fixed .more-info-button .btn {
  display: inline-block;
  padding-top: 5px;
  text-transform: lowercase;
}

.page-single_gallery-item {
  width: 100%;
}
.page-single_gallery-item img {
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .page-single_container {
    height: 100vh;
    overflow-y: scroll;
  }
  .page-single_title-fixed {
    position: fixed;
    width: 263px;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
    padding-top: calc(var(--headerHeight) + 20px);
  }
}
@media (min-width: 768px) and (min-width: 1920px) {
  .page-single_title-fixed {
    width: 28rem;
    padding-top: calc(var(--headerHeight) + 70px);
  }
}
@media (min-width: 768px) {
  .page-single_title-fixed h1 {
    text-align: end;
  }
  .page-single_gallery {
    height: 100vh;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .page-single_gallery {
    padding-left: 315px;
    padding-right: 315px;
    padding-top: calc(var(--headerHeight) + 20px);
    margin-bottom: 20px;
  }
}
@media (min-width: 768px) and (min-width: 1920px) {
  .page-single_gallery {
    padding-left: 30rem;
    padding-right: 30rem;
    padding-top: calc(var(--headerHeight) + 70px);
    margin-bottom: 20px;
  }
}
@media (min-width: 768px) {
  .previous-post {
    position: absolute;
    left: 15px;
    bottom: 0px;
  }
  .previous-post a {
    text-transform: lowercase;
    font-size: 30px;
  }
  .next-post {
    position: absolute;
    bottom: 0px;
    right: 15px;
  }
  .next-post a {
    text-transform: lowercase;
    font-size: 30px;
  }
}
@media (max-width: 768px) {
  .page-single_gallery {
    padding-top: 0;
    display: -ms-grid;
    display: grid;
    gap: 20px;
  }
  .page-single_title-fixed {
    padding-top: calc(var(--headerHeight) + 20px);
  }
  .page-single_title-fixed h1 {
    padding-right: 15px;
  }
  .more-info-button .btn {
    padding: 0px 15px;
  }
  .page-single_gallery-item {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    width: 100%;
    scroll-snap-align: start;
  }
  .page-single_gallery-item img {
    width: 100%;
    height: auto;
  }
  .more-info-button .page-single_gallery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow-x: scroll;
    gap: 10px;
  }
  .previous-post,
  .next-post {
    position: fixed;
    bottom: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    z-index: 900;
  }
  .previous-post {
    left: 15px;
  }
  .next-post {
    right: 15px;
  }
  .previous-post a,
  .next-post a {
    text-decoration: none;
    color: inherit;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.info-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--yellow);
  z-index: 10000;
  padding-top: calc(var(--headerHeight) + 20px);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  z-index: 1000;
}
@media (min-width: 1920px) {
  .info-popup {
    padding-top: 12rem;
  }
}
.info-popup p {
  text-align: left;
  font-family: "cascadia code Light", sans-serif;
  line-height: 1.5;
  font-weight: 300;
}
@media (min-width: 768px) {
  .info-popup p {
    padding-left: var(--marginWebLeftRight);
    padding-right: var(--marginWebLeftRight);
    font-size: 25px;
    margin-right: 55px;
  }
}
@media (max-width: 768px) {
  .info-popup p {
    padding-top: 30px;
    font-size: 20px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 1920px) {
  .info-popup p {
    padding-left: 30rem;
    padding-right: 30rem;
  }
}

.info-popup.show {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 768px) {
  .popup-content {
    height: calc(100vh - var(--headerHeight));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.popup-content h1 {
  text-transform: lowercase;
}
@media (min-width: 768px) {
  .popup-content h1 {
    text-align: end;
  }
}
@media (max-width: 768px) {
  .popup-content h1 {
    padding-right: 15px;
  }
}
@media (max-width: 768px) {
  .popup-content_left {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}
@media (min-width: 768px) {
  .popup-content_left {
    position: fixed;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    z-index: 15;
    width: 263px;
  }
}
@media (min-width: 1920px) {
  .popup-content_left {
    width: 28rem;
  }
}

#close-popup {
  color: #000;
  cursor: pointer;
  display: inline-block;
  padding-top: 5px;
  text-transform: lowercase;
}
@media (max-width: 768px) {
  #close-popup {
    padding-left: 15px;
  }
}

.body-about {
  background-color: var(--green);
}
.body-about h1 {
  text-transform: capitalize;
}
.body-about #header {
  background-color: var(--green);
}

@media (min-width: 768px) {
  .page-about_container {
    padding-top: calc(var(--headerHeight) + 70px);
    padding-left: 122px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 50px;
  }
}

.page-about_left h1 {
  text-align: end;
}
@media (max-width: 768px) {
  .page-about_left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-top: calc(var(--headerHeight) + 20px);
  }
  .page-about_left h1 {
    position: absolute;
    left: 0px;
    top: var(--headerHeight);
  }
}
@media (min-width: 768px) {
  .page-about_left img {
    padding-top: 3rem;
  }
}
@media (max-width: 768px) {
  .page-about_left img {
    padding-bottom: 1rem;
    position: relative;
    right: -19px;
  }
}

.page-about_right p {
  font-family: "cascadia code Light", sans-serif;
  font-weight: 300;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .page-about_right p {
    padding: 0 15px;
    font-size: 20px;
  }
}
@media (min-width: 768px) {
  .page-about_right p {
    padding-right: 200px;
    margin-right: 55px;
    font-size: 25px;
  }
}

@font-face {
  font-family: "Cascadia Code Bold";
  src: url("./assets/fonts/CascadiaCode-Bold.woff") format("woff2"), url("./assets/fonts/CascadiaCode-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cascadia Code Bold Italic";
  src: url("./assets/fonts/CascadiaCodeItalic-BoldItalic.woff2") format("woff2"), url("./assets/fonts/CascadiaCodeItalic-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cascadia Code Light";
  src: url("./assets/fonts/CascadiaCode-Light.woff2") format("woff2"), url("./assets/fonts/CascadiaCode-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cascadia Code Light Italic";
  src: url("./assets/fonts/CascadiaCodePLItalic-LightItalic.woff2") format("woff2"), url("./assets/fonts/CascadiaCodePLItalic-LightItalic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cascadia Code Regular";
  src: url("./assets/fonts/CascadiaCodePL-Regular.woff2") format("woff2"), url("./assets/fonts/CascadiaCodePL-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cascadia Code Regular Italic";
  src: url("./assets/fonts/CascadiaCodeItalic-Italic.woff2") format("woff2"), url("./assets/fonts/CascadiaCodeItalic-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}