@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

/* 
~~~~~ Salmon Palette ~~~~~
    Brand:    #FDBA74
    Darkest:  #3B3732
    Dark:     #615951
    Mid:      #BDB0A1
    Light:    #DBCFC0
    Lightest: #FFFFFF
*/

/* google font */
h1 {
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-style: normal;
}

/* svg background */
body {
    background-image: url("../images/WoodBackgroundUpscaled.png");
    margin: 0;
    padding: 0;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    /* background-position: center; */
}

/* Add a background color to the top navigation */
.topnav {
    background-color: #3b3732;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    color: #FDBA74;
    text-align: center;
    border-radius: 10px;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #bdb0a1;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #FDBA74;
    color: white;
}

body {
    font-family: 'Roboto Mono', monospace;
    /* color: #24b50b; */
}

/* Create two columns/boxes that floats next to each other */
nav {
    float: left;
    width: 30%;
    height: 300px;
    padding: 20px;
}

/* Style the list inside the menu */
nav ul {
    list-style-type: none;
    padding: 0;
}

article {
    float: left;
    padding: 20px;
    width: 70%;
    height: 300px;
    /* only for demonstration, should be removed */
}

/* Clear floats after the columns */
section::after {
    content: "";
    display: table;
    clear: both;
}

/* Footer style */
footer {
    background-color: #3b3732;
    color: #fff;
    padding: 1px 0;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
}

/* Body Style */
body {
    padding-bottom: 125px;
    /* Adjust this value to match the footer height */
}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {

    nav,
    article {
        width: 100%;
        height: auto;
    }
}