@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600&display=swap');

* {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    font-family: 'Source Sans Pro', sans-serif;
}

/* page colors */
:root {
    --primary_color: #ffffff;
    --secondary_color: #222222;
    --fixed_color: #121212;
}

/* dark mode colors */
.dark_mode {
    --primary_color: #222222;
    --secondary_color: #ffffff;
}

/* body */
body {
    background-color: var(--primary_color);
}

/* page grid */
.page_grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0.4fr auto;
    grid-auto-flow: row;
    justify-content: space-evenly;
    align-content: space-evenly;
    grid-template-areas: 
    "nav_bar"
    "content";
}

/* navigation bar */
.nav_bar {
    display: flex;
    flex-direction: row;
    gap: 3vw;
    justify-content: start;
    align-items: center;
    margin: 4vw 5vw;
    grid-area: nav_bar;
}

/* logo style */
.logo {
    display: flex;
    flex-direction: row;
}

/* logo font and size */
h1 {
    font-size: 3vw;
}

/* baa color */
.black {
    color: var(--secondary_color);
}

/* services color */ 
.green {
    color: #7DF452;
}

/* moon icon */
.moon_icon {
    margin-left: 68vw;
}

#moon_svg {
    width: 2.5vw;
    height: 2.5vw;
    cursor: pointer;
    fill: var(--secondary_color);
}
/* content */
.content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    grid-area: content;
}

/* message */
h2 {
    font-size: 6vw;
    color: var(--secondary_color);
    font-weight: lighter;
    letter-spacing: 0.5px;
}