@font-face {
font-family: 'Unique-V1-Regular';
  src: url("font/Unique-V1-Regular.otf");
}


@font-face {
	font-family: 'Split-Regular';
  src: url("font/Split-Regular.otf");
}

@font-face {
	font-family: 'Close-V2GX';
  src: url("font/Close-V2GX.ttf");
}

@font-face {
	font-family: 'Combat';
  src: url("font/Combat.otf");
}

@font-face {
	font-family: 'close-Regular.ttf';
  src: url("font/close-Regular.ttf");
}

body{
	margin: 0;
	padding: 0;
	background-color: var(--blue);
	font-variant-ligatures: normal;
	-webkit-font-smoothing: antialiased;
	overflow: hidden;
}


::selection {
  color: black;
  background-color: var(--blue);
}

:root {
	--line-height: 30px;
	--blue: #c1ffbd;

}


h1{
	font-family: Combat;
	text-transform: uppercase;
	font-weight: normal;
	font-size: 20pt;
	line-height: 22pt;
	margin-left: 10px;
}

.use:hover{
	color:blue;
}

h1:hover{
	color:blue;
}

p{
	font-family: Combat;
}

div{
	background-color: white;
}

header{
	background-color: var(--blue);
	position: fixed;
	width: 100%;
	top:0;
}

header button {
	border: none;
	background: none;
	color: black;
	cursor: pointer;
	font-size: 30px;

}

label{
	font-size: 13px;
	font-family: Combat;
	margin-left: 20px;
}


a {
	border: none;
	background: none;
	color: black;
	cursor: pointer;
	font-size: 13px;
	font-family: Combat;
	margin-left: 20px;
	text-decoration: none;
}

a:hover{
	color:var(--blue);
}

#btn-inuse {
	position: absolute;
	right:20px;
}

#about-window {
	position: fixed;
	top: 100%;
	left: 0;
	width: 100%;
	height: calc(100vh - 60px);
	border-top: 2px solid black;
	color: black;
	background-color: white;
	transition: top 200ms ease-in-out;
    overflow: scroll;
}

#about-window p{
	font-size: 20pt;
	line-height: 28pt;
	font-family: Combat;
	margin: 20px;

}

#about-window .small{
	font-size: 13pt;
	line-height: 18pt;
}

#about-window .small a{
	font-size: 13pt;
	line-height: 18pt;
}

#about-window a{
	color:var(--blue);
	font-size: 20pt;
	margin: 0;
}

#about-window a:hover{
	color: black;
	margin: 0;
}

#about-window.open {
	top: 67px;
}

#btn-about{
	font-size: 20pt;
	line-height: 22pt;
	font-family: Combat;
}

/*img{
	position: absolute;
	width: 4%;
	right: 10px;

}*/


textarea{
    caret-color: blue;
    margin-bottom: -4px;
    cursor: text;
    white-space: nowrap;
}

textarea.input{
    width: 100%;
    height:1.3em;
    /*height: 140px;*/
    appearance: none;
    border: none;
    font-size: 4.8em;
    line-height: auto;
    /*background: black;*/
    color: black;
    /*overflow: hidden;*/
    resize: none;
    outline: none;
    font-variant-ligatures: normal;
    /* max-width: 400px; */
/*    border-top: 0px solid var(--blue);*/
    white-space: nowrap;
    font-size: 100px;
}

textarea.input:hover{
	/*color: #c1ffbd;*/
	color: var(--blue);
}


.unique{
	font-family: Unique-V1-Regular;
	text-transform: lowercase;
	padding-left: 20px;
}

.split{
	font-family: Split-Regular;
	padding-left: 20px;
}

input .close{
	font-variation-settings: "wght" var(--favorit-wght-range);
}

textarea.split{
	font-size: 30px;
	line-height: var(--line-height);
	height:2em;
	padding-top: 100px;
	padding-bottom: 1em;
}

textarea.close{
	padding-top: 0.1em;
}

.close{
	font-family: 'Close-V2GX';
	text-transform: lowercase;
	padding-left: 20px;
}


.variation{
	position:fixed;
	top:25px;
	right:20px;
}

.curseur {
    -webkit-appearance: none;
    background: blue;
    height: 1px;
    width: 130px;
    margin-bottom: 2%;
    margin-left:2%;
}

#slider{
	width: 100px;
	height: 2px;
    -webkit-appearance: none;
    background: black;
    margin-left: 10px;
}

#textbox{
	-webkit-appearance: none;
	opacity: 0;
	cursor: normal;

}


/*grille in use*/

.container {
/*    height: 100vh;*/
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: auto;
    grid-gap: 15px;
    background-color: var(--blue);
    margin: 20px;
    margin-top :67px;
  }

.container img {
  	width: 100%;
  	background-color: var(--blue);
  	border-bottom: solid 5px var(--blue);
  }


.container p{
	font-size: 12px;
	margin:0;
	margin-bottom: 15px;
	margin-top:10px;
	margin-left: 20px;
}

.container a{
	margin-left:0;
	font-size: 12px;
}

.container a:hover{
	color: var(--blue);
	font-size: 12px;
}