@charset "UTF-8";

@font-face {
	font-family: a-sans-regular;
	src: url(../fonts/ABCArizonaSans-Regular-Trial.otf);
}	

@font-face {
	font-family: a-sans-italic;
	src: url(../fonts/ABCArizonaSans-RegularItalic-Trial.otf);
}

@font-face {
	font-family: a-serif-regular;
	src: url(../fonts/ABCArizonaSerif-Regular-Trial.otf);
}

@font-face {
	font-family: a-serif-italic;
	src: url(../fonts/ABCArizonaSerif-RegularItalic-Trial.otf);
}

@font-face {
	font-family: grow;
	src: url(../fonts/ABCGrow-ABCDEF-Trial.otf);
}
/* _____________________ Images _____________________ */

body {
	background-color: rgb(235, 235, 235);
	margin: 20px;
}

#container {
	z-index: -2;
	position: fixed;
	width:100vw;
	height:100vh;
	margin: -20px;
	display: flex;
	justify-content: center;
	align-items: center;
	mix-blend-mode: multiply;
	opacity: 75%;
}

#moon {
	object-fit: contain;
	max-width: 100vw;
	max-height: 100vh;
	animation: rotate 360s linear infinite;
}
@keyframes rotate {
	0% {
	  transform: rotate(0deg);
	}

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

/* _____________________ Sections _____________________ */

.headings {
	text-align: center;
	color: rgb(255, 255, 255);
	
	width: calc(100vw - 40px);
    margin: 0px;
}

.newspaper {
	column-count: 4;
	column-gap: 2rem;
	column-rule-style: solid;

	text-align: justify;
	text-justify: inter-word;

	width: calc(100vw - 40px);
    margin: 0px;

	hyphens: auto;

	/* mix-blend-mode:darken; */
	/* mix-blend-mode:lighten; */
	/* mix-blend-mode:luminosity; */
	/* mix-blend-mode:normal; */
	/* mix-blend-mode:multiply; */
}
.newspaper img {
	display: block;
	max-width: 100%;
	break-inside: avoid;

	margin-top: 1vw;
	mix-blend-mode: difference;
}

.newspaper img:hover {
	cursor: pointer;
}

/* -> cmd maj 7 pour mettre en commentaire, cmd d pour sélectionner tout les mots du même */

/* _____________________ gros titre, La Nouvelliste _____________________ */

.main-title-01 {
	font-size: 12vw;
	/* text-transform: uppercase; */
	font-family: 'grow';

	text-decoration: underline;
	text-decoration-thickness: auto;
	text-underline-position: auto;
	
	color: rgb(255, 255, 0);

	margin-bottom: 4.5vw;
	mix-blend-mode: exclusion;
}

/* _____________________ citations _____________________ */

.subtitle {
	font-size: 5.5vw;
	font-family: 'a-serif-regular';

	margin-bottom: 0.5vh;
	mix-blend-mode: exclusion;
}

.caption {
	font-size: 4vw;
	font-family: 'a-serif-italic';
	
	text-decoration: underline;
	text-decoration-thickness: auto;
	text-underline-position: auto;

	margin-bottom: 5.5vw;
	mix-blend-mode: exclusion;
}

.women {
	color: rgb(255, 255, 255);
	transition: color 0.3s ease;
}

.women:hover {
	color: rgb(255, 255, 0);
}

/* _____________________ introduction _____________________ */

.txt-big_title {
	font-size: 3rem;
	font-family: 'a-serif-italic';

	border-style: solid;
	border-width: 4px 0 4px 0;
	padding: 10px 0;
	color: rgb(255, 255, 0);
	
	margin-bottom: 1vw;

	column-rule-style: solid;
	column-count: 3;

	text-justify: inter-word;
	mix-blend-mode: exclusion;
}

/* _____________________ titres des paragraphes _____________________ */

.txt-titre {
	text-align: center;
	font-size: 1.5rem;
	text-transform: uppercase;
	font-family: 'a-serif-regular';
	
	color: rgb(0, 0, 0);
	
	margin-top: 1vw;
	margin-bottom: 0.25vw;
}

.true-titre {
	text-align: center;
	font-size: 1.5rem;
	text-transform: uppercase;
	font-family: 'a-sans-regular';
	mix-blend-mode: exclusion;
	
	color: rgb(255, 255, 0);
}

/* _____________________ les paragraphes _____________________ */

.added-text{
	font-family: 'a-sans-regular';
	color: rgb(255, 255, 0);
	font-size: 1.1rem;
	mix-blend-mode: exclusion;
}

.p-1 {
	font-family: 'a-serif-regular';
	font-size: 1.1rem;

	border-style: solid;
	border-color: rgb(0, 0, 0);
	border-width: 0 0 4px 0;
	padding: 15px 0;
	
	color: rgb(0, 0, 0);
}

.p-1:hover {
	cursor: pointer;
}

.squeeze{
	transform: scale(0%);
	transform-origin: top;
}

.add-image{
	/* transition: all 0.5s ease-in-out; */
    animation: blurIn 2s ease-out -0.5s; /* Ajout de -1s pour l'animation-delay en avance */
    animation-fill-mode: forwards;
}	

.clicked-text {
	color: rgba(100, 100, 100, 0.3);
	transition: color 0.5s ease;
}

@keyframes blurIn {
    0% {
        filter: blur(0px);
        opacity: -1;
    }
    100% {
        filter: blur(0px);
        opacity: 1;
    }
}

/* _____________________ MEDIA QUERIES _____________________ */


/* _____________________ introduction, MQ _____________________ */ 
 
@media screen and (max-width: 1350px) {
	.txt-big_title {
		font-size: 2.5rem;
		transition: font-size 1s ease;
	}
  }

  @media screen and (max-width: 900px) {
	.txt-big_title {
		font-size: 2rem;
		transition: font-size 1s ease;
		column-count: 2;
	}
  }

  @media screen and (max-width: 675px) {
	.txt-big_title {
		font-size: 1.5rem;
		transition: font-size 1s ease;
		column-count: 1;
	}
  }

/* _____________________ les paragraphes, MQ _____________________ */

@media screen and (max-width: 1350px) {
	.newspaper {
		column-count: 3;
	}
  }

  @media screen and (max-width: 900px) {
	.newspaper {
		column-count: 2;
	}
  }

  @media screen and (max-width: 675px) {
	.newspaper {
		column-count: 1;
	}
  }

  @media screen and (max-width: 450px) {
	.newspaper {
		column-count: 1;
	}
  }