:root {
    /* test code */
    /* --bg: #fc4646; */
    /* --header-bg: greenyellow; */
    /* --footer-bg: skyblue; */
    
    /* bg-color */
    --tip-bg: #f6f6f6; /* test */
    --card-bg: #f6f6f666; /* test */
    --dark-card-bg: #00000066; /* test */

    /* color */
    --main-color: #b46e6e;
    --point-color: #eeeeee;
    --dot-color: #eeeeee;

    /* line-color */
    --line: purple; /* test */

    /* text-color */
    --logo-text: orange; /* test */
    --tip-text: #b46e6e; /* test */
    --main-text: #b46e6e; /* test */

    /* size */
    --max-width: 600px;
    --header-h: 8dvh;
    --footer-h: 6dvh;
    --moon-icon-h: clamp(20px, 6dvh, 40px);

    /* text-sixe */
    --header-font: clamp(14px, 2.5dvh, 25px);
    --footer-font: clamp(12px, 1.8dvh, 20px);
    --font-xs: clamp(12px, 2dvh, 14px); /* test */
    --font-sm: clamp(14px, 2.5dvh, 16px); /* test */
    --font-md: clamp(16px, 3dvh, 18px); /* test */
}

body {
    height: 100dvh;

    display: flex;
    flex-direction: column;

    font-family: Arial, sans-serif;

    /* test code */
    /* background-color: var(--bg); */

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    background-image: url(../assets/background_wide.jpeg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* header */
#header {
    height: var(--header-h);
    padding: 8px 16px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    /* test code */
    /* border-bottom: 1px solid var(--line); */
    /* background-color: var(--header-bg); */
}

#header a {
    font-size: var(--header-font);
    text-decoration: none;
    color: var(--logo-text);
}

/* .header-logo img {
    height: 3.5dvh;
} */

.moon-hover img {
    height: var(--moon-icon-h);
}

.moon-icon-tip,
.moon-hover:hover .moon-icon-tip {
    width: fit-content;
    height: fit-content;

    padding: 2dvh;

    top: 3.5dvh;
    right: 4dvh;

    color: var(--tip-text);
    background-color: var(--tip-bg);
    border-radius: 10px;
}

.moon-icon-tip span {
    white-space: nowrap;
}

/* hover event */
.moon-hover {
    position: relative;
}

.moon-icon-tip {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.moon-icon-tip::before {
    position: absolute;
}

.moon-hover:hover .moon-icon-tip {
    opacity: 1;
    transition-duration: 0.3s;
}


/* footer */
#footer {
    height: var(--footer-h);

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: var(--footer-font);

    /* test code */
    /* border-top: 1px solid var(--line); */
    /* background-color: var(--footer-bg); */
}


/* main */
#main {
    flex: 1;
    
    width: 100%;
    max-width: var(--max-width);

    /* margin: auto; */
    margin-left: auto;
    margin-right: auto;

    overflow-y: auto;

    display: flex;
    flex-direction: column;
}

/* field */
.field {
    display: flex;
    flex-direction: column;

    gap: 6px;
}

.field input {
    padding: 6px 4px;

    border: none;
    border-bottom: 1px solid var(--main-color);

    background:transparent;
}

.field input:focus {
    outline: none;
    border-bottom: 2px solid var(--main-color);
}

.form-btn {
    margin-top: 1dvh;
    padding: 12px;

    text-align: center;
    text-decoration: none;

    border-radius: 10px;

    color: var(--point-color);
    background-color: var(--main-color);
}

.menu {
    margin: 2dvh;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 10px;
}

.menu-btn {
    width: 20dvw;

    padding: 1dvh 1dvh;

    display: flex;
    justify-content: center;

    font-size: var(--font-md);
    text-decoration: none;

    color: var(--main-color);

    border-bottom: 1px solid var(--main-color);
}