style.css

h1,h2,h3{
    margin: 0 !important;
}
body{
    overflow: hidden;
}

.content{
    padding: 1.5em;
    max-height: 100vh;
    overflow: auto;
}
.bg-pi{
    background: #D21F3C;
    color: white;
}
.btn-pi{
    background: #D21F3C;
    color: white;
    width: 100%;
}
.btn-nav{
    width: 100%;
    background: transparent !important;
    color: white;
}
.hide{
    display: none;
}
.hide-home{
   display: none;
}
.btn:hover, .btn-large:hover, .btn-small:hover{
    background: #D21F3C;
}

.show-notif{
    bottom: 0 !important;
}

.notification{
    position: fixed;
    bottom: -100px;
    left: 30vw;
    right: 30vw;
    color: white;
    border: 2px solid black;
    border-radius: 20px;
    transition: all 0.4s ease-in-out;
    z-index: 1001;
    font-weight: bold;
}

.header-notif{
    border-radius: 20px 20px 0 0;
    padding: 0.5rem;
}

.notif-success{
    background: green;
}
.notif-error{
    background: red;
}

.content-notif{
    background: white;
    color: black;
    padding: 0.5rem;
    border-radius: 20px;
}

@media screen and (min-width: 993px) and (max-width:2200px){
    .left-nav{
        height: 100vh !important;
    }
    .icon-nav{
        display: none;
    }
    .log-form{
        position: fixed;
        top: 20vh;
        max-width: 40vw;
    }
}
@media screen and (max-width: 992px) and (min-width: 50px){
    .left-nav{
        position: fixed;
        margin-left: -600px !important;
        height: 100vh;
        transition: all 0.3s ease-in-out;
    }
    .show-nav{
        margin-left: 0 !important;
        z-index: 999;
        width: 100vw !important;
    }
    .icon-nav{
        display: block;
        position: fixed;
        top: 2vh;
        left: 1vw;
        background: #D21F3C;
        color: white;
        z-index: 1000;
    }
}

.btn{
    height: auto !important;
}
.btn i{
    font-size: none !important;
}
.btn-action{
    padding: 1rem;
    width: 100%;
}

.fa-3x{
    font-size: 3em !important;
}