html,body {
    /* background: #101010; */
    background: #f0f0f0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

*{
    box-sizing:border-box;
}

@font-face{
    font-family: "Otomanopee One";
    src: url("/public/font/OtomanopeeOne-Regular.ttf") format("truetype");
}
@font-face{
    font-family: "Roboto";
    src: url("/public/font/Roboto-Regular.ttf") format("truetype");
}

#test {
    font-family: Otomanopee One;
    color:#f0f0f0;
}

/* #name {
    letter-spacing: 10px;
} */


/* Boutons de menu */
:root {
    --clr-neon: hsl(317 100% 100%);
    --clr-focus: hsl(317 0% 90%);
    --clr-bg: hsl(323 21% 16%);
}

@media screen and (orientation: portrait) {
    :root
    {
       --translateY: -35vh;
    }
}
@media screen and (orientation: landscape) {
    .reflection-button
    {
        top: 50%;
        left: 50%;
        transform-origin: top left;
        /* transform: rotateZ(315deg); */
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.reflection-button {
    font-size: 2rem;
  
    z-index: 10;
    display: block;
    cursor: pointer;
    text-decoration: none;
    align-self: center;
    justify-self: center;
    text-align:center;
    color: var(--clr-neon);
    border: var(--clr-neon) 0.1em solid;
    padding: 0.25em 1em;
    border-radius: 0.25em;
  
    /* text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em currentColor; */
  
    /* box-shadow: inset 0 0 0.5em 0 var(--clr-neon), 0 0 0.5em 0 var(--clr-neon); */
  
    position: absolute;
}

.top-button {
    animation: topEnter 1s ease-in-out, topSpinAround 120s linear 1s infinite;
}

.left-button {
    animation: leftEnter 1s ease-in-out, leftSpinAround 120s linear 1s infinite;
}

.right-button {
    animation: rightEnter 1s ease-in-out, rightSpinAround 120s linear 1s infinite;
}

.bottom-button {
    animation: bottomEnter 1s ease-in-out, bottomSpinAround 120s linear 1s infinite;
}

.circle_container {
    animation: menuEnter 1s ease-in-out;
}
  
@keyframes menuEnter {
    from {
      transform: scale(0.01);
    }
    to {
      transform: scale(1);
    }
}
  
@media screen and (orientation: portrait) {
    @keyframes topEnter {
        from {
            transform: rotate(0deg) translateX(-50%) translateY(-50%) translateY(-50vw);
        }
        to {
            transform: rotate(360deg) translateX(-50%) translateY(-50%) translateY(-50vw);
        }
    }
    
    @keyframes topSpinAround {
        from {
            transform: rotate(0deg) translateX(-50%) translateY(-50%) translateY(-50vw);
        }
        to {
            transform: rotate(360deg) translateX(-50%) translateY(-50%) translateY(-50vw);
        }
    }
    
    @keyframes leftEnter {
        from {
            transform: rotate(-90deg) translateX(-50%) translateY(-50%) translateY(-50vw);
        }
        to {
            transform: rotate(270deg) translateX(-50%) translateY(-50%) translateY(-50vw);
        }
    }
    
    @keyframes leftSpinAround {
        from {
            transform: rotate(-90deg) translateX(-50%) translateY(-50%) translateY(-50vw);
        }
        to {
            transform: rotate(270deg) translateX(-50%) translateY(-50%) translateY(-50vw);
        }
    }
    
    @keyframes rightEnter {
        from {
            transform: rotate(90deg) translateX(-50%) translateY(-50%) translateY(-50vw);
        }
        to {
            transform: rotate(450deg) translateX(-50%) translateY(-50%) translateY(-50vw);
        }
    }
    
    @keyframes rightSpinAround {
        from {
            transform: rotate(90deg) translateX(-50%) translateY(-50%) translateY(-50vw);
        }
        to {
            transform: rotate(450deg) translateX(-50%) translateY(-50%) translateY(-50vw);
        }
    }
    
    @keyframes bottomEnter {
        from {
            transform: rotate(-180deg) translateX(-50%) translateY(-50%) translateY(-50vw);
        }
        to {
            transform: rotate(180deg) translateX(-50%) translateY(-50%) translateY(-50vw);
        }
    }
    
    @keyframes bottomSpinAround {
        from {
            transform: rotate(-180deg) translateX(-50%) translateY(-50%) translateY(-50vw);
        }
        to {
            transform: rotate(180deg) translateX(-50%) translateY(-50%) translateY(-50vw);
        }
    }
}
  
@media screen and (orientation: landscape) {
    @keyframes topEnter {
        from {
            transform: rotate(0deg) translateX(-50%) translateY(-50%) translateY(-35vh);
        }
        to {
            transform: rotate(360deg) translateX(-50%) translateY(-50%) translateY(-35vh);
        }
    }
    
    @keyframes topSpinAround {
        from {
            transform: rotate(0deg) translateX(-50%) translateY(-50%) translateY(-35vh);
        }
        to {
            transform: rotate(360deg) translateX(-50%) translateY(-50%) translateY(-35vh);
        }
    }
    
    @keyframes leftEnter {
        from {
            transform: rotate(-90deg) translateX(-50%) translateY(-50%) translateY(-35vh);
        }
        to {
            transform: rotate(270deg) translateX(-50%) translateY(-50%) translateY(-35vh);
        }
    }
    
    @keyframes leftSpinAround {
        from {
            transform: rotate(-90deg) translateX(-50%) translateY(-50%) translateY(-35vh);
        }
        to {
            transform: rotate(270deg) translateX(-50%) translateY(-50%) translateY(-35vh);
        }
    }
    
    @keyframes rightEnter {
        from {
            transform: rotate(90deg) translateX(-50%) translateY(-50%) translateY(-35vh);
        }
        to {
            transform: rotate(450deg) translateX(-50%) translateY(-50%) translateY(-35vh);
        }
    }
    
    @keyframes rightSpinAround {
        from {
            transform: rotate(90deg) translateX(-50%) translateY(-50%) translateY(-35vh);
        }
        to {
            transform: rotate(450deg) translateX(-50%) translateY(-50%) translateY(-35vh);
        }
    }
    
    @keyframes bottomEnter {
        from {
            transform: rotate(-180deg) translateX(-50%) translateY(-50%) translateY(-35vh);
        }
        to {
            transform: rotate(180deg) translateX(-50%) translateY(-50%) translateY(-35vh);
        }
    }
    
    @keyframes bottomSpinAround {
        from {
            transform: rotate(-180deg) translateX(-50%) translateY(-50%) translateY(-35vh);
        }
        to {
            transform: rotate(180deg) translateX(-50%) translateY(-50%) translateY(-35vh);
        }
    }
}

@media screen and (orientation: portrait) {
    .reflection-button
    {
        top: 50%;
        left: 50%;
        transform-origin: top left;
    }
}
@media screen and (orientation: landscape) {
    .reflection-button
    {
        top: 50%;
        left: 50%;
        transform-origin: top left;
        /* transform: rotateZ(315deg); */
    }
}
  
/* .reflection-button::before {
    pointer-events: none;
    content: "";
    position: absolute;
    background: var(--clr-neon);
    top: 120%;
    left: 0;
    width: 100%;
    height: 100%;

    transform: perspective(1em) rotateX(40deg) scale(0.7, 0.35);
    filter: blur(1em);
    opacity: 0.7;
} */
  
.reflection-button::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 0 2em 0.1em var(--clr-focus);
    opacity: 0;
    background-color: var(--clr-focus);
    z-index: -1;
    transition: opacity 100ms linear;
}

.reflection-button:hover,
.reflection-button:focus {
    color: var(--clr-bg);
    text-shadow: none;
}

.reflection-button:hover::before,
.reflection-button:focus::before {
    opacity: 1;
}
.reflection-button:hover::after,
.reflection-button:focus::after {
    opacity: 1;
}

/* MENU */
#container {
  
    width:100%;
    height:100%;
    
    display:flex;
    justify-content:center;
    align-items:center;
    
}

/* Cercle cental */
/* Main Container -  this controls the size of the circle */
@media screen and (orientation: portrait) {
    .circle_container
    {
        width : 75vw;
        height : 75vw;
        margin : 0;
        padding : 0;
    /*	border : 1px solid red; */
    }
}
@media screen and (orientation: landscape) {
    .circle_container
    {
        width : 50vh;
        height : 50vh;
        margin : 0;
        padding : 0;
    /*	border : 1px solid red; */
    }
}

/* Circle Main draws the actual circle */
.circle_main
{
	width : 100%;
	height : 100%;
	border-radius : 50%;
	border : 2px solid white;	/* can alter thickness and colour of circle on this line */
	margin : 0;
	padding : 0;
}

/* Circle Text Container - constrains text area to within the circle */
.circle_text_container
{
	/* area constraints */
	width : 80%;
	height : 80%;
	max-width : 80%;
	max-height : 80%;
	margin : 0;
	padding : 0;

	/* some position nudging to center the text area */
	position : relative;
	left : 15%;
	top : 10%;
	
	/* preserve 3d prevents blurring sometimes caused by the text centering in the next class */
	transform-style : preserve-3d;
	
	/*border : 1px solid green;*/
}

/* Circle Text - the appearance of the text within the circle plus vertical centering */
.circle_text
{
	/* change font/size/etc here */
	font: 150% "Tahoma", Arial, Serif;	
	text-align : left;
    color: white;
	
	/* vertical centering technique */
	position : relative;
	top : 50%;
	transform : translateY(-50%);
}