styles.css

:root {
    --icon-size: 30px;;
    --main-spacing: 15px;
    --primary-color: rgba(24,146,211,255);
    --secondary-color: rgba(241,179,42,255);
}

body { 
    display: flex;
    min-height: 100vh;
    max-width: 100%;
    margin: 0px;
    padding: 0px;
    font-family: roboto, sans-serif;
}

#icon {
    width: var(--icon-size);
}

#logo{
    border: 2px solid rgba(0,0,0,0);
    background-image: linear-gradient(45deg, red, orange);
    border-radius: 100%;
    object-fit: cover;
    width: 50px;
    height: 50px;
}

.btn-container div button:hover, 
#icon:hover,
.sidebar ul li:hover {
    transition: 0.15s;
    opacity: .8;
    box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.4);
    border-radius: 40px;
}

/* Animated Background
body {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, orange, rgba(241,179,42,255));
	background-size: 400% 400%;
	animation: gradient 20s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
*/