a{
   
    transition: color 0.5s;
    font-size: 1rem;
    color: #ff1ae1;
    font-size: 1.5rem;
    font-weight: 100;
    
}
nav{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  
  margin-top: 10px;

}


:root{
    --dark-color:#994301;
    --light-color:#d88c28d0;
    --light-color2:#f7cc95d0;
} 
svg{
    cursor: pointer;
}

#capy3{
    fill: var(--dark-color);
}

#capy2{
    fill: var(--light-color2);

}

#capy1{
    fill: var(--light-color);
}

#capy3,
#capy2,
#capy1 {
    transition: all 1s ease;
}

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


#capy3{
   transform: translateX(-100%)
}

svg:hover #capy2{
    transform: translateX(-30%);
    opacity: 100;
}
svg:hover #capy3{
    transform: translateX(0%);
    opacity:100;
}
svg:hover #capy1{
    transform: translateX(20%);
    opacity: 100;

}


body{
    background-color: black;
}

h1{
    color: aliceblue;
    font-family: 'Times New Roman', Times, serif;
}