:root {
    --color-purple: #7400C6;
    --color-text: #000000;
    --color-border: #c9c8c8;
    --color-white: #FFFFFF;
    --color-gray: #5b5a5a;
    --small-space: 20px;
    --big-space: 45px;
    --small-font: 16px;
    --midium-font: 18px;
    --big-font: 24px;
    --thin-font: 500;
    --semi-bold-font: 700;
    --bold-font: 900;
    --text-shadow: 0px 5px 5px rgba(0,0,0,0.5);
    --line-height: 2;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.header__logo:focus-visible,
.header__nav-link:focus-visible,
.work-card:focus-visible,
.contact-btn:focus-visible,
.top-link:focus-visible {
    outline: 1px solid var(--color-purple);
    outline-offset: 2px;
    border-radius: 6px;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--color-text);
    background-color: var(--color-white);
    line-height: var(--line-height);
    -webkit-font-smoothing: antialiased;
    padding: 60px 40px;
    width: 100%;
    max-width: 1360px;
    margin-inline: auto;
}

footer {
    padding-bottom: var(--big-space);
}

.divider {
    border-top: 1px solid var(--color-border);
    margin-top: var(--big-space);
    margin-bottom: var(--big-space);
}