body {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    height: 100vh;
    width: 100%;
    gap: 100px;
    position: relative;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(
    to right,#ff0000,#ff3300,#ff6600,#ff9900,#ffcc00,#ffff00,#99ff00,#00cc00,#00cc99,#00ccff,#0099ff,#0066ff,#3333ff,#6600cc,#990099);
}

h1 {
    margin: 0;
    font-size: 7vw;
}

.box{
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    background-color: #ffffff22;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    gap: 5px;
    border-radius: 100%;
    height: 40vw;
    width: 40vw;
    min-width: 400px;
    min-height: 400px;
    box-shadow: 0 0 1vw 0#000000, inset 0 0 3vw 0#ffffff;
}