@font-face {
    font-family: "Archivo Narrow";
    font-style: normal;
    font-weight: 400;
    src: url("./assets/fonts/ArchivoNarrow-Regular.otf") format("opentype");
}
@font-face {
    font-family: "Archivo Narrow";
    font-style: normal;
    font-weight:700;
    src: url("./assets/fonts/ArchivoNarrow-Bold.otf") format("opentype");
}
@font-face {
    font-family: "Archivo Narrow";
    font-style: italic;
    font-weight: 400;
    src: url("./assets/fonts/ArchivoNarrow-Italic.otf") format("opentype");
}
@font-face {
    font-family: "Internationale";
    font-style: normal;
    font-weight: 400;
    src: url("./assets/fonts/LInternationale.ttf") format("truetype");
}
/*html{
    background-color: #0b010d;
}

.entree{
    width:33%;
    display: inline-block;
    filter: drop-shadow(0px 0px 5px rgb(30, 51, 169));

}

.entree img{
}

.entree:hover{
    transition: filter 1s;
    filter: drop-shadow(1px 1px 30px rgb(160, 0, 210));
}

@keyframes entreeroll {
    0%{
        filter: drop-shadow(0px -4px 5px rgb(160, 0, 210));

    }

    50%{
        filter: drop-shadow(1px 1px 20px rgb(160, 0, 210));

    }

    100%{
        filter: drop-shadow(0px -4px 5px rgb(160, 0, 210));

    }
}

body{
    padding: 1%;
}

#map{
    width:100%;
    text-align: center;
    height: 8%;
}*/
body{margin:0;}
html{
    background-color: #0cff79;
    overflow: hidden;
    filter:hue-rotate(0deg);
    transition: filter 0.4s ease;
}
nav{
    position: fixed;
    width: 100%;
    top: 23vh;
    height: auto;
}
.mapnav a {
	font-size: 10vh;
	color: white;
	position: relative;
	display: block;
	margin: -3vh 0px;
    transition: filter 0.3s ease;
	filter: drop-shadow(0px 0px 3px white) drop-shadow(0px 0px 3px white) drop-shadow(0px 0px 3px grey);
}
.mapnav a:hover{
    filter: drop-shadow(0px 0px 3px white) drop-shadow(0px 0px 3px white) drop-shadow(0px 0px 3px white) drop-shadow(0px 0px 3px white) drop-shadow(0px 0px 3px grey);

}
.menu .background{
    position: absolute;
    z-index: -1;
    width:100vw;
    height:100vh;
    display: grid;
    grid-template-columns: 20vw 60vw 20vw;
    grid-template-rows: 25vh 50vh 25vh;
}


a{
    font-family: "Archivo Narrow";
    position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: 4%;
  margin: auto;
  font-size: 3vh;
  text-align: center;
}


h1 {
    font-family: "Internationale";
    font-size: 15vh;
    position: absolute;
    margin: 0px;
    letter-spacing: -7%;
    transition: letter-spacing 0.4s ease, filter 0.4s ease;
    text-align: center;
    width:100%;
}
#marjo,#world{
    color: #000;
    text-shadow: 0px 0px 5px black;
}
#marjo,#marjowhite{
    top: 5vh;
    left:-3vw;
}
#world,#worldwhite{
    top: 19vh;

}
#marjowhite,#worldwhite{
    z-index: -1;
    color: #fff;
    filter: drop-shadow(0px 0px 12px #fff) drop-shadow(0px 0px 12px #fff) drop-shadow(0px 0px 12px #fff) drop-shadow(0px 0px 12px #fff) drop-shadow(0px 0px 12px #fff) drop-shadow(0px 0px 12px #fff)drop-shadow(0px 0px 12px #fff)drop-shadow(0px 0px 12px #fff)drop-shadow(0px 0px 12px #fff);

}
.blurr{
    filter:blur(31px) brightness(110%);
    position: absolute;
    z-index: -2;
    animation: movearound 30s infinite linear;
    mix-blend-mode: color-burn;
}
#coquillage_1 path, #coquillage_back path{
    fill: url(#Dégradé_sans_nom_94);
}
#soleil_1 path, #soleil_back path{
    fill: url(#Dégradé_sans_nom_128);
}
#coeur_1 path, #coeur_back path{
    fill: #ff86dd;
}
#trucorange_1 path, #trucorange_back path{
    fill: #ff6f37;
}
#aquarium {
    width: 41vw;
    position: absolute;
    left: 29vw;
    bottom: -1vh;
}
#tresor {
	width: 42vw;
	position: absolute;
	left: 2vw;
	top: 2%;
}

#coeur {
	width: 42vw;
	position: absolute;
	left: 2vw;
	top: 2%;
}
#dressing {
	width: 30vw;
	position: absolute;
	left: 62vw;
	top: 18%;
	transform: rotate(30deg);
}

#contact {
	width: 7vw;
	position: absolute;
	left: 77vw;
	bottom: 6vh;
}
#plan{
    width: 7vw;
    position: absolute;
    left: 7vw;
    bottom: 6vh;
}

#coquillage_back {
	width: 45vw;
	bottom: -10%;
	transform: rotate(30deg);
	left: -14%;
}

#soleil_back {
	top: -87vh;
	width: 116vW;
	left: -11vw;
}
#coeur_back {
	width: 53vw;
	rotate: 26deg;
	left: 5vw;
}

#trucorange_back {
	width: 43vw;
	right: -8vw;
	top: -14vh;
}

#fleur_back {
	width: 31vw;
	visibility: initial;
	bottom: -2vh;
	right: 6vh;
}

#tresor a {
	filter: drop-shadow(0px 0px 8px #0819ff) drop-shadow(0px 0px 8px #0819ff);
	color: #cdff08;
}

#aquarium a {
	color: #0819ff;
	filter: drop-shadow(0px 0px 7px #0819ff) drop-shadow(0px 0px 7px #0819ff);
}

#dressing a {
    height: 20%;
	color: #f4ff92;
	filter: drop-shadow(0px 0px 7px #f4ff92) drop-shadow(0px 0px 7px #f4ff92);
}

#plan a,#contact a {
	filter:  drop-shadow(0px 0px 3px black) drop-shadow(0px 0px 1px black);
	font-size: 2.6vh;
}
@keyframes movearound {
    0%{
        transform:rotate(0deg);

    }
    100%{
        transform: rotate(360deg);
    }
}
#contact a {
	height: 25%;
}
a:hover{
    cursor:pointer;
}
html:has(#tresor a:hover){
    filter:hue-rotate(45deg);
}
html:has(#aquarium a:hover){
    filter:hue-rotate(-45deg);
}
html:has(#dressing a:hover){
    filter:hue-rotate(120deg);
    transition: filter 0.8s ease;
}
html:has(#plan a:hover){
    filter:hue-rotate(0deg) saturate(58) contrast(127%) grayscale(1) brightness(80%) contrast(230%)
}

html:has(#contact a:hover){
    filter:hue-rotate(-189deg) contrast(120%) contrast(120%) grayscale(1) invert(1);
}

/*--------NAV BACKGROUND GRID--------*/
.background div {
	mix-blend-mode: plus-lighter;
	border: 100px dotted #fa6dff;
	background: radial-gradient(#004cff, #d2fb0d);
	filter: blur(41px) drop-shadow(-2px 2px 8px black);
    animation: borderchange 20s linear infinite;
}
#one{
    grid-row: 1/4;
    grid-column: 1;
}
#two{
    grid-row: 1;
    grid-column: 1/4;
}

#three{
    grid-row:1/4;
    grid-column: 3;
}

#four{
    grid-row:3;
    grid-column: 1/4;
}

#five {
	grid-row: 2;
	grid-column: 2;
	mix-blend-mode: plus-lighter;
	background-color: #fff;
	filter: blur(21px);
	border: 8px ridge #66ff61;
	z-index: 2;
}
@keyframes borderchange {
    0%{
        border: 100px dotted #fa6dff;
    }
    50%{
        border: 200px dotted #fa6dff;
    }
    100%{
        border: 100px dotted #fa6dff;
    }
}