@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,900&display=swap');

*{
    margin : 0;
    padding: 0;
}

body{
	font-family: "europa", sans-serif;
}

section{
  height: max-content;
}

#verticalflex{
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}

#topnav{
	position: absolute;
	z-index: 98;
	width: 100%;
    background-color: rgba(50,50,60,.3);
    color: white;
    display: flex;
    justify-content : flex-end;
    align-items: center;
    height: 3rem;
    box-shadow: rgb(0 0 0 / 20%) 0px 2px 4px -1px, rgb(0 0 0 / 14%) 0px 4px 5px 0px, rgb(0 0 0 / 12%) 0px 1px 10px 0px;
}

#logo{
    margin-right: auto;
}

#logobig,#logobigHB,#logobigPP{
    color: white;
    font-size: 10vh;
	text-align: center;
}

#logobig2{
    color: white;
    font-size: 6vh;
}

#logobig3{
    color: white;
    font-size: 10vh;
    text-shadow: 0 0 4px black;
}

#logobig4{
    color: white;
    font-size: 3vh;
}

#logobig5{
    color: white;
    font-size: 5vh;
}


#desc{
    color: white;
    font-size: 6vh;
}

#start{
    height: 100vh;
    width: 100%;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content : center;
}

#start2{
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content : center;
}

#presentation, #presentationcomp{
    width: 100%;
    height: 100%;
    padding-top: 2%;
    padding-bottom: 2%;
	overflow: hidden;
    background: #0e0f14;
    display: flex;
    justify-content: center;
    align-items: center;
}

#presentationBIG2{
    width: 100%;
    height: 100%;
    padding-top: 2%;
    padding-bottom: 2%;
    background: #0e0f14;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#titresection{
    width: 100%;
	position:relative;
	z-index: 98;
    height: 15vh;
    background: #0e0f14;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content : center;
}

#titresection2{
    width: 100%;
	position: relative;
	z-index: 98;
    height: 30vh;
    background: #0e0f14;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content : center;
}

#presentationNeuschwanstein{
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content : center;
}

#presentationTitanic{
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content : center;
}

#presentationA06{
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content : center;
}

#presentationA04{
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content : center;
}

a, a:hover, a:focus, a:active {
    margin-right: 2vh;
    text-decoration: none;
    color: inherit;
}

#logo{
    margin-left: 2vh;
}

#APropos, #PU, #PP, #HB{
    color: white;
}
#presentationMyCastle{
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content : center;
}

#presentationClassement{
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content : center;
}


#presentationBIG{
    width: 100%;
    height: 100%;
    padding-top: 2%;
    padding-bottom: 2%;
    background: #0e0f14;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

img{
    width: 70%;
    height: 60%;
    margin-bottom: 4vh;
    object-fit: cover;
}

#texte{
    color: rgba(220, 220, 220, 0.87);
    width: 80vh;
}

#texte2{
    color: rgba(220, 220, 220, 0.87);
    width: 100%;
}

hr{
    width: 40vh;
    margin: 16px 0;
    opacity: 0.5;
}

#hr2{
    width: 80%;
    margin: 32px 0;
    opacity: 0.5;
}

.fondparallax{
    width: 100%;
    background-size: cover;
    background-attachment: fixed;
    height: 10vh;
}

#fondparallax2{
    width: 100%;
    background-size: cover;
    background-attachment: fixed;
    height: 120vh;
}

#fondparallax3{
  width: 100%;
  background-size: cover;
  background-attachment: fixed;
  height: 50vh;
}

.tab{
    display: flex;
    justify-content: space-around;
}

#titre{
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
}

a{
    color : lightblue;
}

h1{
    font-size: 4vh;
}

h4{
    margin-top: 2vh;
    font-size: 3vh;
}

h2{
    margin-bottom: 2vh;
}

p{
    font-size: 2vh;
}

#titre2{
    margin-bottom: 1vh;
}

ul{
    margin-left: 2vh;
	list-style: none;
}

.ulSlide, .ulSlide2, .ulSlide3, .ulSlide4{
    display: flex;
    list-style-type: none;
    justify-content: center;
    align-items: center;
}

.liSlide, .liSlide2, .liSlide3, .liSlide4{
    flex: 0 0 auto;
    width: 100%;
    display: none;
}

.liSlide5{
  flex: 0 0 auto;
  width: 100%;
}

li{
    font-size: 2vh;
}

#transi{
    max-width: 100%;
    position: relative;
    margin: auto;
}

.slide, .slide2, .slide3, .slide4, .slide5{
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
}

/* forward & Back buttons */
.Back, .forward, .Back2, .forward2, .Back3, .forward3, .Back4, .forward4,.Back5, .forward5 {
    cursor: pointer;
    position: absolute;
    top: 48%;
    width: auto;
    margin-top: -23px;
    padding: 17px;
    color: grey;
    font-weight: bold;
    font-size: 40px;
    transition: 0.4s ease;
    border-radius: 0 5px 5px 0;
    user-select: none;
  }
  
  /* Place the "forward button" to the right */
  .forward, .forward2, .forward3, .forward4, .forward5 {
    right: 0;
    border-radius: 4px 0 0 4px;
  }
  
  /*when the user hovers,add a black background with some little opacity */
  .Back:hover, .forward:hover, .Back2:hover, .forward2:hover, .Back3:hover, .forward3:hover, .Back4:hover, .forward4:hover, .Back5:hover, .forward5:hover {
    background-color: rgba(0,0,0,0.8);
  }

  /* Faint animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.4s;
    animation-name: fade;
    animation-duration: 1.4s;
  }
  
  @-webkit-keyframes fade {
    from {opacity: .5}
    to {opacity: 2}
  }
  
  @keyframes fade {
    from {opacity: .5}
    to {opacity: 2}
  }

  #svg1 {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
  }

  #svg2 {
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .container {
    display: inline-block;
    position: relative;
	z-index: 98;
    width: 100%;
    height: 30vh;
    padding-bottom: 0;
    vertical-align: middle;
    overflow: hidden;
    background-attachment: fixed;
  }

  .containerspe1 {
    display: inline-block;
    position: relative;
	z-index: 98;
    width: 100%;
    height: 100vh;
    padding-bottom: 0;
    vertical-align: middle;
    background-attachment: fixed;
  }
  
  .containerspe2 {
    display: inline-block;
    position: relative;
	z-index: 98;
    width: 100%;
    height: 40vh;
    padding-bottom: 0;
    vertical-align: middle;
    overflow: hidden;
    background-attachment: fixed;
  }

  .container2 {
    display: inline-block;
    position: relative;
	z-index: 98;
    width: 100%;
    height: 60vh;
    padding-bottom: 0;
    vertical-align: middle;
    overflow: hidden;
    background-attachment: fixed;
  }
  
  .container2jwst {
    display: inline-block;
    position: relative;
	z-index: 98;
    width: 100%;
    height: 60vh;
    padding-bottom: 0;
    vertical-align: middle;
    overflow: hidden;
    background-attachment: fixed;
  }
  
  .container2iss {
    display: inline-block;
    position: relative;
	z-index: 98;
    width: 100%;
    height: 60vh;
    padding-bottom: 0;
    vertical-align: middle;
    overflow: hidden;
    background-attachment: fixed;
  }

  .container3 {
    display: inline-block;
    position: relative;
	z-index: 98;
    width: 100%;
    height: 100%;
    padding-bottom: 0;
    vertical-align: middle;
    overflow: hidden;
    background-attachment: fixed;
  }
  
  section{
	position: relative; 
	z-index:98;
  }
  
  /*Arrow*/
  #arrows {
	  width: 60px;
	  height: 72px;
	  position: absolute;
	  left: 50%;
	  margin-left: -30px;
	  bottom: 140px;
	  visibility: hidden;
	}

	#arrows path {
	  stroke: white;
	  fill: transparent;
	  stroke-width: 2px;  
	  animation: arrow 2s infinite;
	  -webkit-animation: arrow 2s infinite; 
	}

	@keyframes arrow
	{
	0% {opacity:0}
	40% {opacity:1}
	80% {opacity:0}
	100% {opacity:0}
	}

	@-webkit-keyframes arrow /*Safari and Chrome*/
	{
	0% {opacity:0}
	40% {opacity:1}
	80% {opacity:0}
	100% {opacity:0}
	}

	#arrows path.a1 {
	  animation-delay:-1s;
	  -webkit-animation-delay:-1s; /* Safari 和 Chrome */
	}

	#arrows path.a2 {
	  animation-delay:-0.5s;
	  -webkit-animation-delay:-0.5s; /* Safari 和 Chrome */
	}

	#arrows path.a3 { 
	  animation-delay:0s;
	  -webkit-animation-delay:0s; /* Safari 和 Chrome */
	}
	
	/*Text typing*/
	.text-typing {
	  display: inline-block;
	}
	.text-typing h1 {
	  margin:0px;
	  white-space:nowrap;
	  overflow:hidden;
	}
	
	.typinganim{
		animation:typing 3s steps(22,end) forwards,
				blink 1s 5;
	}
	
	#line1 {
		margin:0px;
		white-space:nowrap;
		overflow:hidden;
		width: 0;
		animation:typing 4s steps(22,end) forwards,
				blink 1s infinite;
	}
	#line2 {
		margin:0px;
		white-space:nowrap;
		overflow:hidden;
		width: 0;
		animation:typing 4s steps(22,end) forwards,
				blink 1s infinite;
		animation-delay: 4s;
	}
	#line3 {
		margin:0px;
		white-space:nowrap;
		overflow:hidden;
		width: 0;
		animation:typing 4s steps(22,end) forwards,
				blink 1s infinite;
		animation-delay: 8s;
	}
	@keyframes typing {
	  0% { width:0% }
	  100% { width:100% }
	}
	@keyframes blink {
	  0%,100% {
		border-right:2px solid transparent;
	  }
	  50% {
		border-right:2px solid white;
	  }
	}
  
   /*@media(max-width: 1300px){ 
	  #presentationBIG, #presentationBIG2{
			height: 80vh;
		}
   }*/
   
  @media(max-width: 900px){
	/*#presentationcomp{
		height: 80vh;
	}*/
	
	.tab{
		align-items:center;
		flex-direction: column;
	}
	
	.section1, .section2, .section3{
		width: 250px;
		margin-bottom: 20px;
	}
  }
  
  @media(max-width: 700px){
	  #logobig, #logobigPP, #logobigHB, #logobig3{
		font-size: 6vh;
	  }
	  
	  /*#presentationBIG, #presentationBIG2{
		height: 60vh;
	  }*/
	  
	  #logobig2{
		font-size: 4vh;  
	  }
	  
	  #logobig5{
		font-size: 3vh;
		text-align: center;
	  }
	  
	  #logobig4{
		font-size: 2vh;
	  }
	  
	  #fondparallax2{
		height: 100vh;
	  }
	  
	  /*.container2, .container2jwst, .container2iss{
		height: 20vh;
	  }*/
	  
	  /*.containerspe2{
		height: 20vh;
	  }*/
	  
	  /*.container3{
		 height: 40%;
	  }*/
	  
	  #desc{
		  font-size: 4vh;
	  }
	  
	  h4{
		  font-size: 2vh;
	  }
	  
	  h1{
		  font-size: 3vh;
	  }
  }
  
  
   @media(max-width: 500px){
	  #logobig3{
		font-size: 4vh;
	  }
	  
  }
  
  @media(max-width: 450px){
	#topnav{
		font-size: 10px;
	}
  }