@import url('https://fonts.googleapis.com/css2?family=Belanosima:wght@600&display=swap');

@font-face {
    font-family: 'Bradley Hand';
    font-style: normal;
    font-weight: 400;
    src: local('Bradley Hand'), url('https://fonts.cdnfonts.com/s/9408/Bradleys Pen.woff') format('woff');
}
@font-face {
    font-family: 'Bradley Hand';
    font-style: normal;
    font-weight: 700;
    src: local('Bradley Hand'), url('https://fonts.cdnfonts.com/s/9408/BradleyHandITCTT-Bold.woff') format('woff');
}

@font-face {
    font-family: 'OpenDyslexic regular';
    font-style: normal;
    font-weight: normal;
    src:  url('/assets/dist/fonts/OpenDyslexic-Regular.woff2') format('woff2');
}

.opendyslexic {
    font-family: "OpenDyslexic regular";
}

.txt-bottom-image {
    margin-top: -100px;
    position: relative;
    /* z-index: -1; */
}


.orange {
    color: #f3ac50;
}
.orange h2 {
    font-family: 'Bradley Hand', sans-serif;
    font-weight: bold;
    color: #f3ac50;
}

.chapter-title {
    font-family: 'Belanosima', sans-serif;
    font-weight: bold;
    color: #f3ac50;
}

.page-title {
    font-family: 'Belanosima', sans-serif;
    font-weight: bold;
    font-size: 3.5rem !important;
    line-height: 58px;
}

.border-orange {
    border-color: #f3ac50;
    border-style: solid;
    border-width: 1px;
}
.file-color {
    color: red;
}

.modal-header {
    background-color: #f3ac50;
}

.banner-bg {
    background-color: #f3ac50;
}

.banner-bg-img {
    background-image: url('/assets/images/banner-glass.jpeg ');
}
.banner-bg-light {
    background-color: #ffe7c9;
}


.chapter {
    position: relative;
    left:-10px;
}

.list-group li {
    background-color: rgb(248, 249, 250);
}

.accordion {
    --bs-accordion-active-bg: #f3ac50;
    --bs-accordion-bg: rgb(209, 209, 209);
  }

.accordion-body {
    background-color: rgb(248, 249, 250);
  }

#loader{
	position: fixed;
	width: 100%;
	height: 100vh;
	background: #f7f7f7 url('/assets/images/loader.gif') no-repeat center;
	z-index: 999;
}

.framewrap {
    position: absolute;
    display: none;
    width: 400px;
    height: 300px;
    padding: 0;
    overflow: hidden;
}

.frame {
    width: 1600px;
    height: 1200px;
    border: 0;
    -ms-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -o-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);

    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

.tiptext {
    color:#069; 
    cursor:pointer;
}

.resourceItem {
  margin-top: 0;
  margin-bottom: 0rem;
}

/* Bottone aranciano */
.btn-orange {
    background-color: #f3ac50;
    color: white; /* Colore del testo */
}

.btn-orange:hover {
    background-color: #e59e3d; /* Colore di sfondo al passaggio del mouse */
    color: white; /* Colore del testo */
}

.btn-orange:disabled {
    background-color: #d1a45e; /* Colore di sfondo per il bottone disabilitato */
    cursor: not-allowed; /* Cambia il cursore per indicare che il bottone è disabilitato */
    opacity: 0.65; /* Opacità per dare un effetto disabilitato */
    
}

/* pagina lettura sillabe/parole*/
.lighttext {
	color: #edf6e9;
}

.read {
	color: black;
	background-color: #fdff32;
}

.done {
	/* background-color: #ffffff; */
	color: black;
}

@media (width >= 1850px) {
    .fabioanna {
        position: absolute;
        width: 320px;
        margin-left: -35px;
        margin-top: -71px;
    }
}
@media (width < 1850px) {
    .fabioanna {
        position: absolute;
        width: 310px;
        margin-left: -35px;
        margin-top: -140px;
    }
}

.right-col-label {
    font-family: 'Belanosima', sans-serif;
    font-size: 1.5rem !important;
}

.game-round-button {
    font-family: 'Belanosima', sans-serif;
    font-size: 1.8rem !important;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: linear-gradient(145deg, #b4b3b3, #e7e7e7); /* Colore di base */
    border: none;
    outline: none;
    cursor: pointer;
    transition: background 0.3s, transform 0.1s;
    box-shadow: inset 10px 10px 20px rgba(255, 255, 255, 0.6), /* Riflesso interno chiaro */
                inset -10px -10px 20px rgba(0, 0, 0, 0.1), /* Ombra interna */
                0 15px 30px rgba(0, 0, 0, 0.3); /* Ombra esterna */
    position: relative;
  }

  /* Riflesso lucido sulla parte superiore */
  .game-round-button::before {
    content: "";
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 40%;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    filter: blur(20px);
    pointer-events: none; /* Non interferisce con il clic */
  }

  /* Effetto di pressione */
  .game-round-button:active {
    transform: scale(0.98);
    box-shadow: inset 10px 10px 20px rgba(255, 255, 255, 0.6),
                inset -10px -10px 20px rgba(0, 0, 0, 0.1),
                0 8px 15px rgba(0, 0, 0, 0.3);
  }

  /* Effetto quando il bottone è attivato (dopo il click) */
  .game-round-button.correct {
    background: linear-gradient(145deg, #4CAF50, #66BB6A); /* Colore verde lucido */
    box-shadow: inset 10px 10px 20px rgba(255, 255, 255, 0.4),
                inset -10px -10px 20px rgba(0, 0, 0, 0.2),
                0 15px 30px rgba(0, 0, 0, 0.3);
  }

  .game-round-button.error {
    background: linear-gradient(145deg, #ce1010, #df6262); /* Colore verde lucido */
    box-shadow: inset 10px 10px 20px rgba(255, 255, 255, 0.4),
                inset -10px -10px 20px rgba(0, 0, 0, 0.2),
                0 15px 30px rgba(0, 0, 0, 0.3);
  }

.custom-popover {
    --bs-popover-border-color: rgb(247, 100, 2);
    --bs-popover-header-bg: rgb(247, 100, 2);
    --bs-popover-header-color: var(--bs-white);
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: .5rem;
}