/* GENERAL */
body {

    margin:0;
    height:100vh;
    background:
            linear-gradient(
                    135deg,
                    hsl(279deg 33% 47%) 0%,
                    hsl(279deg 40% 33%) 39%,
                    hsl(279deg 62% 19%) 61%,
                    hsl(279deg 94% 7%) 100%
            );
    background-size:300% 100%,cover;
    animation:change 4s linear infinite;
    animation-direction: alternate;
    background-attachment: fixed;

}

@keyframes change {

    from {

        background-position: right,center;

    }

}
/* TEXT */
* {

    font-family: Lato, sans-serif;
    color: white;

}

h1, h2 {

    font-weight: bold;
    margin: 0;

}

h1 {

    margin: 5vw 0 5vw 0;
    font-size: 8vw;

}


h2 {

    font-size: 4vw;

}

h3 {

    font-size: 3vw;

}

p {

    font-size: 2vw;

}

.dark-text {

    color: #4A245E;

}

.light-text {

    color: white;

}

/* NAV-BAR */
.bg-light {

    background-color: white !important;
    padding: 0;

}

.navbar-brand {

    padding-left: .5vw;
    color: #4A245E;
    font-size: 2vw;
    font-weight: bold;

    animation: 500ms;

}

.navbar-toggler {

    border: none;

}

.navbar-toggler:focus {

    box-shadow: none;
    border:none;

}

.navbar-light .navbar-toggler-icon {

    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(74, 36, 94, 1)' stroke-width='3.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");

}

.navbar-brand:hover {

    color: #4A245E;

}

.nav-link {

    padding: 1.5vw;

}

.nav-link, .nav-link > .nav-item {

    color: #4A245E;
    font-size: 1.3vw;

    animation: 500ms;

}

.nav-link:hover, .nav-link:hover > .nav-item {

    color: white;

}

.nav-link:hover {

    background-color: #4A245E;

}

/* MISC */

.custom-container {

    align-content: center;

    padding: 5vw;

    width: 90% !important;
    margin-left: auto;
    margin-right: auto;
    
}

.bar {

    display: block;
    width: 100%;
    border-top: 5px #4A245E solid;
    padding-bottom: 1vw;

}

#quoter {

    background-color: white;
    color: #4A245E;

}

#getNewQuote {

    margin-top: 5vw;
    font-size: 2vw;
    border: 5px #4A245E solid;
    border-radius: 1vw;
    padding: 1vw;
    background-color: #4A245E;
    color: white;

    animation: 500ms;

}

#getNewQuote:hover {

    background-color: white;
    color: #4A245E;
    border: 5px #4A245E solid;

}

#person {

    padding: 1vw;

}

@media (max-width: 991px) {

    h1 {

        font-size: 12vw;

    }

    h2 {

        font-size: 8vw;

    }

    h3, .navbar-brand {

        font-size: 6vw;

    }

    p, #getNewQuote, .nav-link, .nav-link > .nav-item {

        font-size: 3vw;

    }

    .nav-link > .nav-item {

        font-weight: bold;

    }

}