Site_tohubohu/assets/css/style.css

@font-face {
  font-family: "LuziFer", lato;
  src: url("https://tohubohu.ti-nuage.fr/fonts/LuziFer.ttf") format("truetype");
  font-display: swap;
}

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

html {
  font-size: 10px;
}


.header {
  position: relative;
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

  .fade {
  position: absolute;
  font-family: sans-serif;
  font-size: 1vw;
  font-style: italic;
  color: #B56308;
  text-align: center;
  width: 100%;
  margin: auto;
  left: 0;
  opacity: 0;
  animation-name: textFader;
  animation-duration: 20s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.fade:first-of-type { animation-delay: 0.5s}
.fade:nth-of-type(2) {
  animation-delay: calc(20s / 8 + 0.5s);
}
.fade:nth-of-type(3) {
  animation-delay: calc(20s / 8 * 2 + 0.5s);
}
.fade:nth-of-type(4) {
  animation-delay: calc(20s / 8 * 3 + 0.5s);
}
.fade:nth-of-type(5) {
  animation-delay: calc(20s / 8 * 4 + 0.5s);
}
.fade:nth-of-type(6) {
  animation-delay: calc(20s / 8 * 5 + 0.5s);
}
.fade:nth-of-type(7) {
  animation-delay: calc(20s / 8 * 6 + 0.5s);
}
.fade:nth-of-type(8) {
  animation-delay: calc(20s / 8 * 7 + 0.5s);
}
@keyframes textFader {
  0% {
    opacity: 0;
  } /* fade-in */
  1.25% {
    opacity: 1;
  } /* show */
  11.25% {
    opacity: 1;
  } /* fade-out */
  12.5% {
    opacity: 0;
  } /* waiting for the finish animation of other blocks */
  100% {
    opacity: 0;
  }
}

hr {
    display: block;
    unicode-bidi: isolate;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    overflow: hidden;
    border-style: inset;
    border-width: 1px;
    width: 10%;
    margin-top: 60px;
    margin-bottom: 60px;
}
  h1 {
    font-family: "LuziFer";
    color: #B56308;
    line-height: 1.5;
    font-weight: bold;
    font-size: 4vw;
/*    margin-top: 30%; */
    margin-bottom: 10%;
}




@media (min-width: 600px) {
.fade {
  font-size: 2vw;
  }
  h1 {
    font-size: 6vw;
  }
}

@media (min-width: 800px) {
.fade {
  font-size: 2vw;
  }
  h1 {
    font-size: 4vw;
  }
}

@media (min-width: 1200px) {
.fade {
  font-size: 1vw;
  }
  h1 {
    font-size: 3vw;
  }
}

  h2 {
    font-family: sans-serif;
    font-size: 3.25rem;
    color: #B56308;
    text-align: center;
  }

  p {
    font-family: sans-serif;
    font-weight: normal;
    color: #B56308;
    font-size: 1.75rem;
    text-align: center;
  }
  .timetext {
    color: #B56308
    font-family: sans-serif;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
  }
  .timetextcontent {
    color: #B56308
    font-family: sans-serif;
    font-size: 1.65rem;
    font-weight: normal;
    text-align: center;
  }
/*  .body1 {
    font-family: montserrat400;
    color: #B56308;
    font-size: 2rem;
    text-align: center;
    text-align-last: center;
    margin-bottom: 40px;
    }
*/
  
  a {
    text-decoration: underline;
    color: #B56308;
  }

  span:first-of-type {
    top: 50%;
  }

.container {
  max-width: min(800px, calc(100% - 40px));
  text-align: center;
  margin: auto;
  align-items: center;
}

.image {
  width: 90%;
  height: auto;
  margin-top: 5vw;
}

#bandeau {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index :10;
  background-color: rgba(0, 0, 0, 0.7);
}



.item {
  display: inline-block;
  vertical-align: top;
  width: 33%;
  padding: 10px;
}

@media (max-width: 600px) {
.fade {
  font-size: 3vw;
  }
  h1 {
    font-size: 8vw;
  }

  .item {
    display: block;
    width: 100%;
  }
}


/* colonnes */

.row {
  display: flex;
  flex-wrap: wrap;
  background-color: #37474F;
  font-size: 1.5rem;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 60px;
}

.row a {
  color: white;
}
.column {
  flex: 33.33%;
  padding: 20px;
  color: white;
}
.footer {
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.footer p {
  margin: 0;
}


/* Arrow */
}
	a.arrow {
		position: absolute;
		bottom: 10%;
                border-bottom: 0;
                display: inline-block;
                width: 6rem;
                height: 4rem;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		animation: bounce 3s infinite; 
	}


		a.arrow .label {
			display: none;
		}

		a.arrow:before {
			background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 512 512'%3E%3Cpath d='M442.53,346.28L293.65,495.16c-0.33,0.33-0.7,0.62-1.05,0.94c-9.16,9.77-22.15,15.9-36.6,15.9 c-14.44,0-27.43-6.13-36.59-15.88c-0.35-0.33-0.72-0.62-1.06-0.96L69.47,346.28c-19.62-19.62-19.62-51.44,0-71.05 c19.62-19.62,51.43-19.62,71.06,0l65.23,65.23V50.24C205.76,22.5,228.25,0,256,0s50.24,22.5,50.24,50.24v290.21l65.23-65.23 c19.62-19.62,51.43-19.62,71.05,0C462.15,294.84,462.15,326.66,442.53,346.28z' fill='%23B56308' /%3E%3C/svg%3E");
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
			content: '';
			display: inline-block;
			height: 100%;
			position: relative;
			width: 3rem;
		}

		@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); } 40% { transform: translateX(-50%) translateY(-10px); } 60% { transform: translateX(-50%) translateY(-5px); } }