/* REMINDER: Organize alphabetically */

:root{
    --one:#233036;
    --two:#244357;
    --three:#89a9ba;
    --four:#dbdcdc;
    --five:#D15D14;
    --six:#DCFF79;
    font-family: 'Trebuchet MS', sans-serif;
}

:root{
    --bar: var(--two);
    --bar_text: var(--five);
    --bar_highlight: var(--six);
    --body: var(--one);
    --body_text:var(--four);
    --body_secondary:var(--three);
    --body_secondary_text:var(--two);
    --pills:var(--five);
    --pill_text:var(--two)
}


/*ALT PALLET*/
/*:root {*/
/*  --color-1: #393b35;*/
/*  --color-2: #5c5f53;*/
/*  --color-3: #898a7b;*/
/*  --color-4: #b7c8a7;*/
/*  --color-5: #e9e2d3;*/
/*}*/


/* TODO: convert all px to rem for responsive styling*/

a:link, a:visited{
    color: var(--body_text)
}

/* Box model: Margin | Border | Padding | Content */
body {
    background-color: var(--body);
    color: var(--body_text);
}


main {
    /*padding-top:1rem;*/
    margin-top:1rem;
}

/* Footer */
footer {
    background-color: var(--bar);
    display: flex;
    font-size: 1rem;
    padding: 1rem 2rem;
    justify-content: center;
    align-items: center;
}

footer > div:first-child {
    color: var(--bar_text);
    font-size: 1rem;
}
nav ul {
    list-style: none;
    display: flex;
    gap: 2rem;
}
footer ul {
    list-style: none;
    display: flex;
    gap: 2rem;
}

footer ul li a {
    text-decoration: none;
    color: var(--bar_text);
    font-weight: 500;
    transition: color 0.3s;
}

footer ul li a:hover {
    color: var(--bar_highlight); /* change color on hover */
}
/* End Footer */

/* Form */

form {
    max-width: 800px;   /* Make the form wider */
    width: 100%;        /* Responsive width */
    /*margin: auto;       !* Center it *!*/
}

.form-row {
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;
}

.form-row > div {
    flex: 1; /* Each child takes equal width */
}

input[type=text], select, textarea{
    padding: 1rem;
    margin: .5rem 0;
    border: 2px solid gray;
    border-radius: 1rem;
    font-size: 1.1rem;
    width:100%; /* Fill available space */
    box-sizing: border-box
}

label {
    display:block;
    margin-bottom: 0.3rem;
}

button[type="submit"] {
    background-color: var(--pills);
    color: var(--pill_text);
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 1rem;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
    background-color: var(--bar_highlight); /* a complementary hover color */
}

/* End Form */

/* Nav Bar */
nav {
    background-color: var(--bar);
    font-size: 1.5rem;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

nav > div:first-child {
    /* Placeholder if you want to add a logo */
    color: var(--bar_text);
    font-size: 1.5rem;
    font-weight: bold;
}

/* Nav items container */
nav ul {
    list-style: none;
    display: flex;
    gap: 2rem;
}

/* Nav links */
nav ul li a {
    text-decoration: none;
    color: var(--bar_text);
    font-weight: 500;
    transition: color 0.3s;
}

nav ul li a:hover {
    color: var(--bar_highlight); /* change color on hover */
}
/* End nav bar */

p {
    margin-left:20px;
    margin-right:20px;
}

/* Tiles */
.pill-container {
    display: flex;
    flex-wrap: wrap;
}
.pill{
    background-color:var(--pills);
    color:var(--pill_text);
    border-radius: 15px;
    padding:5px;
    margin: 5px;
    width: fit-content;
}

.tiles-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top:.5rem;
    margin-bottom: .5rem;
}

.tile {
    flex: 1 0 300px;
    background-color: var(--body_secondary);
    color:var(--body_secondary_text);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    border-radius: 10px;
    max-width: 350px;
    transition: transform 0.3s ease-in-out;
}

.tile:hover {
    transform: scale(1.05);
    background-color:var(--bar_highlight)
}

/* End Tiles */