@import './variables.css';

.accordion {
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
}

.accordion__question p {
    margin: 5px;
    padding: 0;
    font-size: 20px;
}

.accordion__answer p {
    margin: 5px;
    padding: 10px;
    font-size: 16px;
    line-height: 18px;
    color: var(--secondary-font-color);
    background: var(--background-color);
    border-radius: 10px;
}

.accordion:hover {
    cursor: pointer;
}

.accordion__answer {
    display: none;
}

.accordion.active {
    box-shadow: 0 .25rem 0 var(--background-color);
}

.accordion.active .accordion__answer {
    display: block;
}

.scale {
    animation: scaling 1s forwards;
}

@media (max-width: 718px) {
    .accordion__answer p {
        font-size: 14px;
        line-height: 16px;
    }
}

@media (min-width:718px) and (max-width:1023px) {
    /* not currently used */
}

@media (min-width:1024px) and (max-width:1279px) {
    /* not currently used */
}

@keyframes scaling {
    0% {
        transform: scale(1.0);
        animation-timing-function: ease-out;
    }
    55% {
        transform: scale(1.2) translate(-10%);
        animation-timing-function: ease-in;
    }
    100% {
        transform: scale(1.0);
        animation-timing-function: ease-out;
    }
}