*{
    margin: 0;
}

.dark-mode{
    /*transition: 1s;*/
    --bg-color: #535C91;
    --sidenav-bg: #49454F;
    --sidenav-text-color: #bcb5c28c;
    --sidenav-hover-text-color: #E7E0EC;
    --text-color: #EEEEEE;
    --current-icon: url('../res/images/Icons/sun.svg');
    --current-logo: url('../res/images/Loading\ Tech.svg');
    background-image: url("../res/images/Backgrounds/endless-constellation.svg");
}

.light-mode{
    /*transition: 1s;*/
    --bg-color: #EEEEEE;
    --sidenav-bg: #508C9B;
    --sidenav-text-color: #bcb5c28c;
    --sidenav-hover-text-color: #E7E0EC;
    --text-color: #000000;
    --current-icon: url('../res/images/Icons/Moon.svg');
    --current-logo: url('../res/images/Loading\ Tech\ \(1\).svg');
    background-image: url("../res/images/Backgrounds/endless-constellationL.svg");
}

.transition{
    transition: 1s;
}

body{
    background-color: var(--bg-color);
    color: var(--text-color);
}

.sidebar{
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    position: absolute;
    left: 0;

    height: 100%;
    width: 5rem;
    gap: 75px;

    background-color: var(--sidenav-bg);
}

.nav-button{
    align-self: center;
    display: flex;

    flex-direction: column;
    justify-content: center;
    /* align-content: center; */
    align-items: center;

    text-align: center;
    text-decoration: none;
    color: var(--sidenav-text-color);
}

.nav-button:hover{
    color: var(--sidenav-hover-text-color);
}


#ChangeImage{
    margin-bottom: 4rem;   
}


.carousel-item img{
    border-radius: 25px;
}

#weekly-news .row .col-sm .card{
    background-color: #ffffffe1;    
}

.card{
    color: #000000;
}

.carousel-item div p, .carousel-item div h5{
    text-shadow: 0 0 4px black;
}

.card img{
    object-fit: cover;
}

.album.py-5.bg-dark{
    margin-left: 1rem;
    margin-right: 1rem;
}

.col-sm-auto.sticky-top{
    background-color: var(--sidenav-bg);
}

.logo{
    width: 2rem;
    height: 2rem;
    position: static;
}

.form-bg{
    /*background-color: var(--bg-color);*/
    margin: 1rem;
    padding: 2rem;
    border-radius: 2rem;
    
}

.card-news{
    padding: 0;
    border: var(--sidenav-bg) solid 2px;
}

.card-news .card.mb-4.box-shadow{
    margin-bottom: 0!important;
}

.album.py-5 .container .row.articles{
    align-items: center;
    align-content: stretch;
}

.album.py-5 .container .row.articles .col-md-4{
    display: flex;
    justify-self: stretch;
    align-self: stretch;
}

/*Code that somehow fixes the side bar*/
.col-sm-auto.sticky-top{
    align-self: normal;
}
/*End of the code that somehow fixes the side bar*/

.d-flex.justify-content-between.align-items-center{
    display: flex !important;
    flex-wrap: wrap;
    align-content: flex-end;
    justify-content: space-between;
}

.ModeIcon{
    position: fixed;
    bottom: 0;
}

@media only screen and (max-width: 575px) {
    .ModeIcon{
        position: fixed;
        top: 0;
        right: 0;
        
    }
}