@import url(../Components/Palette.css);

.main h1 {
    margin: 0;
    font-size: 60px !important;
}

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 10px 90px 10px 20px;
    border-radius: 5px;
    display: none;
    z-index: 30;
    border: 2px solid black;
    box-shadow: 0px 0px 10px;
}

.popup a {
    width: 100%;
}

.popup-active {
    display: block;
    animation: fadeIn 2s;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 20; 
  display: none;
}

.overlay-active {
  display: block;
}

.alerts-popup {
    right: 20px;
    bottom: 20px;
    display: none;
    padding: 5px 20px;
    position: fixed;
    border-radius: 4px;
    color: var(--sucess-button-tc);
    border: 2px solid #000;
    text-transform: uppercase;
    box-shadow: 0px 3px 0px #000;
    font-family: 'OdibeeSans', sans-serif;
    background-color: var(--sucess-button-bc);
    text-shadow: 0px 1.5px 0px rgb(0 0 0 / 25%);
}

#success-add.active {
    display: block;
}

@media screen and (max-width: 1000px) {
    .main h1 {
        font-size: 40px !important;
    }

    @media screen and (min-width: 320px) and (max-width: 600px) {
        .popup {
            width: 230px !important;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin: auto;
            width: 80% !important;
            height: 70% !important;
            padding: 10px;
            overflow: auto;
        }

        .popup-content {
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .popup-content a {
            width: 50%;
        }

        .popup::-webkit-scrollbar {
            width: 8px;
        }
        
        .popup::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 4px;
        }

        .popup li {
            margin: 10px;
        }
    }
}

@media screen and (min-width: 1023px) and (max-width: 1329px) {
    .card-cosmetics {
        display: flex !important;
    }

    .card {
        margin: 40px !important;
        width: 40% !important;
    }
}