:root {
    --item-count: 6;
    --item-size: 100px; /* Also edit the SVG curve if you change this! */
    --angle-step: calc(360deg / var(--item-count));
    --angle-offset: calc(90deg - var(--angle-step));
    --radius: 180px;
    --box-size: 480px;
}

html {
    height: 100%;
}

body {
    background-color: #eee;
    color: black;
    font-family: 'Urbanist', sans-serif;
    width: 100%;
    height: 100%;
    margin: 0;
    background: #596778;
    color: #EEEEEE;
    text-align: center;
    display: flex;
    flex-direction: column;
}

header {
    text-align: center;
    width: 100%;
    margin-bottom: 15px;
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,1) 100%);
}
header h1 {
    margin-bottom: 5px;
    font-family: "Mochiy Pop P One", sans-serif;
    font-weight: 400;
    font-style: normal;
}
header h2 {
    margin-top: 0;
}

a {
    color: inherit;
}

nav {
    width: var(--box-size);
    height: var(--box-size);
    margin: auto;
    border-radius: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 50%);
}

.bubble {
    display: block;
    border-radius: 100%;
    box-sizing: border-box;
    position: absolute;
    margin-left: calc(var(--box-size) / 2 - var(--item-size) / 2);
    margin-top: calc(var(--box-size) / 2 - var(--item-size) / 2);
    width: var(--item-size);
    height: var(--item-size);
    box-shadow: 10px 10px 10px black;
    background-size: cover;
    display: flex;
}
.bubble > div {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
    display: flex;

    opacity: 0;
    transition: opacity 0.15s;
}
.bubble svg.desc {
    position: absolute;
    width: var(--item-size);
    height: var(--item-size);
    border-radius: 100%;
    fill: white;
    font-weight: bold;
    scale: 0.9;

    opacity: 0;
    transition: opacity 0.15s;

    textPath {
        text-anchor: middle;
    }
}

.bubble:hover {
    scale: 1.3;
    transition: 0.15s;
}
.bubble:hover > div {
    opacity: 1;
    transition: 0.15s;
}
.bubble:hover svg.desc {
    opacity: 1;
    transition: 0.15s;
}

.main {
    --item-size: 100px;
    box-shadow: none;
    scale: 1;
    transition: 1.5s;
    border: 3px solid #194488;
    border-radius: 100%;
}

.icon {
    font-size: 2em;
    color: #EEE;
    margin: auto;
}

svg#curve {
    display: none;
}

nav.loaded a {
    translate:
        calc(var(--radius) * cos(var(--angle-step) * var(--index) - var(--angle-offset)))
        calc(var(--radius) * sin(var(--angle-step) * var(--index) - var(--angle-offset)))
    ;
    transition: 0.5s;
}

/* You also need to change the --item-count variable at the top of the file. */
nav a:nth-child(1) {
    --index: 1;
}
nav a:nth-child(2) {
    --index: 2;
}
nav a:nth-child(3) {
    --index: 3;
}
nav a:nth-child(4) {
    --index: 4;
}
nav a:nth-child(5) {
    --index: 5;
}
nav a:nth-child(6) {
    --index: 6;
}