:root {
    --foreground-colour: #f9f9f9;
    --background-colour: #131414;
    --gradient-primary: rgb(31, 30, 30);
    --gradient-transparent: #000000; 
    --font-size: 24px;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: 
        repeating-conic-gradient(var(--gradient-primary) 0.000095%, var(--gradient-transparent) .0005%, var(--gradient-transparent) .005%, var(--gradient-transparent) .0005%), 
        repeating-conic-gradient(var(--gradient-primary) 0.00001%, var(--gradient-transparent) .00009%, var(--gradient-transparent) .00075%, var(--gradient-transparent) .000025%);
    font-family: "Gaegu", sans-serif;
    font-size: var(--font-size);
    color: var(--foreground-colour);
    text-shadow: 0 0 1px var(--foreground-colour), 0 0 2px var(--foreground-colour);
}

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    font-family: "Gaegu", sans-serif;
    color: var(--foreground-colour, #f9f9f9);
    background: var(--background-colour, #131414);
    user-select: none;
}

p {
    margin: 0;
}

header {
    position: relative;
    z-index: 10;
    text-align: center;
}

#cursor-controls {
    gap: 1rem;
    font-size: 2rem;
    cursor: pointer;
}

.icon {
    position: absolute;
    font-size: 3rem;
    cursor: grab;
    transition: transform 0.1s;
}

#magnifier, #controller {
    cursor: grab;
    position: relative;
    font-size: 2rem;
    z-index: 100;
}

#cursor-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    position: relative;
    z-index: 10;
}

h1 {
    margin: 0;
}

.icon.small {
  width: 50px;
  height: 50px;
}

.icon.medium {
  width: 80px;
  height: 80px;
}

.icon.large {
  width: 120px;
  height: 120px;
}