@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap');

:root {
    --header-height: 60px;
    --color-bg: #f3f6fb;
    --color-card: #ffffff;
    --color-text: #333333;
    --color-link: #1a73e8;
    --color-link-hover: #1558b0;
    --color-link-disabled: #888888;
    --color-accent: #78ceff;
    --color-button-hover: rgba(0, 0, 0, 0.05);
    --header-shadow: 0 0.5rem 1.6rem rgba(11, 30, 60, 0.06);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    color: var(--color-text);
    font-size: 2svh;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-style: normal;
}

body {
    display: grid;
    grid-template-rows: var(--header-height) minmax(0, 1fr);
    grid-template-areas:
        "header"
        "main";
    background-color: var(--color-bg);
    position: relative;
}

#header-container {
    grid-area: header;
    height: var(--header-height);
    width: 100%;
    display: grid;
    grid-template-columns: minmax(20px, 2%) minmax(120px, 10%) minmax(0, 80%);
    grid-template-areas:
        ". logo .";
    background-color: white;
    align-items: center;
    box-shadow: var(--header-shadow);
    z-index: 1000;
}

#header-logo {
    grid-area: logo;
    display: block;
    width: 100%;
    height: 100%;

    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

#main-container {
    grid-area: main;
}