/*
@font-face {
    font-family: Reef;
    src: url('../fonts/Reef.otf') format('opentype');
}


@font-face {
    font-family: weblysleekuil;
    src: url('/fonts/weblysleekuil.ttf') format('truetype');
}

@font-face {
    font-family: CooperHewitt-Heavy;
    src: url('/fonts/CooperHewitt-Heavy.otf') format('truetype');
}
*/


.svg-shadow {
    -webkit-filter: drop-shadow( 3px 3px 2px #878787);
    filter: drop-shadow( 3px 3px 2px #878787);
    /* Similar syntax to box-shadow */
}

.svg-title-header {
    height:230px;
    max-width: 100%;
}

.persp-row {
    display: flex;
    gap: 20px;
}

.persp-container {
    width:400px;
    /*height: 400px;*/
    perspective: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.persp-imagem {
    width: 100%;
    height: auto;
    transition: transform 0.2s ease-out; /* Ajustada para um retorno suave */
    transform-style: preserve-3d;
    will-change: transform; /* Otimização para animações */
    border-radius: 10px;
    box-shadow: 7px 5px 5px #3f3f3f;
}

.spinner {
    display: inline-block;
    opacity: 0;
    max-width: 0;
    -webkit-transition: opacity 0.25s, max-width 0.45s;
    -moz-transition: opacity 0.25s, max-width 0.45s;
    -o-transition: opacity 0.25s, max-width 0.45s;
    transition: opacity 0.25s, max-width 0.45s;
    /* Duration fixed since we animate additional hidden width */
}

.has-spinner.active {
    cursor: progress;
}

    .has-spinner.active .spinner {
        opacity: 1;
        max-width: 50px;
        /* More than it will ever come, notice that this affects on animation duration */
    }


.email-suggestion {
    /*color: #ff0000;*/
    margin-top: 5px;
    font-size: 18px;
    cursor: pointer;
}

.email-disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}