.grid
{
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(3, auto);

}

.grid a
{
    color: yellow;
}

.grid :hover
{
    color: indigo;
    background-color: yellow;
}

.site-nav
{
    display: flex;
    background-color: indigo;
    padding: .5em;
    border-radius: .2em;
    list-style-type: none;
}

.site-nav > li > a
{
    color: yellow;
    font-size: large;
    padding: .5em 1em;
}

.site-nav > li :hover
{
    color: indigo;
    background-color: yellow;
}

.mtp
{
    display: inline-flex;
    flex-wrap: wrap;
    position: relative;
    perspective: 500px;
    margin: 0.5rem;
}

.mtp-item
{
    display: inline-flex;
    position: relative;
    margin-left: 2rem;
    margin-right: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    animation: fly-in1 0.5s ease-in;

}

p
{
    color: yellow;

}

.mtp-item :hover
{
    animation: fly-in2 1s ease-in;
    animation-fill-mode: forwards;
}
@keyframes fly-in1
{
    0%
    {
        transform: translateZ(-800px) rotateY(90deg);
    }

    50%
    {
        transform: translateZ(-200px) rotateY(45deg);
    }

    100%
    {
        transform: translateZ(0) rotateY(0deg);
    }

}

@keyframes fly-in2
{
    0%
    {
        transform: rotateY(0deg) scale(1);
    }
    
    75%
    {
        transform: rotateZ(360deg) scale(2.5);
    }
    
    100%
    {
        transform: rotateZ(360deg) scale(1.5);
    }
    
}