/* # Variables */
:root {
    font-size: 10px;
    --nav-height: 75px;
    --item-padding: 15px;

    /* Colours */
    --dark-blue: #253758;
    --light-blue: #E0F7FF;
    --yellow: #FFCC00;
    /* Room colours */
    --kitchen: #f8d7e0;
    --kitchen-dark: #e7a2b5;
    --living-room: #f6d8b6;
    --living-room-dark: #f6b170;
    --bedroom: #aeb6db;
    --bedroom-dark: #6975bd;
    --laundry: #c7f2de;
    --laundry-dark: #83c9a5;
    --bathroom: #d5eef2;
    --bathroom-dark: #9dd9e4;
    --study: #e091a7;
    --study-dark: #b74964;
}

/* ################# */
/* # Global styles # */
/* ################# */
/* General */
* {
    box-sizing: border-box;
    font-family: 'Comfortaa', cursive;
    color: var(--dark-blue);
}
html, body {
    margin: 0;
    padding: 0;
    background-color: var(--light-blue);
}

/* ################## */
/* # Nav bar styles # */
/* ################## */
/* Container for nav */
#nav-bar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    padding: 8px 16px 8px 16px;
    width: 100vw;
    height: var(--nav-height);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    background-color: white;
}
/* img tag of logo */
#nav-logo, #logo-link {
    height: 100%;
}
/* Separator between logo and title */
#nav-bar .vertical-separator {
    height: 100%;
    border-left: 1px solid black;
}
/* Title */
#nav-bar h1 {
    margin: 0;
    font-size: 3.5rem;
}
/* Links */
#nav-bar .nav-link {
    padding: 10px;
    font-size: 2rem;
    text-decoration: none;
    transition: opacity 0.15s;
}
#nav-bar .nav-link:hover { opacity: 0.8; }
#nav-bar .nav-link:nth-of-type(2) { margin-left: auto; }
#nav-bar .nav-link:last-of-type {
    border-radius: 8px;
    background-color: var(--yellow);
}
/** Media queries */
@media (max-width: 900px) {
    #nav-bar .nav-link {
        display: none;
    }
    #nav-bar h1 {
        font-size: 2.5rem;
    }
}