html, body
{
    height: 100%;
    margin:0;
    color: #FFFFFF;
}

.Header
{
    justify-self: flex-start;
    margin-bottom: 15vw;
}

.MenuContainer
{
     display: flex; flex-flow: column nowrap;
     position: relative;
     min-width: 70vw;
     min-height: 20vw;
     align-items: center;
     justify-content: center;
     margin: 5vw;
     color: #5A5A5A;
     #border: 2px outset #FFFFFF;
     z-index: 50;
}
.MenuContainer a
{
    text-decoration: none;
}

.CircleOne, .CircleTwo, .CircleThree, .CircleFour
{
     display: flex; flex-flow: column nowrap;
     position: absolute;
     aspect-ratio: 1/1;
     width: 40vw;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     opacity: 0.8;
     
     cursor: pointer;
     transition: transform 0.3s ease;
}
.CircleOne:hover, .CircleTwo:hover, .CircleThree:hover, .CircleFour:hover
{
    box-shadow: 0 4px 8px #FFFFFF;
    z-index: 8;
}
 
.CircleOne
{
     --offsetX: -40%;
     --offsetY: -20%;
     transform: translate(var(--offsetX), var(--offsetY));
     z-index: 6;
     background: linear-gradient(-135deg, #3A3A3A, #1A1A1A);
}
.CircleTwo
{
     background-color: #1A1A1A;
     z-index: 4;
     --offsetX: 30%;
     --offsetY: -20%;
     transform: translate(var(--offsetX), var(--offsetY));
}
.CircleThree
{
    background: linear-gradient(135deg, #3A3A3A, #1A1A1A);
    --offsetX: -40%;
    --offsetY: 70%;
    transform: translate(var(--offsetX), var(--offsetY));
    z-index: 2;
}
.CircleFour
{
    background: linear-gradient(135deg, #3A3A3A, #1A1A1A);
    --offsetX: 30%;
    --offsetY: 70%;
    transform: translate(var(--offsetX), var(--offsetY));
    z-index: 2;
}

.Container
{
    display: flex; flex-flow: column nowrap;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    background:
    radial-gradient(circle at 70% 25%, rgba(106, 76, 147, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 60% 40%, rgba(76, 53, 117, 0.3) 0%, transparent 60%),
    radial-gradient(ellipse at 65% 35%, #3d2a5c 0%, #2a1b3d 15%, #1a0b2e 35%, #0f051a 100%);
    min-height: 100vh;
    #color: #2A2A2A;
    padding-top: 5%;
    padding-bottom: 30vw;
}   

dkfkjvndfkjnvdf