@import url(fonts.css);
/*COMMON CSS BASE*/
:root{
  	--dark-green: #123524ff;
  	--mimi-pink: #ffd6e9ff;
  }

  *{
  	box-sizing: border-box;
    
  }
  html, body {
  	width: 100%;
  	height: 100%;
  	padding: 0;
  	margin: 0;  
  	background-color: var(--mimi-pink);
    cursor: crosshair;
    overflow: hidden;
  }

  .bordures{
  	padding: 50px;
  	height: 100%;
  	width: 100%;
    
  }
  .content{
  	text-align: center;
    align-content: center;
  	padding: 2%;
  	height: calc(100vh - 100px);
  	width: 100%;
    overflow: scroll;
  }

  .borders {
  	position: absolute;
  	height: calc(100vh - 100px);
  	width: calc(100vw - 100px);
    z-index: 2;
    pointer-events: none
  }
  .borders::before, .borders::after {
  	box-sizing: inherit;
  	content: '';
  	position: absolute;
  	width: 100%;
  	height: 100%;	top: 0;
  	left: 0;
  	height: 100%;
  	width: 100%;
  	transform-origin: center;
  }

  .borders::before {
  	border-top: 2px solid var(--dark-green);
  	border-bottom: 2px solid var(--dark-green);
  	transform: scale3d(0, 1, 1);
    transition: transform 0.5s;
    animation: before 1.5s forwards;
    animation-timing-function: ease-out;
  }
  .borders::after {
  	border-left: 2px solid var(--dark-green);
  	border-right: 2px solid var(--dark-green);
  	transform: scale3d(1, 0, 1);
    transition: transform 0.5s;
    animation: after 1.5s forwards;
    animation-timing-function: ease-out;
  }
  @keyframes before{
    0%{
      transform: scale3d(0, 1, 1);
    }

    100%{
      transform: scale3d(1, 1, 1);
    }
  }
  @keyframes after{
    0%{
      transform: scale3d(1, 0, 1);
    }

    100%{
      transform: scale3d(1, 1, 1);
    }
  }

.barre {
	position: fixed;
	width: calc(100vw - 100px);
	display: flex;
  text-align: center;
	justify-content: center;
	align-items: flex-start;
  z-index: 3;
} 
.barre a{
  color: var(--dark-green);
  cursor: crosshair;
  transition: font-size 0.5s;
  text-decoration: none;
  margin: 0% 1%;
}
.barre a:hover{
  text-decoration: underline;
  transition: all 0.3s;
} 
.TOP {
  top: 0%;
}
.BOT {
  bottom: 0%;
	align-items: flex-end;
}

  .overlay {
    height: 0%;
    margin: 50px;
    width: calc(100vw - 100px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: var(--mimi-pink);
    overflow-y: hidden;
    border-bottom: 0px solid var(--dark-green);
    transition: height 0.5s;
    animation: closeonload 1.5s none ease-out 1;
  }
  @keyframes closeonload{
    from{
  	height: calc(100vh - 100px);
    }
    to{
  	height: 0%
    }
  }
  .active {
    border-bottom: 2px solid var(--dark-green);
  	height: calc(100vh - 100px);
  }
  .overlay-content {
    width: 100%;
    height: 100%;
    text-align: center;  
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
/*COMMON CSS BASE*/

h1{
  opacity: 0;
  transform: translateY(80%);
  font-family: 'Aktura' ;
  font-size: calc(5vw + 5vh + 4vmin);
  animation-name: lineUp;
  animation-timing-function: ease-out;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  color: var(--dark-green);
  margin: 0%;
}
h2{
  opacity: 0;
  font-family: 'RobotoSlab-Thin';
  font-size: calc(1vw + 1vh + 1vmin);
  animation-name: fadein;
  animation-delay: 2s;
  animation-timing-function: ease-out;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  color: var(--dark-green);
}
h3{
  font-family: 'RobotoMono-Bold' ;
  color: var(--dark-green);
  text-transform: uppercase;
}
h4{
  font-family: 'RobotoMono-Bold' ;
  font-size: 14px;
  color: var(--dark-green);
}
a{
  color: var(--dark-green);
  cursor: crosshair;
  transition: font-size 0.5s;
  text-decoration: none;
}


@keyframes lineUp {
  0% {
    opacity: 0;
    transform: translateY(80%);
  }
  20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: translateY(20%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*** Works on common browsers ***/
::selection {
  background-color: var(--dark-green);
  color: var(--mimi-pink);
}

/*** Mozilla based browsers ***/
::-moz-selection {
  background-color: var(--dark-green);
  color: var(--mimi-pink);
}

/***For Other Browsers ***/
::-o-selection {
  background-color: var(--dark-green);
  color: var(--mimi-pink);
}

::-ms-selection {
  background-color: var(--dark-green);
  color: var(--mimi-pink);
}

/*** For Webkit ***/
::-webkit-selection {
  background-color: var(--dark-green);
  color: var(--mimi-pink);
}

svg{
  fill-rule:evenodd;
  clip-rule:evenodd;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-miterlimit:1.5;
  stroke-width: 25px;
  transition: stroke-width 0.5s;
}

svg:hover{
  stroke-width: 50px;
}

.gras{
  stroke-width: 50px;
}

.text{
  margin: auto;
  width: 75%;
  text-align: left;
}