:root {
    --primary-orange: #FFA552;
    --primary-orange-dark: #644222;
    --primary-coral: #FF5E5B;
    --accent-blue: #4DA1FF;
    --accent-mint: #2EC4B6;
    --background: #FFF9F3;
    --text-dark: #2D2D2D;
    --text-light: #fff;
    --border-color: #3963;
}

a, a:visited {
    color: var(--accent-blue);
    text-decoration: none;
    transition: color 0.2s linear;

    &:hover {
        color: var(--accent-mint);
    }
}

h1 {
    font-size: 2rem;
    margin: 0.5rem 0;
}

h2 {
    font-size: 1.5rem;
    margin: 0.5rem 0;
}

body {
    background: var(--background);
    color: var(--text-dark);
    font-family: 'Segoe UI', Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    .mainContent {
        flex: 1;
        padding: 0 0.5rem;
        transition: all 0.2s linear;
        /* display: flex;
        align-items: center;
        justify-content: center;
        & > div {
            flex: 1;
        } */
    }
}

header {
    background: var(--primary-orange);
    color: var(--text-light);
    padding: 1.5rem 0;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    position: relative;
    min-height: 60px;

    a {
        text-decoration: none;
        color: var(--text-light);
    }

    img {
        height: 60px;
        width: auto;
        vertical-align: middle;
        background: #FFFC;
        border-radius: 20%;
        transition: all 0.2s ease-in-out;

        &:hover {
            transform: scale(1.05);
            background: color-mix(in srgb, var(--accent-mint) 40%, transparent);
        }
    }

    h2 {
        position: absolute;
        left: 20px;
        top: 15px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .toggleButton {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 4rem;
        font-weight: bold;
        cursor: pointer;
        line-height: 2.5rem;
        padding: 2px 10px 8px;
        border-radius: 10px;
        transition: all 0.2s linear;
    }

    .userinfo {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);

        img {
            height: 50px;
            aspect-ratio: 1 / 1;
        }
    }
}


nav {
    transition: all 0.2s linear;
    z-index: 20;

    .navigation {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 1rem;
        padding: 0;
        transition: all 0.2s linear;

        li {
            list-style: none;
            transition: all 0.2s linear;

            a {
                color: var(--text-light);
                text-decoration: none;
                font-weight: 500;
                font-size: 1.2rem;
                transition: all 0.2s linear;

                &:hover {
                    color: var(--text-light);
                    transform: scale(1.25);
                }
            }

            &.active a {
                color: var(--text-light);
                font-weight: bold;
            }
        }
    }
}

.hero {
    max-width: min(900px, 80vw);
    margin: 3rem auto 2rem auto;
    background: #fff;
    border-radius: 1.5rem;
    box-shadow: 0 4px 24px rgba(255,165,82,0.08);
    padding: 2rem 2rem 2.5rem;
    text-align: center;
    transition: all 0.2s linear;

    &.left {
        text-align: left;
    }

    h1, &.left h1 {
        color: var(--primary-orange);
        font-size: 2rem;
        line-height: 2rem;
        margin-top: 0;
        margin-bottom: 1.5rem;
        padding: 0;

        &.big {
            font-size: 2.5rem;
            line-height: 2.5rem;
        }
    }

    h2, &.left h2 {
        color: var(--primary-coral);
        font-size: 2rem;
        line-height: 2rem;
        margin-top: 0;
        margin-bottom: 1.5rem;
        padding: 0;
    }

    p {
        color: #555;
        font-size: 1.2rem;
        margin-bottom: 2rem;
    }

    p.no-bottom-margin {
        margin-bottom: 0;
    }

    ul {
        margin: 0 auto;
    }

    li, li p {
        color: #555;
        font-size: 1.2rem;
    }

    .flex {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0.25rem;
        flex-wrap: wrap;

        & > * {
            flex: 0 0 180px;
        }
    }
}

.home .hero {
    max-width: 100%;
    margin: 3rem 10% 2rem 10%;
}

.btn-accent {
    background: var(--accent-blue);
    color: var(--text-light);
    border: none;
    border-radius: 1rem;
    padding: 0.8rem 2.2rem;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s;
    margin: 0.25rem;

    &.secondary {
        background: var(--accent-mint);
        &:hover {
            background: color-mix(in srgb, var(--accent-mint) 80%, #FFF6 20%);
        }
    }

    &:hover {
        background: color-mix(in srgb, var(--accent-blue) 80%, #FFF6 20%);
    }
}

a.btn-accent {
    color: var(--text-light);

    &:hover {
        color: var(--text-light);
        color: #EFE;
    }
}

blockquote {
    background: #f9f9f9;
    border-left: 4px solid var(--primary-orange);
    padding: 0.5rem 1.5rem 0.2rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: #555;
}

h1 {
    color: var(--primary-orange);
}

.section { padding: 20px 10% 30px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }

.card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.info-baloon {
    background: var(--background);
    border: 1px solid var(--accent-mint);
    padding: 10px 20px;
    border-radius: 50px;
    &.info-secondary {
        border-color: var(--accent-blue);
    }
}

footer {
    text-align: center;
    color: var(--text-light);
    padding: 2rem 0 1rem 0;
    font-size: 1rem;
	margin: 0;
	background: var(--primary-orange-dark);
	min-height: 80px;
	height: 80px;
	position: relative;
	font-size: 0.8em;
	margin: 0;
	padding: 0px 15px;
	display: flex;
	gap: 2px;
	align-items: center;
	align-content: center;
	justify-content: center;
	flex-wrap: wrap;
	transition: all 0.5s linear;

    .center {
        flex-grow: 1;
        text-align: center;
    }

    .heart {
        cursor: pointer;
        display: inline-block;
        transition: all 0.3s linear;
        animation: heart-beat 2.5s infinite linear;
        transform-origin: center;
    }
}


ul.no-bullets {
    list-style: none;
    padding: 0 0 0 1.5rem;
    margin: 0;
}

@keyframes heart-beat {
    0%, 30%, 40%, 65%, 75%, 85%, 100% { transform: scale(1); }
    35%, 70%, 80% { transform: scale(1.4); }
}

.cake {
    width: 240px;
    height: 80px;
    margin: 80px auto 30px;
    position: relative;

    .base {
        height: 100%;
        width: 100%;
        position: relative;
        margin: auto;
        background-repeat: repeat;
        background-size: 100% 100%, 60px 100px;
        background-position: 28px 0;
        background-image: linear-gradient(
          transparent 50px,
          #e3a953 50px,
          #e3a953 60px,
          transparent 60px
        ),
        radial-gradient(circle at 30px 5px, #713e16 30px, #eac284 31px);
        border-radius: 6% 6% 0 0 / 20% 20% 0 0;
    }

    .candle {
        background: repeating-linear-gradient(
            45deg,
            #fd3018 0,
            #fd3018 5px,
            #ffa89e 5px,
            #ffa89e 10px
            );
        background-position: 0 0;
        height: 30px;
        width: 5px;
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        bottom: 100%;

        &:after {
            content: '';
            position: absolute;
            height: 16px;
            width: 16px;
            background-color: #ffee54;
            border-radius: 0 50% 50% 50%;
            transform: translateX(-50%) scale(0.5, 1) rotate(45deg);
            bottom: 32px;
            left: calc(50% + 0.5px);
            filter: drop-shadow(0px 2px 2px #F00C) drop-shadow(2px 2px 2px #FC0C) drop-shadow(0px 2px 5px #F90C);
        }
    }

    &.animation .base, & .base.animation {
        animation: rotate-cake 2s infinite linear;
    }

    &.animation .candle, & .candle.animation, & .candle.only-candle-animation {
        animation: rotate-candle 2s infinite linear;
    }

    &.animation .candle:after, & .candle.animation:after, & .candle.only-flame-animation:after {
        animation: cake-flame 5s linear infinite;
    }
}

@keyframes rotate-cake {
    0% {
        background-position: 60px 0;
    }
    100% {
        background-position: -60px 0;
    }
}

@keyframes rotate-candle {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 30px;
    }
}

@keyframes cake-flame {
    0%, 100% {
        bottom: 32px;
        transform: translateX(-50%) scale(0.5, 0.8) rotate(45deg);
        box-shadow: 2px 2px 10px rgba(255, 238, 84, 0.5);
        filter: drop-shadow(0px 2px 1px #F00C) drop-shadow(2px 2px 1px #FC0C);
    }
    50% {
        bottom: 34px;
        transform: translateX(-50%) scale(0.5, 1.2) rotate(35deg);
        filter: drop-shadow(0px 2px 2px #F00C) drop-shadow(2px 2px 2px #FC0C) drop-shadow(0px 2px 5px #F90C);
    }
}

.testimonials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    & > blockquote {
        flex: 1 0 350px;
        margin: 0.25rem 0.25rem;
        text-align: center;

        .title {
            font-style: normal;
            color: var(--accent-mint);
            font-size: 1.2em;
            font-weight: bold;
        }

        .role {
            font-style: normal;
            color: var(--accent-blue);
            font-size: 0.9em;
            font-weight: bold;
        }
    }
}


.event-item {
    padding: 1rem 1rem 4.5rem;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin: 1rem 0;
    position: relative;

    form {
        margin-top: 40px;
    }

    .btn-accent:not(.center) {
        position: absolute;
        right: 10px;
        bottom: 10px;
        color: var(--text-light);
        padding: 0.5rem 1.5rem;
        font-size: .9rem;
    }

    .btn-accent {
        font-weight: bold;
        border-radius: 0.75rem;
    }

    .btn-accent:hover {
        color: #EFE;
    }
}

.event-join h1 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--primary-orange);
}

fieldset.input-group {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    font-weight: normal;
    position: relative;
    padding: 2px;
    margin: 30px 0;
    /* border: var(--border-color) 1px solid; */
    border-radius: 8px;
    transition: all 0.3s ease;
    border: none;

    label {
        position: absolute;
        top: calc(-50% + 10px);
        left: 10px;
        font-weight: bold;
        padding: 0px 5px;
        /* border: var(--border-color) 1px solid; */
        border-radius: 8px;
        z-index: 10;
        background-color: var(--background);
    }

    &.total {
        margin: 5px 0 10px;
        padding: 15px 12px 13px;
        color: #C00;
        border: var(--border-color) 1px solid ;
        font-weight: bold;
        font-size: 1.1em;
        text-align: left;
    }

    input, select, textarea  {
        width: 100%;
        margin: -2px 0 -2px -2px;
        border: 0;
        z-index: 5;
        outline-style: none;
        padding: 12px 12px;
        width: calc(100% - 20px);
        border-radius: 7.5px;
        border: var(--border-color) 1px solid;
        background-color: transparent;
        font-family: 'Segoe UI', Arial, sans-serif;
        font-size: 16px;
        font-weight: normal;
        transition: all 0.3s ease;
    }

    select {
        width: calc(100% + 4px);
    }

    input:hover,
    select:hover,
    textarea:hover {
        border-color: var(--accent-mint);
        box-shadow: 0 0 2px var(--accent-mint);
        outline: none;
    }

    input:focus,
    select:focus,
    textarea:focus {
        border-color: var(--accent-mint);
        box-shadow: 0 0 8px var(--accent-mint), inset 0 0 4px var(--accent-mint);
        outline: none;
    }

    span.startAdornment {
        position: absolute;
        left: 10px;
        top: 13px;
    }

    input[type="tel"] {
        padding-left: 70px;
        width: calc(100% - 78px);
    }

    .input_total {
        font-weight: bold;
    }
}


.msgBox {
	margin: 30px auto 0px;
	padding: 15px 25px;
	padding-left: 45px;
    max-width: 900px;
	border-radius: 10px;
	overflow: hidden;
	font-weight: bold;
	text-align: left;

    &.no-icon {
        padding-left: 25px;
    }

    &:not(.no-icon):before {
        content: 'ⓘ';
        margin-left: -35px;
        margin-right: 8px;
    }

    &.success {
        color: #063;
        background: #6F9;
        border: #090 1px solid;
    }

    &.info {
        color: #40F;
        background: #9BF;
        border: #00F 1px solid;
    }

    &.notice {
        color: #630;
        background: #FC9;
        border: #960 1px solid;
    }

    &.warning {
        color: #904;
        background: #F99;
        border: #900 1px solid;
    }

    &.error {
        color: #C04;
        color: #904;
        background: #F99;
        border: #600 1px solid;
    }

    &.general {
        color: #630;
        background: #FDC;
        border: #A96 1px solid;
    }

    &.grey {
        color: #FFF;
        background: #333;
        border: #444 1px solid;
    }

    &.success:not(.no-icon):before {
        content: '✔';
    }

    &.success:not(.no-icon):before {
        content: '✔';
    }

    &.warning:not(.no-icon):before {
        content: '❌';
    }

    &.error:not(.no-icon):before {
        content: '❌';
    }
}


.center {
    text-align: center;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}


@media only screen and (max-width: 600px) {
    .hero {
        max-width: 90vw;
        padding: 1rem 1rem 1.5rem;
    }
}

@media only screen and (max-width: 600px) {
    header {
        &.open .toggleButton::before {
            font-size: 2.5rem;
            content: "✕";
        }

        .toggleButton {
            display: flex;

            &::before {
                content: "𝄘";
            }

            &:hover {
                background-color: var(--accent-mint);
                color: var(--text-dark);
            }
        }

        &:not(.open) nav {
            visibility: hidden;
        }

        nav {
            position: absolute;
            top: 90px;
            left: 0;
            height: 100vh;
            background-color: var(--primary-orange);

            .navigation {
                flex-direction: column;
            }
        }

        &.open nav .navigation li a {
            border: 1px solid var(--text-light);
            padding: 10px 20px;
            border-radius: 10px;
            margin: 5px 10px;
            min-width: 60vw;

            &:hover {
                background-color: var(--accent-mint);
                color: var(--text-dark);
            }
        }
    }
}

@media only screen and (min-width: 600px) {
    header .toggleButton {
        visibility: none;
    }
}

@media only screen and (max-width: 400px) {
    .hero {
        max-width: 85vw;
        padding: 1rem 1rem 1.5rem;
    }
}