/* reset */
:root {
    --green-color: #00FF91;
    --purple-color: #DB1BB2;
    --color-theme: #00e897;
    --A-background: #3f3f3f;
    --B-background: #7f7f7f;
    --Letters: #FFFFFF;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    background-color: var(--A-background);
    font-size: 24px;
    height: 100%;
    scroll-behavior: smooth;
    font-family: Iceland;
}
/* reset */
a{
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
}
h1, h2, h3, p{
    color: rgb(255, 255, 255);
}
p{
    font-size: 1.2rem;
}
h1{
    font-size: 4rem;
    
}
h2{
    font-size: 3rem;
    text-align: center;}
h3{
    font-size: 2rem;
    text-align: center;
    margin: 2rem 0 2rem 0;
}
/* header */
header {
    text-align: center;
    background-color: var(--color-theme);
    width: 100%;
    margin: auto;
    padding: 5px 0px 5px 0px;
    z-index: 10;
}
header nav{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: .3rem;
    padding:0 0 1.5rem 0;
}
header a {
    color: white;
    font-size: 1.25rem;
    text-decoration: none;
    text-align: center;
    margin: 0;
    padding: .2rem;
    position: relative;
}
/* header */
/* main */
main{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(1fr));
    grid-gap: 1.5rem ;
    width: 60vw;
    min-width: 10rem;
    margin: auto;    
    padding: 3rem 0 0 0;
}
section{
    background-color: var(--B-background);
    border: none;
    border-radius: 15px;
    width: 100%;
    padding: 0 3rem 4rem 3rem;     
    margin: auto;
}
div{
    text-align: center;
    margin: auto;
    width: 100%;
}
/* main */
/* footer */
footer{
    margin: auto;
    padding: 3rem 0 4rem 0;
}
/* footer */
/* Button */
#color-section{
    padding: .5rem;
}
#button-grid{
    margin: auto;
}
button{
    height: 2.25rem;
    width: 2.25rem;
    text-align: center;
    display: inline-block;
    border: none;
    border-radius: 0.5rem;
    margin: auto;
    cursor: pointer;
}
#Btn_green{
    background-color: #00e897;
}
#Btn_orange {
    background-color: #e78b12;
}
#Btn_purple {
    background-color: #9510e8;
}
#Btn_pink {
    background-color: #e605ed;
}
#Btn_red {
    background-color: #d81647;
}
#Btn_blue {
    background-color: #1040d0;
}
#Btn_yellow {
    background-color: #eecc22;
}
#Btn_aqua {
    background-color: #1ad6dc;
}
/* Button */
/* animation */
.Box{
    background-color: var(--color-theme);
    border-radius: 25px;
    border: none;
    height: 7.5rem;
    width: 7.5rem;
    margin: auto;
}
#box1:hover{
    transform: rotatex(360deg);
    transition: 2s ease;
}
#box2:hover{
    transform: rotatey(360deg);
    transition: 2s ease;
}
#box3:hover{
    transform: rotatez(360deg);
    transition: 2s ease;
}
#box4:hover{
    transform: translatex(75px);
    transition: 2s ease;
}
#box5:hover{
    transform: translatey(75px);
    transition: 2s ease;
}
#box6:hover{
    transform: scale(1.2);
    transition: 2s ease;
}
#box7:hover{
    transform: scalex(1.2);
    transition: 2s ease;
}
#box8:hover{
    transform: scaley(1.2);
    transition: 2s ease;
}
#box9:hover{
    transform: matrix3d(
    0.7, 0.1, 0.7, 0,
    -0.6, 0.7, 0.2, 0,
    -0.5, -0.8, 0.7, 0,
    10, 10, 0, 1
    );
    transition: 2s ease; 
}
#cube{
    font-size: 4em;
    width: 2em;
    margin: 1.5em auto;
    transform-style: preserve-3d;
    transform: rotateX(-15deg) rotateY(30deg);
    height: 7.5rem;
    width: 7.5rem;
    margin: auto;
    z-index: 1;
}
#cube:hover{
    transform: rotateX(45deg) rotateY(45deg);
    transition: 2s ease; 
}
.side {
    position: absolute;
    width: 2em;
    height: 2em;
    background: rgba(100,100,100,0.3);
    border: 1px solid var(--color-theme);
    text-align: center;
    line-height: 2em;
}
.front {transform: translateZ(1em);}
.top {transform: rotateX(90deg) translateZ(1em);}
.right {transform: rotateY(90deg) translateZ(1em);}
.left {transform: rotateY(-90deg) translateZ(1em);}
.bottom {transform: rotateX(-90deg) translateZ(1em);}
.back {transform: rotateY(-180deg) translateZ(1em);}

#KeyframeBox:hover {
    animation: bounce 1s infinite;
}

@keyframes bounce {
  0% {
    transform: translateY(0); /* At the start */
  }
  50% {
    transform: translateY(-50px); /* Halfway through, move up */
  }
  100% {
    transform: translateY(0); /* At the end, return to start */
  }
}
/* animation */
/* svg */
svg {
    cursor: pointer;
    margin: auto;
}

#green-group {
    fill: var(--green-color);
}

#purple-group {
    fill: var(--purple-color);
}

#green-player,
#purple-player,
#purple-player2 {
    transition: 0.5s ease;
}

#purple-player {
    transform: translateX(-100%);
}

svg:hover #green-player {
    transform: translateX(20%);
}

svg:hover #purple-player2 {
    transform: translateX(40%);
    opacity: 0;
}

svg:hover #purple-player {
    transform: translateX(0%);
    opacity: 0.75;
}
/*svg*/