* {
    --primary-color: #437977;
    --primary-color-light: #18B0AA;
    --secondary-color: #FF9C40;
    --secondary-color-light: #ffcb9a;
    --light-green: #ECFEF4;
    --grey: #D8D8D8;
    --dark: #031019;
    --light: #ffffff;

    font-family: "Ubuntu Mono";
    color: var(--dark);
    font-size: large;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers content horizontally */
    justify-content: flex-start; /*  content vertically */
    height: 100vh; /* Full viewport height */
    margin: 0; /* Remove default margin */
    text-align: center; /* Center text inside elements */

    background-color: var(--light-green);
}

header {
    align-self: stretch; /* makes the header (and its nav) span full width */
}

nav {
    width: auto; /* full browser width */
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    padding: 0 1rem
}

main {
    display: flex;
    flex-direction: column;
    height: 100%;
}


h1 {
    font-size: xxx-large;
    margin: 1% 0 1%;
}

h2 {
    font-size: xx-large;
}

button {
    font-size: x-large;
    background-color: var(--light-green);
    border-color: var(--grey);
    border: var(--grey) 2px solid;
    border-radius: 10px;
    padding: 10px 30px;
    margin: 10px;
    cursor: pointer;
    box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.3);
}

button:hover {
    background-color: var(--light-green);
    /*color: var(--light);*/
    border: var(--primary-color) 2px solid;
}

input {
    background-color: var(--light);
    border-color: var(--grey);
    border: var(--grey) 2px solid;
    border-radius: 10px;
    padding: 10px;
    margin: 0 0 20px 0;
    box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.3);
    width: 40%;
}

.flex-container {
    display: flex;
}

.week-container {
    background-color: var(--light-green);
    padding: 10px;
    margin: 10px;
    border-color: var(--grey);
    border: var(--grey) 1px solid;
    border-radius: 10px;
    display: inline-block
}

.workout {
    background-color: #ffffff;
    padding: 10px 20px;
    margin: 10px;
    border-color: var(--grey);
    border: var(--grey) 2px solid;
    border-radius: 10px;
    /*width: auto;*/
    display: inline-block;
    text-align: left; /* Right-align content inside workout container */
}

.workout pre {
    margin: 0; /* Remove default extra margin from pre */
    padding: 0;

    white-space: pre-wrap; /* Allow wrapping lines */
}

.option-btn {
    background-color: var(--light-green);

    padding: 10px 20px;
    margin: 5px;
    border: 1px solid #ccc;
    background-color: #f8f8f8;
    cursor: pointer;
    transition: 0.2s;
}

.option-btn.selected {
    background-color: var(--primary-color-light);
    color: white;
    border-color: var(--primary-color);
}


.special-button {
    background-color: var(--secondary-color);
    transition: background-color 0.3s ease;
}
.special-button:hover {
    background-color: var(--secondary-color-light);
    border: solid 2px var(--secondary-color-light);
}