/*
    Name:   Lailee Bowman
    Course: ITWP 1050 
    Assignment: Homework 1 Course Homepage
*/

/* root level custom color variables */
:root {
    --primary-color: #fff6b3;
    --secondary-color: #ff8b5d;
}

/* Pure CSS Animated Gradient Background by Manuel Pinto from CodePen. https://codepen.io/P1N2O/pen/pyBNzX applies to whole page */
html {
    height: 100%;
	background: linear-gradient(-45deg, var(--primary-color), var(--secondary-color), #ff8ddf, #8af5ff);
    background-size: 400% 400%;
	background-repeat: no-repeat;
    background-attachment: fixed;
	animation: gradient 20s ease infinite;
}

/* header styling, serif font, centered text with color and shadow. */
header {
    font-family:Georgia, 'Times New Roman', Times, serif;
    font-size: 1.2rem;
    color: var(--primary-color);
    font-style: normal;
    text-align: center;
    text-shadow: 2px 2px 2px #000000;
    padding-top: 10px;

}

/* subheading centers text, adds color and shadow. */
h4 { 
    text-align: center;
    color: #1c1817;
    text-shadow: 1px 1px 1px white;
}

/* main content, keeps page tall and adds padding */
main {
    min-height: 70vh;
    padding: 0 10%;
}

/* grid container for homework cards */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

/* individual card styling. rounded box with shadowed text and hover transitions */
.card {
    color: rgb(32, 32, 32);
    font-size: 1.1rem;
    text-shadow: 1px 1px 1px whitesmoke;
    background-size: contain;
    background-position: center;
    background-blend-mode: multiply;
    padding: 15px;
    border-radius: 15px;
    background: var(--primary-color);
    border: 3px solid grey;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

/* makes the entire card clickable without changing text color */
.card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* hover effect highlights border and lightens background */
.card-link:hover .card {
    border-color: var(--secondary-color);
    background-color: rgba(255, 255, 255, 0.25);
}

/* background colors for each homework card */
.hw1 {
    background-color: #ffc2c2;
}
.hw2 {
    background-color: #ffe4d0;
}
.wp1 {
    background-color: #fffccd;
}
.hw3 {
    background-color: #d7ffcd;
}
.wp2 {
    background-color: #d1fff2;
}
.hw4 {
    background-color: #cce7ff;
}
.hw5 {
    background-color: #cac9ff;
}
.wp3 {
    background-color: #e7d3ff;
}
/*centers text inside header and div elements*/
header, div {
    text-align: center;
}

/*ID that centers the validation text*/
#validation {
    text-align: center;
}

/* Keyframes for the animated gradient background. */
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* mobile layout stacks cards and increases font size */
@media (max-width: 768px) {
    body {
        font-size: 110%;
    }
    .cards {
        grid-template-columns: 1fr;
    }
    .card {
        padding: 10px;
        font-size: 1.2em;
    }
}