* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to bottom right, rgba(221, 14, 14, 0.945), rgba(190, 160, 22, 0.945));
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.container {
    width: 90%;
    max-width: 600px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.logo {
    width: 100%;
    margin-block: 20px;
    text-align: center;
    color: #00000097;
    /*position: relative;*/
}

.logo h1 {
    animation: fadeIn 2s;
}

.logo .icons {
    width: 100%;
    margin-inline: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.fa-guitar {
    animation: fromLeftBottom 2s;
}

.fa-drum {
    animation: fromBottom 2s;
}

.fa-music {
    animation: scaleIn 2s;
}

.fa-radio {
    animation:  fromTop 2s;
}

.fa-microphone {
    animation: fromRightTop 2s;
}

.logo i {
    font-size: 24px;
    color: #00000097;
}

.logo img {
    max-width: 100%;
}

.board {
    width: 100%;
    height: 70vh;
    display: flex;
    flex-direction: column;
    margin: auto;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    perspective: 1000;
}

.card {
    width: calc(25% - 10px);
    height: calc(25% - 10px);
    margin: 5px;
    position: relative;
    transform: scale(1);
    transform-style: preserve-3d;
    transition: transform .5;
    transition: transform 0.25s linear;
    /*moving slowly sideways*/
}

.card img:hover {
    cursor: pointer;
}

.card:active {
    transform: scale(.97);
    transition: transform .2s;
}

.card.flip {
    transform: rotateY(180deg);
    transition: transform 0.25s linear;
    /*moving slowly sideways*/
}

.card .front,
.card .back {
    width: 100%;
    height: 100%;
    padding: 3px;
    position: absolute;
    /*user-select: none;
    pointer-events: none; */
    border-radius: 5px;
    background: rgba(243, 13, 13, 0.25);
    box-shadow: 5px -5px 5px rgb(56, 3, 3);
    backface-visibility: hidden;

}

.card .front {
    transform: rotateY(180deg);
}

@keyframes fromLeftBottom {
    0% {
        translate: -200% 300%;
        opacity: 0;
    }

    100% {
        translate: 0 0;
        opacity: 1;
    }
}
@keyframes fromBottom {
    0% {
        translate: -50% 200%;
        opacity: 0;
    }

    100% {
        translate: 0 0;
        opacity: 1;
    }
}
@keyframes scaleIn {
    0% {
       scale: 0;
       opacity: 0;
    }

    100% {
        scale: 1;
        opacity: 1;
    }
}
@keyframes fromTop {
    0% {
        translate: 50% -200%;
        opacity: 0;
    }

    100% {
        translate: 0 0;
        opacity: 1;
    }
}
@keyframes fromRightTop {
    0% {
        translate: 200% -300%;
        opacity: 0;
    }

    100% {
        translate: 0 0;
        opacity: 1;
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    70% {
        opacity: .6;
    }

    100% {
        opacity: 1;
    }
}