* {
    box-sizing: border-box;
    margin: 0;
    --primary: #fea130;
    --primary-container: #ffc47d;
    --secondary: #33536a;
    --secondary-container: #5084a9;
    --third: #386665;
    --third-container: #bbecea;
    --error: #ba1a1a;
    --error-container: #ffdad6;
    --surface: #3a3e40;
    --bg-color: #f9faf0;
    --container: #edefe4;

    --lighter-current: color-mix(in srgb, currentColor 30%, #fff);
}

.sp {
    display: none;
}

.pc {
    display: block;
}

body {
    display: grid;
    grid-template:
    'header header' 80px
    'main right-column' auto
    'footer footer' 80px / auto 400px;
}

header {
    grid-area: header;
    background-color: var(--primary-container);
    display: grid;
    grid-template: 
    'logo header-links' 1fr / 300px auto;
    position: sticky;
    top: 0;
}

.logo source {
    display: block;
    max-width: 100%;
    height: 80px;
}

.header-links {
    grid-area: header-links;
    gap: 10px;
    display: flex;
    justify-content: flex-end;
    padding: 8px;
}

.header-links a {
    text-decoration: none;
    color: inherit;
    padding: 15px;
    border: 1px solid var(--secondary);
    border-radius: 4px;
    margin-top: auto;
    margin-bottom: auto;
    background-color: var(--primary-container);
    transition: background 0.2s;
}

.header-links a:hover {
    background-color: var(--primary);
}

main {
    min-height: calc(100vh - 160px);
    grid-area: main;
    padding: 20px;
    background-color: var(--bg-color);
}

.event-list {
    padding: 20px;
    background-color: var(--bg-color);
    border: 2px solid var(--secondary);
    border-radius: 4px;
    margin: 20px;
}

.search-results {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: var(--container);
    border: 2px solid var(--secondary);
    border-radius: 4px;
    margin: 20px;
}

.google-calendar-link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    padding: 0px 15px;
    border: 1px solid var(--secondary);
    border-radius: 4px;
    margin-top: auto;
    margin-bottom: auto;
    background-color: var(--primary-container);
    transition: background 0.2s;
}

.google-calendar-link:hover {
    background: var(--third-container);
}

.event-add {
    padding: 20px;
    background-color: var(--bg-color);
    border: 2px solid var(--secondary);
    border-radius: 4px;
    margin: 20px;
}

aside#right {
    grid-area: right-column;
    background-color: var(--secondary-container);
    padding: 20px;
}
footer {
    grid-area: footer;
    background-color: var(--primary-container);
}

@media screen and (max-width: 480px) {
    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    body {
        grid-template:
        'header' 60px
        'main' auto
        'footer' 60px / 1fr;
    }

    header {
        grid-area: header;
        background-color: var(--primary-container);
        grid-template:
        'logo header-links' 60px / 60px auto;
        padding: 0 10px;
    }

    .header-links {
        grid-area: header-links;
        align-items: flex-end;
        gap: 6px;
        padding: 4px 0;
    }

    .header-links a {
        padding: 4px;
        font-size: 15px;
    }

    main {
        padding: 4px;
    }

    .event-list,
    .search-results,
    .event-add {
        margin: 10px 0;
        padding: 10px;
    }

    aside#right {
        display: none;
    }

    footer {
        padding: 10px;
    }
}