:root {
    --ji-neutral: rgb(128, 128, 128);
    --ji-neutral-dark: rgba(0, 0, 0, 0.25);
    --ji-neutral-light: rgba(255, 255, 255, 0.12);
    --ji-action-dark: rgb(130, 64, 0);
    --ji-action: rgb(224, 110, 0);
    --ji-action-transparent: rgba(255, 165, 78, 0.2);
    --ji-action-light: rgb(255, 165, 78);
    --ji-currency-soft: rgb(238, 193, 143);
    --ji-currency-hard: rgb(97, 216, 255);
    --ji-tier-common: rgb(180, 180, 180);
    --ji-tier-rare: rgb(215, 150, 255);
    --ji-tier-legendary: rgb(255, 200, 0);
}

@font-face {
    font-family: 'FredokaLight';
    src: url('../fonts/Fredoka-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'FredokaMedium';
    src: url('../fonts/Fredoka-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'FredokaRegular';
    src: url('../fonts/Fredoka-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'FredokaSemiBold';
    src: url('../fonts/Fredoka-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'FredokaBold';
    src: url('../fonts/Fredoka-Bold.ttf') format('truetype');
}

body {
    margin: 0;
    padding: 20px;
    font-family: Arial, sans-serif;
    font-family: 'FredokaRegular', sans-serif; /* fallback to sans-serif */
    background: #333;
    color: #DDD;
}

#logo {
    width: 100%;
    height: auto;
    background-image: url('../images/JigsawIsland.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* maybe set a fixed height, or let it grow */
    height: 100px;
    display: block;
    margin-bottom:20px;
}

header {
    text-align: center;
    padding: 60px 20px;
}

h1 {
    margin-bottom: 10px;
    color: var(--ji-action-light);
}

.button {
    display: inline-block;
    padding: 12px 20px;
    background: var(--ji-action);
    color: white;
    border-radius: 10px;
    text-decoration: none;
    font-size: 18px;
}

.button:hover {
    background: var(--ji-action-light);
    color:white;
}

footer {
    margin-top: 80px;
    text-align: center;
    opacity: 0.7;
}

a:link {
    color: #38b2ff;
    text-decoration: none;
}

/* Visited links */
a:visited {
    color: #ca63ff;
}

/* Hover state */
a:hover {
    color: #ca63ff;
    text-decoration: underline;
}

/* Active (mouse down) */
a:active {
    color: #ca63ff;
}