@charset "UTF-8";

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

:root{
  --font-size: calc(0.6rem + 0.8vw);
}

.container {
    text-align: center;
}

.fromages {
	display: flex;
	width: 100%;
	height: 7%;
	position: absolute;
	top: 0%; 
	z-index: 5;
  }

  .fromages-unit {
	flex: 1;
	width: 100%;
	overflow: hidden; 
  }
  
  .fromages-unit img {
	width: 100%; 
	height: 100%; 
	object-fit: contain; 
  }

  .fromagesbas {
	display: flex;
	width: 100%;
	height: 7%;
	position: absolute;
	bottom: 0%; 
	z-index: 5;
  }

  .fromagesbas-unit {
	flex: 1;
	width: 100%;
	overflow: hidden; 
  }
  
  .fromagesbas-unit img {
	width: 100%; 
	height: 100%; 
	object-fit: contain; 
  }

.bienvenue-text {
    color: rgb(30, 0, 255); 
    font-size: calc(var(--font-size) * 8);
    text-decoration: none; 
    transition: text-decoration 0.3s ease;
    font-family: "bienvenue", sans-serif;
}
 @font-face {
    font-family: "bienvenue";
    src: url("./../../assets/fonts/bienvenue.ttf") format('woff');
}


.typo-link:hover {
  text-decoration: underline;
  /* cursor: url('./../../assets/curseurs/fromage.png'), auto; */
}


.bienvenue-text:hover {
    color: #db3434;
    /* cursor: url('./../../assets/curseurs/fromage.png'), auto; */
}

.clique-text {
  color: rgb(30, 0, 255); 
    font-size: calc(var(--font-size) * 2);
    line-height: 1.2;
}

.amuse-text {
  color: rgb(30, 0, 255); 
    font-size: calc(var(--font-size) * 1.2);
    line-height: 1.2;
}

.instruis-text {
  color: rgb(30, 0, 255);  
    font-size: calc(var(--font-size) * 1.2);
    line-height: 1.2;
}

.gif-container {
    text-align: center;
}

.responsive-gif {
    max-width: 100%;
    height: auto; 
}


.trail {
  position: absolute;
  height: 50px;
  width: 50px;
  pointer-events: none;
}

.trail img {
  width: 100%; 
  height: 100%; 
}



@media (orientation: portrait) {
  body {
      overflow: hidden; 
      flex-direction: column;
  }

  .bienvenue-text {
    color: rgb(30, 0, 255); 
    font-size: calc(var(--font-size) * 3.5);
    text-decoration: none; 
    transition: text-decoration 0.3s ease;
    font-family: "bienvenue", sans-serif;
  }
}