/* ******* FONTS ******* */
@font-face {
    font-family: 'lora';
    src: url('fonts/lora/Lora-VariableFont_wght.ttf') format('truetype');
}
@font-face {
    font-family: 'lora-italic';
    src: url('fonts/lora/Lora-Italic-VariableFont_wght.ttf') format('truetype');
}
@font-face {
    font-family: 'Simonetta-Black';
    src: url('fonts/simonetta/Simonetta-Black.ttf') format('truetype');
}
@font-face {
    font-family: 'Simonetta-BlackItalic';
    src: url('fonts/simonetta/Simonetta-BlackItalic.ttf') format('truetype');
}
@font-face {
    font-family: 'Simonetta-Italic';
    src: url('fonts/simonetta/Simonetta-Italic.ttf') format('truetype');
}
@font-face {
    font-family: 'Simonetta-Regular';
    src: url('fonts/simonetta/Simonetta-Regular.ttf') format('truetype');
}


/* ******* GENERAL STYLES ******* */


html, body{
    margin:0;
    padding:0;
    min-height: 100%;
}

:root{
    --primary:#015959;
    /* --secondary:#028c8d; */
    --secondary:#028b95;
    --tertiary:#cce8f1;
    --highlight:#ffefb1;
    --text-highlight: #d3a800;

    --page-spacing-vertical:1rem;
    --page-spacing-horizontal:4rem;
    --page-spacing:1rem 4rem;
    --header-height: 10rem;
    --footer-height: 8.9rem;
    --main-min-height: calc(100dvh - 18.9rem);
}

::-webkit-scrollbar {
    width: 5px;
    height: 20px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--secondary); /* Blue thumb */
    border-radius: 6px;
}

::-webkit-scrollbar-track {
    background-color: var(--tertiary); /* Light gray track */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

*{
    box-sizing: border-box;
}

a{
    text-decoration: none;
}

main{
    position:relative;
    min-height: var(--main-min-height);
}
main.withBackground::before{
    content: '';
    position: absolute;
    background-image: url('../images/background-general.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    top:0;
    left: 0;
    right: 0;
    bottom:0;
    opacity: .2;
}

div.card-resize{
    position: relative;
    border-radius: 24px;
    padding: 24px 32px;
    transition: .3s;
}
div.card-resize:after{
    position: absolute;
    content: "";
    top:0;
    left: 0;
    right: 0;
    bottom:0;
    z-index: -1;
    background-color: var(--tertiary);
    transition: .3s;
    border-radius: 24px;
}
div.card-resize:before{
    position: absolute;
    content: "";
    top:0;
    left: 0;
    right: 0;
    bottom:0;
    z-index: -1;
    background: linear-gradient(135deg, rgba(255,239,177,1) 60%, rgba(255,255,255,1) 90%);
    border-radius: 24px;
}
div.card-resize:hover::after,
div.card-resize.selected::after{
    /* top:100%; */
    /* left:100%; */
    opacity: 0;
}
div.card-resize:hover,
div.card-resize.selected{
    transform: scale(1.3);
    z-index: 100;
}

@media only screen and (max-width: 768px) {
    :root{
        --page-spacing:1rem 1rem;
    }
    div.card-resize:hover,
    div.card-resize.selected{
        transform: scale(1);
    }
}