:root{
	--main-color: black;
	--background-color: white;
	--accent-color: lightgreen;
	--swiper-theme-color: black;
	--color1: white;
}

@font-face {
 font-family: "Ortica";
 src: url("../css/fonts/ortica/Ortica-Light.otf") format("opentype"),
        url("../css/fonts/ortica/Ortica-Light.woff") format("woff"),
       		url("../css/fonts/ortica/Ortica-Light.woff2") format("woff2");
}

@font-face {
 font-family: "Apfel";
 src: url("../css/fonts/apfel/ApfelGrotezk-Regular.otf") format("opentype"),
        url("../css/fonts/apfel/ApfelGrotezk-Regular.woff") format("woff"),
       		url("../css/fonts/apfel/ApfelGrotezk-Regular.woff2") format("woff2");
}

@font-face {
 font-family: "Apfelbrukt";
 src: url("../css/fonts/apfel/ApfelGrotezk-Brukt.otf") format("opentype"),
        url("../css/fonts/apfel/ApfelGrotezk-Brukt.woff") format("woff"),
       		url("../css/fonts/apfel/ApfelGrotezk-Brukt.woff2") format("woff2");
}

::selection {
  background-color: var(--accent-color);
  color: var(--main-color);
}

body{
	background-color: var(--background-color);
	cursor: url("../img/cursor/main.svg") 16 16, auto;
}


header{
	width: 100vw;
	box-sizing: border-box;
	color: var(--main-color);
	font-family: "Apfel";
	font-size: 1.25rem;
	display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.5rem;
    /*padding-right: 1.5rem;*/
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
}

h1{
	font-size: 1.25rem;
}


a {
	color: var(--main-color);
	text-decoration: none;
	cursor: url("../img/cursor/clic.svg") 16 16, pointer;
}

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

main {
	width: 100%;
	box-sizing: border-box;
	display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 5px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    
}


.conteneur{
	width: 100%;
	margin-top: 1vh;
	font-family: "Apfel";
	grid-column: 2/5;
}

.liste{
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	margin-top: 2vh;
}

h2{
	grid-column: 1;
	color: var(--accent-color);
	font-family: "Ortica";
}

.nom{
	grid-column: 2/3;
}

.cat{
	grid-column: 3/4;
	font-family: "Ortica";
	font-size: 0.8rem;
}


img{
	position: fixed;
	display: none;
	width: calc( ((((100vw - 3rem) - (3 * 5px) ) / 4 ) ) );
	left: calc( ((((100vw - 3rem) - (3 * 5px) ) / 4 ) * 3 ) + 1.5rem ) ;
	top: 5vh;
}

p:hover + img{
	display: block;
}