:root{
    --profile-image-size: 150px;
    --card-width: 400px;
    --card-height: 650px;
    @media screen and (max-width: 768px){
        --card-width: 90vw;
        --card-height: 70vh;
    }
}

body{
    background-color: #000000;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    header{
        height: 5vh;
        background-color: #1f1f1f;
        display: flex;
        justify-content: center;
        align-items: center;
        @media screen and (max-width: 768px){
            height: 10vh;
        }
        h1{
            margin: 0;
        }
    }
    main{
        height: 90vh;
        display: flex;
        @media screen and (max-width: 768px){
            height: 80vh;
            display: grid;
            place-items: center;
            overflow: hidden;
            padding-inline: 0.5rem;
        }
        .main-section{
            width: 20%;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            background-color: #111111;
            border-right: 1px solid rgb(64, 64, 64);
            @media screen and (max-width: 1440px){
                width: 30%;
            }
            @media screen and (max-width: 1024px){
                width: 40%;
            }
            @media screen and (max-width: 768px){
                display: none
            }
            .profile-container{
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 1rem;
                padding-inline: 1rem;
                .profile-image{
                    width: var(--profile-image-size);
                    height: var(--profile-image-size);
                    min-width: var(--profile-image-size);
                    border-radius: 50%;
                    overflow: hidden;
                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                .profile-info{

                }
            }
            .interaction-container{
                padding-inline: 1rem;
                ul{
                    flex-direction: row;
                    justify-content: flex-start;
                    list-style-type: none;
                    display: flex;
                    gap: 1rem;
                    padding: 0;
                    li{
                        cursor: pointer;
                        &:hover{
                            background-color: #1f1f1f;
                        }
                        &.active{
                            border-bottom: 1px solid #fff;
                        }
                    }
                }
                .matches{
                    display: none;
                    grid-template-columns: repeat(3, minmax(50px, 1fr));
                    gap: 1rem;
                    .card{
                        overflow: hidden;
                        max-height: 140px;
                        border-radius: 8px;
                        overflow: hidden;
                        position: relative;;
                        h3{
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            background-color: rgba(0, 0, 0, 0.3);
                            width: 100%;
                            padding: 0.5rem;
                            margin: 0;
                        }
                        img{
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                }
                .messages{
                    display: none;
                    .card{
                        display: flex;
                        align-items: center;
                        padding: 5px 0;
                        gap: 1rem;
                        .profile-image{
                            width: 50px;
                            height: 50px;
                            min-width: 50px;
                            border-radius: 50%;
                            overflow: hidden;
                            img{
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }
                    }
                }
                .active{
                    display: grid;
                }
            }
        }
        .swipeable-container{
            width: 80%;
            display: grid;
            justify-content: center;
            align-items: center;
            .swipeable{
                width: var(--card-width);
                height: var(--card-height);
                max-width: var(--card-width);
                max-height: var(--card-height);
                overflow: hidden;
                border-radius: 8px;
                background-color: #1f1f1f;
                position: relative;
                .card{
                    cursor: grab;
                    overflow: hidden;
                    position: absolute;
                    z-index: 2;
                    inset: 0;
                    top: 0;
                    left: 0;
                    width: var(--card-width);
                    height: var(--card-height);
                    img{
                        width: var(--card-width);
                        height: var(--card-height);
                        object-fit: cover;
                    }
                    .choice{
                        position: absolute;
                        top: 32px;
                        right: 16px;
                        padding: 4px 8px;
                        font-size: 3rem;
                        font-weight: bold;
                        text-shadow: 0 0 10px rgba(0, 0, 0, .3);
                        width: fit-content;
                        z-index: 5;
                        border: solid 5px;
                        opacity: 0;
                    }
                    .nope{
                        border-color: #ff6e63;
                        color: #ff6e63;
                        transform: rotate(30deg);
                    }
                    .like{
                        border-color: #63ff68;
                        color: #63ff68;
                        left: 16px;
                        transform: rotate(-30deg);
                    }
                    &.go-left {
                        transform: translateX(-150%) rotate(-30deg) !important;
                    }

                    &.go-right {
                        transform: translateX(150%) rotate(30deg) !important;
                    }

                    &.go-left,
                    &.go-right {
                        transition: transform .3s ease, rotate .3s ease;
                    }

                    &.reset {
                        transition: transform .3s ease;
                        transform: translateX(0) !important;
                    }
                    & .info{
                        color: white;
                        position: absolute;
                        inset: 0;
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-end;
                        align-items: flex-start;
                        height: var(--card-height);
                        width: var(--card-width);
                        z-index: 3;
                        background: linear-gradient(to top,#00000088 20%,transparent 40%);
                        h3{
                            margin: 0;
                            padding: 0.2rem 1rem;
                            font-weight: bold;
                            span{
                                font-size: 1.5rem;
                                font-weight: lighter;
                            }
                        }
                        p{
                            margin: 0;
                            padding: 0.2rem 1rem;
                            text-align: justify;
                            font-size: 14px;
                        }
                    }
                }
                & .end-nom-cards{
                    background-color: rgb(24, 24, 24);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
    }
    footer{
        height: 5vh;
        background-color: #1f1f1f;
        display: flex;
        justify-content: center;
        align-items: center;
        @media screen and (max-width: 768px){
            height: 10vh;
            display: grid;
            place-items: center;
            p{
                text-align: center;
                margin: 0;
            }
        }
    }
}