*, *::before,*::after{ box-sizing: border-box; }
body{ margin:0; overflow:hidden; }

:root {
    /* font-size & spacing */
	--spacing: 40px;
  --basesize: 4vw;
  --blue: blue;
  --pink: rgb(255, 0, 221);
  --gray: rgb(176, 176, 176);
  --red: #ff3149ff;
  --yellow: #fbff00;
  --white: #ffffe3;
}

.pink {background: var(--pink); --bgcolor:var(--pink)}
.gray {background: var(--gray); --bgcolor:var(--gray)}
.yellow {background: var(--yellow); --bgcolor:var(--yellow)}
.red {background: var(--red); --bgcolor:var(--red)}
.blue {background: var(--blue); --bgcolor:var(--blue)}

main {
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column nowrap;
  font-family: 'over';
  display: flex;
  flex: none;
  overflow: auto;
  height: 100vh;
  width: calc(100%);
  
}

h1{
  color: var(--white);
}

.x {
  width: calc(100%);
  height: 100vh;
  flex-flow: row nowrap;
  overflow-y: hidden;
}

/* scroll-snap */
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}

div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
  
}

.x div {
  line-height: 128px;
  font-size: 64px;
  width: 100vw;
  height: 100vh;
}

img, video, iframe { 
  border: none;
  max-width:100%; 
  max-height:100%; 
  margin:0; 
  display:block;
  position: absolute;
  inset: var(--spacing);
  object-fit: contain;
  z-index: 8;
  height: calc(100% - var(--spacing) * 2);
  width: calc(100% - var(--spacing) * 2);
  object-position: right center;
}
video,
iframe{ width: auto; aspect-ratio: 4/3; inset: unset; right: var(--spacing); top: var(--spacing); position: absolute;}
iframe { background: white; }
video { aspect-ratio: 16/9;}

.cover img, .cover video, .cover iframe { width:100%; height:100%; object-fit:cover; inset:0; padding: 20px; }

/* Taille du texte */
small, .smalltext{ font-size: calc(.75 * var(--basesize)); line-height:1.4}
h2, .bigtext{ font-size: calc(1.5 * var(--basesize)); line-height:1.1}
h1, .hugetext{ font-size: calc(2.5 * var(--basesize)); line-height:1}

/* Text color */
.blacktext {color: black;}
.whitetext {color: var(--white);}

/* intégration youtube, vimeo, etc. */
.embedded {	background: white; position: absolute; inset: var(--spacing);}
.embedded iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* background-color on text content (when following img, video or iframe) */
article p:has(img) ~ *,
article p:has(video) ~ *,
article iframe ~ * {
  position: relative;
  z-index: 10;
}
article p:has(img) ~ * span,
article p:has(video) ~ * span,
article:has(iframe) * span {
  background: var(--bgcolor, black);
  border-radius: .5em;
  box-decoration-break: clone;
  padding: .05em .25em;
}
/* trick to put last paragraph at the bottom */
article p:last-of-type:not(p:first-child){
  position: absolute;
  bottom: calc(var(--spacing) * 2);
}



@font-face {
  font-family: "over";
  src: url("OverusedGrotesk-VF.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  }
  
  @font-face {
  font-family: "over";
  src: url("OverusedGrotesk-VF.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  }