@import url("./home.css"); 
@import url("./blog.css"); 
@import url("./header.css"); 
@import url("./blog_item.css"); 
@import url("./footer.css"); 
@import url("./backtotop.css"); 


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    --background-color-light : #D6D6C7;
    --background-color-dark : #333138;
    --background-color : var(--background-color-dark);

    --primary-color: #290452;
    --primary-color-darker: #2b0b4d;
    --primary-color-lighter: #6b4399;
    --secondary-color: #ffcbd8;

    --text-color : var(--text-color-dark); 
    --text-color-light: white;
    --text-color-dark: black;
}

body {
    background-image: url("../images/backgroundfirewatch.jpg");
    background-repeat: no-repeat;
    background-color: #290452;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: white;
}

nav {
    background-color: transparent;
}



footer {
    background-color:  var(--primary-color);
    margin-top: auto;
}

a, p, h1, h2, h3, h4, ul, li, span, div {
    color: var(--text-color);
}

main {
    width: min(100% - 3rem, 60rem);
    margin-inline: auto;
}


.breadcrumb {
    padding-top: 1em;

    a {
        text-decoration: none;
    
        &:hover {
            color: var(--primary-color-lighter);
            text-decoration: underline;
        }
    }
}