$background-color: #252422;
$main-color: #CCC5B9;
$accent-color: #EB5E28;

.info-page {
    width: 96%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .info-page__dev-card {
        width: 300px;
        height: 400px;
        perspective: 1000px;
        border-radius: 15px;
        z-index: 1;
    
        .dev-card__inner {
            position: relative;
            z-index: 1;
            border-radius: 15px;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.6s;
            transform-style: preserve-3d;
            box-shadow: -4px -4px 10px 0px rgba(0, 0, 0, 0.25),4px 4px 20px 0px rgba(0, 0, 0, 0.25);
    
            .dev-card__front, .dev-card__back {
                position: absolute;
                z-index: 1;
                border-radius: 15px;
                width: 100%;
                height: 100%;
                backface-visibility: hidden;
            }
    
            .dev-card__front {
                .dev-card__avatar {
                    width: 100%;
                    height: 100%;
                    border-radius: 15px;
                }
            }
            
            .dev-card__back {
                background-color: $background-color;
                color: white;
                box-sizing: border-box;
                padding: 20px;
                transform: rotateY(180deg);
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .dev-card__name {
                    font-size: 24px;
                }

                .dev-card__info {
                    color: $main-color;
                }

                .dev-card__url {
                    font-size: 18px;
                    color: white;
                    text-decoration: underline;
                }
            }
        }
    }
      
    .info-page__dev-card:hover .dev-card__inner {
        transform: rotateY(180deg);
    }
}