:root{
    --color1:#ede6e6;
     --color2:#1a1917;
      --color3:#da3585;
       --color4:#65820f;
      --color5:#97a66b;  

}

main > .container {
    padding: 80px 15px 20px;
}
@font-face {
    font-family: 'shrift';
    src: url('/fonts/shrift.ttf') format('truetype');
}

.logo-text{
    font-family: 'shrift', sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color3);
}
.logo-text:hover{
    font-family: 'shrift', sans-serif;
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--color2);
}
.logo-animation {
    transition: transform 0.6s ease-in-out;
}
.logo-animation:hover {
    transform: rotate(15deg) scale(1.4);
}
.navbar-dark.bg-dark{
    background: var(--color5)!important;
    color: var(--color1)!important;
    
}
h1{
    border-bottom: 5px solid var(--color4);
    color: var(--color3);
    padding-bottom: 6px;
}

footer {
    background: var(--color5);
    color: var(--color2);
    font-size: .9em;
    height: 60px;
}
.btn-primary{
 background: var(--color3);
    color: var(--color1);
    border:3px solid var(--color1);
}
.btn-primary:hover{
 background: var(--color4);
    color: var(--color1);
    border: 3px solid var(--color1);
}

.btn-success{
     background: var(--color3);
    color: var(--color2);
    border:3px solid var(--color2);
}
.btn-success:hover{
     background: var(--color4);
    color: var(--color2);
    border: 3px solid var(--color2);
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: var(--color5);
}



 button.logout {
   background: var(--color2);
    color: var(--color1);
    border: var(--color1);
}

@media(max-width:767px) {
    .nav li > form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 0;
    }
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
    color: var(--color3);
}



.form-group {
    margin-bottom: 1rem;
}