//Colors
$foreground-color: #27327b;
$background-color: #e6e6e6;
$primary-color: #3eadad;
$secondary-color: #487143;
$accent-color: #cfab28;

// Fonts
@font-face {
	font-family: "Josefin Sans";
	src: url('fonts/JosefinSans-VariableFont_wght.ttf');
	src: url('fonts/JosefinSans-VariableFont_wght.ttf') format('truetype');
}

@font-face {
	font-family: "Josefin Slab";
	src: url('fonts/JosefinSlab-VariableFont_wght.ttf');
	src: url('fonts/JosefinSlab-VariableFont_wght.ttf') format('truetype');
}


$sans-serif-font: 'Josefin Sans';
$serif-font: 'Josefin Slab';


//GLOBAL STYLES
* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;

	background-size: cover;
	background-repeat: no-repeat;
	background-color: $background-color;
}


body {
  font-family: $serif-font;
  font-weight: 300;
  color: $foreground-color;
}

a {
	font-family: $sans-serif-font;
	font-weight: 300;
	color: $foreground-color;
}

h1, h2, h3, h4, h5 {
  font-family: $sans-serif-font;
  font-weight: 500;
  color: $foreground-color;
}

html {font-size: 100%;} /* 16px */
h1 {font-size: 4.210rem; /* 67.36px */}
h2 {font-size: 3.158rem; /* 50.56px */}
h3 {font-size: 2.369rem; /* 37.92px */}
h4 {font-size: 1.777rem; /* 28.48px */}
h5 {font-size: 1.333rem; /* 21.28px */}
small {font-size: 0.750rem; /* 12px */}

//MIXIN
@mixin flexcenter {
	display: flex;
	justify-content: center;
	align-items: center;
}

// Animation
@keyframes reveal {
	0% {
	  transform: translateY(100%);
	  opacity: 0;
	}
	100% {
	  transform: translateY(0);
	  opacity: 1;
	}
}

//MAIN CSS
.menu-container {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
	@include flexcenter();

	.menu-wrapper {
		list-style: none;
	
		li {
			margin: 0.5vmin 0;
			display: flex;
			justify-content: left;
			opacity: 0; // Start items as invisible
			animation: reveal 0.6s ease-out forwards;
			
			&:nth-child(1) {
			animation-delay: 0.15s; // Delay for the first item
			}
			&:nth-child(2) {
			animation-delay: 0.3s; // Delay for the second item
			}
			&:nth-child(3) {
			animation-delay: 0.45s; // Delay for the third item
			}
			&:nth-child(4) {
			animation-delay: 0.6s; // Delay for the fourth item
			}
	
			a {
				text-decoration: none;
				font-weight: 500;
				font-size: 15vmin;
				color: $foreground-color;
			}
		}
	}
}