/*  Proyecto web desarrollado en Bootstrap
    Por David Solera Romero, 1º DAM
    Para la asignatura Lenguaje de Marcas
    A día 24 / 01 / 2024 */

/* Fuentes */
@font-face {font-family: titulo; src: url("../fonts/pixelfont7.ttf");}
@font-face {font-family: texto; src: url("../fonts/Nihonium113.ttf");}
.titulo {font-family: titulo;}
.texto {font-family: texto; font-size: 2rem;}

/* Estilo general */
* {box-sizing: border-box; font-family: titulo;}
body {background-image: url("../img/patron.png");}

/* Estilo de la hero section */
#hero {background: url("../img/herowebp.webp") no-repeat fixed 40%; background-size: cover;}

/* Estilo del botón de la hero section - personalizado */
.containeruan {width: 200px;}
.containeruan .btn {
    height: 57px; width: 215px;
    margin: 20px;
    margin-bottom: 40px;}
.containeruan .btn a {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 15px 35px rgba(255, 255, 255, 0.2);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(15px);
    transition: 0.5s;}
.containeruan .btn:hover a {letter-spacing: 2px; border-color: rgb(80, 222, 28, 0.25); }
.containeruan .btn a::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 50%; height: 100%;
    background: linear-gradient(to left, rgba(255,255,255,0.15), transparent);
    transform: skewX(45deg) translateX(0);
    transition: 0.5s;}
.containeruan .btn:hover a::before {transform: skewX(45deg) translateX(200%);}
.containeruan .btn::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -5px;
    height: 10px; width: 30px;
    background: rgb(63, 238, 10);
    border-radius: 10px;
    transition: 0.5s;
    transition-delay: 0s;}
.containeruan .btn:hover::before {
    bottom: 0;
    height: 50%; width: 80%;
    border-radius: 30px;
    transition-delay: 0.5s;}
.containeruan .btn::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -5px;
    height: 10px; width: 30px;
    background: rgb(7, 245, 59);
    border-radius: 10px;
    transition: 0.5s;
    transition-delay: 0s;}
.containeruan .btn:hover::after {
    top: 0;
    height: 50%;
    width: 80%;
    border-radius: 30px;
    transition-delay: 0.5s;}
.containeruan .btn:nth-child(1):before, .containeruan .btn:nth-child(1)::after {
    background: #51a056;
    box-shadow: 0 0 5px #036d11,
        0 0 15px #107526,
        0 0 30px #077a04,
        0 0 60px #048019;}
.containeruan .btn:active a {color: #000;}

/* Zona personalizada de Bootstrap */
.cursor-pointer {cursor: pointer;}
.resize-none {resize: none;}

/* Hover */
.greenbutton:hover {color: rgb(203, 255, 211); transition: 1.3s; box-shadow:0 0 8px .3rem rgba(36, 197, 22, 0.45)}
.card-hover:hover {box-shadow:0 0 25px 0.35rem rgba(36, 197, 22, 0.60); transition: 1.35s; border-color: #047c14;}
img:hover:not(.card-img-top) {filter: drop-shadow(0 0 35px rgba(42, 220, 26, 0.5)); transition: 1.35s;}

/* Alturas position absolute */
.top-12 {top:12%;}

/* Color texto al hacer hover */
.hover:hover {color: #03b364 !important; transition: 1s;}
.hoverdos:hover {color: #03b364 !important; transition: 1s; border-bottom: 1px #03b364 solid;}

/* Border */
.bct-green {border-top: #0CC05D 3.5px solid;}

/* Width */
.w-perso {width: 67.5%;}
.w-87 {width: 87%;}
#slime {min-width: 70px;}

/* Height */
.vh-94-1 {height: 94.1vh;}
.h-85p {height: 85px !important;}

/* Colores */
.text-lightgreen {color: rgb(203, 255, 211) !important}
.text-gradient {
    background: linear-gradient(90deg,#88ff00 10%, #9dc034 50%, #60a303 100%);
    background-clip: text; -webkit-background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.35px rgb(2, 12, 2);}
.text-green {color: rgb(131, 245, 131);}
.bg-green {background: rgb(31,99,60); background: linear-gradient(90deg, rgb(54, 132, 48) 0%, #14532a 100%);}
.bg-othergreen {background: radial-gradient(circle farthest-side at center center, #519333 0%, #01481f 95%) !important;}
.bg-accbg {background-color: #04231d !important;}
.bg-footergreen {background-color: #033629 !important;}
.bg-mygreen {background-color: #072620 !important;}
.bg-lightgreen {background-color: #97f5c1;}
.bg-darkgreen {background-color: #3e9920 !important;}
.bg-black {background-color: #131919 !important;}
.border-lightgreen {border-color: rgb(203, 255, 211) !important;}

/* Font-size */
.fs-6 {font-size: 1.05rem !important;}
.fs-0 {font-size: 2.75rem;}

/* Estilos ya implementados en Bootstrap, pero con diferente color */
.form-check-input:focus{border-color:#3deb2d;outline:0;box-shadow:0 0 0 .25rem rgba(36, 197, 22, 0.25)}
.form-check-input:checked{background-color:#34b523;border-color:#269208}
.form-select:focus, .btn-close:focus, .form-control:focus 
{border-color:#3deb2d; box-shadow:0 0 0 .25rem rgba(36, 197, 22, 0.25)}
.accordion-button:focus {border-color:#34c70b;box-shadow:0 0 0 .25rem rgba(18, 106, 10, 0.25) !important}
.accordion-item, .accordion-button, .accordion-body, .accordion-collapse {border-color:#103b04 !important;}
.accordion-button {box-shadow:0 0 0 .1rem rgba(18, 106, 10, 0.25) !important}
.accordion { --bs-accordion-btn-active-icon: none;}

/* Errores del formulario ocultos */
.form-novalidado:focus, .form-novalidado:focus, .form-novalidado {
    border-color:rgb(252, 84, 84); 
    box-shadow:0 0 0 .25rem rgba(241, 57, 57, 0.25)}
.form-text {visibility: hidden;}