:root{
    --bg-light: #ffffff;
    --bg-accent-light: #772525;
    --bg-accent1: #E25151;
    --bg-accent1-hover: #EE7B7B;

    --navbar-bg: #151414b7;
}

header,main,footer{
    display: none;
}

*{
    box-sizing: border-box;
}

body{   
    margin: 0;
    padding: 0;
    background-color: var(--bg-light);
}


nav{
    background-color:  grey;
}

textarea{
    resize: none;
}

.nav-content{
    padding: 0 10vw;
}

#section-main{
    height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0px ;
}
.main-content{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

a{
    text-decoration: none;
}

.copywrite{
    font-size: 10px;
}

.active {
    background-color: red;
}

.active-section {
    color:var(--bg-accent1) !important;
}

.btn-accent{
    background-color: var(--bg-accent1); 
    color:white;   
}

.btn-accent:active{
    background-color: var(--bg-accent1);
    border: 1px solid var(--bg-accent1) !important; 
    color:var(--bg-accent1) !important;   
}

.btn-accent:hover{
    background-color: var(--bg-accent1-hover);    
    color:white;
}

.text-primary{
    color: var(--bg-accent1) !important;
}

.btn-outline-primary{
    border: 1px solid var(--bg-accent1) !important; 
    color:var(--bg-accent1) !important;
}
.btn-outline-primary:hover{
    background-color: var(--bg-accent1);    
    color:white !important;
}

.btn-outline-primary:active{
    background-color: var(--bg-accent1) !important;    
    color:white !important;   
}   

.border-primary{
    border: 1px solid var(--bg-accent1) !important
}

.accordion-button:not(.collapsed) {
    background-color: var(--bg-accent-light);
    color: var(--bg-light);
    box-shadow: none;

}

.accordion-button:focus{
    box-shadow: 0.2px 0px  1px var(--bg-light) !important;
}

.bg-light{
    backdrop-filter: invert(80%) blur(2px) !important;
    background-color: var(--navbar-bg) !important;
}


.menu-accent{
    border: 2px solid white; 
    color: white;     
}

.hide-section{
    opacity: 0;
    transform: translate(0%,20%);
}

.show-section{
    transition: 2.5s;
    opacity: 1;
    transform: translate(0%,0%);
    
}

.nav-link:hover{
    color: grey !important;
}

.navbar-brand{
    transition: 0.4s;
}

.navbar-brand:hover {
    transform: scale(1.1, 1.1);
}

.main-label{
    animation: fadeLabel 2.5s  1 normal forwards;    
}

.img-book{
    width: 100%;
}

.img-main-book{
    opacity: 0;
    width: 100%;
    animation: fadeMachine 2.5s 1s  1 normal forwards;
}

@media only screen and (min-width : 900px) {
    @keyframes fadeMachine {
        0%{
            opacity: 0;
            transform: translate(50%,0) scale(1.5,1.5);
        }
        
        50%{
            opacity: 1;
        }
        
        100%{  
            opacity: 1;
            transform: translate(0,0) scale(1,1);
        }
    }   

    
}

@keyframes fadeLabel{
    0%{
        height: 0%;
        overflow:hidden;
        scrollbar-width: none;
    }
    100%{
        height: 100%;
        overflow: auto;
        scrollbar-width: none;
    }    
}