/*Dialog Styles*/
.my-modal dialog {
    background: hsl(257, 19%, 15%);
    max-width: 90%;
    width: 90%;
    padding: 2rem 3rem 1rem;
    border-radius: 20px;
    border: 0;
    box-shadow: 0 5px 30px 0 rgb(0 0 0 / 10%);
    animation: fadeIn 1s ease both;
    margin: auto;
    height: 90vh;
    &::backdrop {
        animation: fadeIn 1s ease both;
        background: rgb(255 255 255 / 35%);
        z-index: 2;
        backdrop-filter: blur(20px);
    }
    .x {
        filter: grayscale(1);
        border: none;
        background: none;
        position: absolute;
        outline: none;
        top: 15px;
        right: 10px;
        transition: ease filter, transform 0.3s;
        cursor: pointer;
        transform-origin: center;
        &:hover {
            filter: grayscale(0);
            transform: scale(1.1);
        }
    }
}


@media only screen and (max-width: 768px) {
    .my-modal dialog {
        padding: 2rem 0 1rem;
    }
    .my-modal dialog h2{
        padding:  1rem;
    }
}
.my-modal dialog p {
    font-size: 1rem;
    line-height: 1.3rem;
    padding: 0.5rem 0;
    color: hsl(257, 14%, 51%);
    text-align: justify;
}
.my-modal dialog h2 {
    font-weight: 600;
    font-size: 25px;
    padding-bottom: 1rem;
    color: hsl(257, 69%, 50%);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}