@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@600&display=swap');

@import 'me.css';
@import 'mytimeline.css';
@import 'myprojects.css';
@import 'welcome.css';
@import 'header.css';
@import 'footer.css';


:root {
  /* --black:#52505e; */  
  
  --white:#ffffff;
  --grey:#f0f0f0;
  --very-dark-green:#001f3f;
  --dark-green:#003f5c;
  --green:#0077b6;
  
  --green-rgba:rgba(0,119,182, 0.5);
}


* {box-sizing: border-box; font-weight:300;scroll-behavior: smooth;}
a {text-decoration: none;}
ul, ol, li {list-style-type: none;}
button {border: none;}
html {height: 100%}

a:visited {
  color:#1f78d2;
}
/* CUSTOM CURSORS */
/*
* {
  cursor: url(cursor.png) 4 12, pointer;
}

a, button {
  cursor: url(cursor_reverse.png) 4 12, pointer !important;
}
*/

body {
	margin: 0;
	padding: 0;

	font-family: "Fredoka", sans-serif; /* SITE DJANGO.COM */
	font-weight: 300;
  

	/* MISE EN PLACE DU DISPLAY FLEX POUR COLLER LE FOOTER EN BAS DE PAGE QUAND LA PAGE EST COURTE */
	min-height: 100%; /* OR 100vh without html{height: 100%} */
	display: flex;
	flex-direction: column;
	/* --- */
}

main {
  padding:0;
  margin:0;
  background:var(--dark-green);
}

/* big title */

.content-title {
	text-align:center;
	padding-top: 10%;
	padding-bottom: 10%;
  
  color:white;
  font-weight:600;
  font-size:60px;
  letter-spacing:2px;
  
  font-family: "Permanent Marker", cursive;
}


/* SEPARATORS */
.separator {
  position: relative;
  width: 100%;
  height: 100px;
}

.separator::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background:none;
  clip-path: polygon(100% 0, 0 0, 0 100%);
}

.separator::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

.separator.reverse {
  transform: rotateY(180deg);
}

.vertical .separator.reverse {
  transform: rotateX(180deg);
}


.sep1, .sep2 {
  height:300px;
}

.sep1::before {
  background-color: var(--grey);
}

.sep1::after, .sep2::before {
  background-color: var(--green);
}

.sep2::after {
  background-color:var(--white);
}


/* - */

/* top button */

#top_button {
	position:fixed;
	bottom:15px;
	right:25px;
	z-index:99;
	opacity: 0.4;
	border:none;
	outline:none;
	background-color:var(--green);
	color:white;
	cursor:pointer;
	width:70px;
	height:70px;
	border-radius:50%;
	font-size:30px;
  text-align:center;
}

#top_button:hover {
	transition:.1s linear;
	opacity:1;
}


/* LOADER */
.loader-container {
	z-index: 1000000000;
	position: fixed;
	width: 100%;
	opacity: 1;
	background: var(--dark-green);
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100vh;
  transition: all 1s ease-in-out; /* Ajoute une transition de fondu */
}

.loader-container img {
	animation: up 2s forwards;
}

@keyframes up {
	0% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(360deg);
	}

	100% {
		transform: scale(20);
	}
}

.loader-container.loaded {
	opacity: 0;
}
main, header, footer {
    transition: all 1s ease-in-out;
}

main.loaded, header.loaded, footer.loaded {
  overflow:normal;
}

body.loaded {
  overflow:auto;
}