html {
    scroll-behavior: smooth;
}


div.content {
    padding-top: 5em;
    padding-bottom: 5em;
}

/*
** NAVBAR
*/

.navbar {
    background: black;
}

.nav-link, .navbar-brand {
    color: white;
    cursor: pointer;
}

.nav-link {
    text-transform: uppercase;
}

.nav-link:hover {
    transition: all .2s ease-in-out;
    transform: scale(1.1);
}

.nav-item:after {
    content: '';
    display: block;
    height: 3px;
    width: 0;
    background: transparent;
    transition: width .2s ease, background-color .2s ease;
}

.nav-item:hover:after {
    width: 100%;
}

.navbar-collapse {
    justify-content: flex-end;
}

.navbar-toggler {
    outline-style: solid;
    outline-width: 1px;
}

.nav-item-settings {
    margin-left:30px;
}

.affig {
    transition: 1.70s;
    -webkit-transition: 1.70s;
    -moz-transition: 1.70s;
    -ms-transition: 1.70s;
    -o-transition: 1.70s;
}

.affig:hover {
    transition: 0.70s;
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
    -webkit-transform: rotate(360deg) scale(1.5);
    -moz-transform: rotate(360deg) scale(1.5);
    -o-transform: rotate(360deg) scale(1.5);
    -ms-transform: rotate(360deg) scale(1.5);
    transform: rotate(360deg) scale(1.5);
}

.rainbow {
	animation: rainbow 2.5s linear;
	animation-iteration-count: infinite;
}

@keyframes rainbow {
	100%,0%{
		color: rgb(255,0,0);
	}
	8%{
		color: rgb(255,127,0);
	}
	16%{
		color: rgb(255,255,0);
	}
	25%{
		color: rgb(127,255,0);
	}
	33%{
		color: rgb(0,255,0);
	}
	41%{
		color: rgb(0,255,127);
	}
	50%{
		color: rgb(0,255,255);
	}
	58%{
		color: rgb(0,127,255);
	}
	66%{
		color: rgb(0,0,255);
	}
	75%{
		color: rgb(127,0,255);
	}
	83%{
		color: rgb(255,0,255);
	}
	91%{
		color: rgb(255,0,127);
	}
}