html * {
	box-sizing: border-box;
}
:root {
	--primary-color: #000000;
	--secondary-color: #eeddaa;
}

body {
	font-family: "Avenir Next", system-ui, sans-serif;
	font-size: 100%;
	line-height: 135%;
	background-color: var(--primary-color);
	color: var(--secondary-color);
	background-image: linear-gradient(#0008,#0008),url("gloomy.jpg");
	background-position: center center;
	background-size: cover;
}

a {color: var(--secondary-color);}

header {
	min-height: 30vh;
	background-color: #88888833;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

h1 {
	line-height: 1.2em;
	/* outline: 1px solid red; */
	text-align: center;
}
.hero {
	padding: 60px 20px;
	text-align: center;
	animation: fadeIn 2s ease-in-out;
}

.hero h2 {
	font-size: 2.2rem;
	
	.nav-menu {
    display: flex;
    justify-content: center;
    gap: 25px;
    list-style: none;
    margin-top: 15px;
    flex-wrap: wrap;
}

.nav-menu li a {
    color: white;
    text-decoration: none;
    font-weight: bold;

    transition: color 0.3s ease,
                transform 0.3s ease;
}

/* Pseudo-Class Selector */
.nav-menu li a:hover {
    color: gold;
    transform: scale(1.1);
}

/* ==========================
   MAIN CONTENT
========================== */

main {
    width: 90%;
    max-width: 1200px;
    margin: 30px auto;
}

section {
    margin-bottom: 40px;
}

/* Class Selector */
.story {
    background-color: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);

    transition: transform .4s ease,
                box-shadow .4s ease;
}

.story:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,.25);
}

/* ==========================
   CSS GRID FOR STORIES
========================== */

.story-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(300px, 1fr));

    gap: 20px;
}

.story-card {
    background-color: white;
    padding: 20px;
    border-radius: 10px;

    transition: transform .3s ease;
}

.story-card:hover {
    transform: scale(1.03);
}

/* ==========================
   WORKS IN PROGRESS
========================== */

.project {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 25px;
}

.progress-bar {
    width: 100%;
    background-color: #ddd;
    border-radius: 25px;
    overflow: hidden;
    height: 25px;
}

.progress {
    height: 100%;
    background-color: #4b2e2e;

    animation: fillBar 2s ease-in-out;
}

/* Different Completion Levels */

.twentyfive {
    width: 25%;
}

.fifty {
    width: 50%;
}

.seventyfive {
    width: 75%;
}

.onehundred {
    width: 100%;
}



footer {
    text-align: center;
    background-color: #4b2e2e;
    color: white;
    padding: 20px;
    margin-top: 40px;
}


.story p {
    text-indent: 25px;
}


@keyframes fadeIn {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes fillBar {

    from {
        width: 0;
    }

}


@media (max-width: 768px) {

    .nav-menu {
        flex-direction: column;
        gap: 10px;
    }

    h1 {
        font-size: 2rem;
    }

    #hero h2 {
        font-size: 1.8rem;
    }

    main {
        width: 95%;
    }

}