.logo{
    width: 100px !important;
}

.social-icon{
    width: 35px !important;
    margin-right: 10px;
}

.social-link{
    white-space: nowrap;
    display: inline-flex;
    font-size: 20px;
    margin-left: 15px;
    text-decoration: none !important;
}

.icons-div{
    margin-bottom: 50px;
}

body > header{
    height: 150px;
}

body > main{
    min-height: calc(100vh - 150px - 100px);
}

body > footer{
    height: 100px;
    text-align: center;
    bottom: 20px;
    width: 100%;
}

#submit-button{
    width: 100px;
}

body{
    min-height: 100vh;
    background-image: url('/static/img/background.svg');
    background-position-y: bottom;
}

.flash{
    text-align: center
}

.flash-error{
    background-color: #b62f2f;
}

.flash-success{
    background-color: #6183d5;
}

.text-center{
    text-align: center;
}

.text-end{
    text-align: end;
}

.icon-text{
    font-size: 15px;
}

.main-icon{
    font-size: 60px;
}

.btn-form{
    width: 20% !important;
}

.input-form{
    width: 75% !important;
}

.new-url{
    font-weight: bold;
}

.nav-grid{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.nav-grid:first-child{
    grid-area: 1 / 1 / 2 / 2;
}

.nav-grid .social-div{
    grid-area: 1 / 2 / 2 / 6 !important;
}

@media (max-width: 768px){
    body{
        background-size: 150%;
    }

    .btn-form{
        width: 30% !important;
    }

    .input-form{
        width: 65% !important;
    }

    .icons-div {
        grid-template-columns: repeat(2, minmax(0%, 1fr));
    }
}

@media (max-width: 600px){
    body{
        background-size: 250%;
    }

    .btn-form{
        width: 50% !important;
    }

    .input-form{
        width: 100% !important;
    }

    .icon-text{
        font-size: 12px;
    }

    .icons-div{
        margin-bottom: 30px;
    }

    .main-icon{
        font-size: 40px;
    }
}