@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
	--cl-n1: lightgreen;
	--cl-n2: lightblue;
	--cl-n3: pink;
}


/* TAGS */
body {
	margin: 0rem;
	font-family: "Inter", sans-serif;
	font-size: .7rem;
	background: black;
	font-weight: normal;
}

body * {
	font-size: inherit
}


h1, h2, .comment, .info, textarea, input {
	transition: .5s all;
	border-radius: 0rem;
	padding: .2rem .4rem;
	width: min-content;
	text-transform: capitalize;
 
}

h1 {
	margin: 1rem 0;
	margin-top: 0rem;
	background: white;
	color: black
}

h2 {
	background: var(--cl-n2);
	margin: 0;
}

button, label, .btn {
	border: none;
	padding: .2rem .4rem;
	cursor: pointer;
}

.hidden {
  position: absolute;
  visibility: hidden;
  opacity: 0;
}

label:has(input[type=checkbox]) {
	background: var(--cl-n2);
	opacity: .5;
}

label:has(input[type=checkbox]:checked) {
  font-style: normal;
	opacity: 1;
}

a {
	color: inherit;
	text-decoration: none;
}

.nav_btn {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 2;
	display: flex;
	gap: 1rem;
}

.btn_archive {
	transition: .5s all;
	background: var(--cl-n1);
}
.btn_screenshot {
	transition: .5s all;
	background: var(--cl-n3);
}

/* PLAYER */
.player {
	width: 100vw;
	height: 100vh;
	position: fixed;
	background: black;
}
.player video{
	width:100%;
	height:100%;
}

/* PLAYER OPTION */

.btn_screenshot:hover, .btn_archive:hover {
	opacity: 1;
}

.models_list {
	left: 1rem;
	bottom: 1rem;
	position: absolute;
	transition: .5s all;
	display: flex;
	justify-content: flex-start;
	gap: 1rem;
}

.boxs_models {
}

/* ARCHIVE */

.archive {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: 1rem;
}

.archive article {
	margin: 0;
}


.article_cover img {
	width: calc(33vw - 3rem);
  height: auto;
}


/* ARTICLE */

section {
	border-top: 1px solid;	
}


main.article article {
	display: flex;
  flex-wrap: wrap;
  height: min-content;
  gap: 1rem;
  padding: 1rem;
}

main.article article + article {
  margin-top: 1rem;

}

main.article article header {
	width: 100%;
	display: flex;
  gap: 1rem;
}


.box_figure {
	width: calc(70% - 2rem);
	gap: 1rem;
  display: flex;
  flex-direction: column;
}

figure {
	position: relative;
	height: min-content;
	margin: 0rem;
}

figure img {
	width: 100%;
}

.info {
	width:30%;
	/* background: lightcyan; */
	color: white;
	background: black;
	max-height: 80vh;
  overflow: scroll;
}

.cadre {
	position: absolute;
	outline: 1px solid red;
}

.cadre_index {
	background: red;
	color: white;
	width: 15px;
	height: 15px;
	position: relative;
	text-align: center;
}

.eye {
	background: red; 
	width: 1%;
	height: 1%;
	position: absolute;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}
.comment {
	width: 50%;
	margin: 1rem;
}

.form_comment textarea {
	margin-top: 0rem;
	border: none;
  width: calc(100% - 0rem);
  height: 200px;
	background: lightyellow;
  box-sizing: border-box;
	text-transform: none;
	  resize: none;
}

textarea:focus {
    outline: none;
    border: none;
}

.form_comment input {
	display: block;
	border: none;
}


.box_comment {
	margin-bottom: 1rem;
}

@media print {
	body {
		background: white;
	}
	.info {
		background: white;
		color: black;
		width: 33%;
		height: auto;
	}
	.box_figure{
		width: 100%;
	}
	.print_comment {
		width: calc(60% - 2rem);
		padding: 0 1rem;
		border-left: 1px solid;
	}

	h1 {
		margin: 0;
		padding: 0px;
		background: black;
		color: white;
	}
}