:root {
    --background-color: black;
    --foreground-color: white; 
    --background-odd-color: rgb(46, 46, 46);
    --foreground-odd-color: rgb(223, 220, 220);
}

.dark-mode {
    background-color: var(--foreground-color);
    color: var(--background-color);
}

body {
    margin: 0px;
    /* font-family: 'Courier New', Courier, monospace; */
    font-family: 'Raleway', serif;
    /* font-size: 48px; */
    background-color: var(--background-color);
    color: var(--foreground-color);
    /* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
}

.theme-toggle {
    font-size: 20;
}

.container {
    min-height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    /* gap: 0px; */
}

.nav {
    min-height: 62px;
    width: 100vw; 
    background-color: rgb(255, 255, 255);
    display: flex; 
    flex-direction: row;
}

.nav-float {
    min-height: 60px;
    width: 100vw; 
    border-style: solid;
    border-bottom-color: rgb(113, 113, 113);
    border-width: thin;
    background-color: rgb(255, 255, 255);
    /* background-image: linear-gradient(to right, #ffffff, #f6f5f8, #ececf1, #e2e3ea, #d7dae3, #c9ccd5, #bbbec7, #aeb1ba, #9a9ca2, #87878c, #737375, #606060); */
    padding-left: 10px;
    padding-right: 10px;

    flex: 1;
    
    position: fixed; 
    top: 0px; 
    left: 0px;

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    /* gap: 10px; */
}


.content {
    flex:2;
    width: 100vw;
    background-color: white;
    
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    /* gap: 20px; */
} 

.content-main {
    width: calc(100vw - 400px);
    min-height: 400px;
    /* background-image: linear-gradient(to bottom, #0a244a, #0e2f66, #1c3983, #3042a0, #4a4abc); */
    /* background-image: linear-gradient(to right, #ffffff, #f6f5f8, #ececf1, #e2e3ea, #d7dae3, #c9ccd5, #bbbec7, #aeb1ba, #9a9ca2, #87878c, #737375, #606060); */
    color: rgb(0, 0, 0);
    padding-left: 10px;
    padding-right: 10px;

    display: flex; 
    flex-direction: column;
    flex-wrap:  nowrap;
    justify-content: center;
    align-items: center;


    border-left-color: rgb(193, 181, 181);
    border-right-color: rgb(193, 181, 181);
    border-width: 1px;
    border-style: solid;
    border-top-color: white;
    border-bottom-color: white;
}

.content-inner {
    width: calc(100vw - 400px);
    background-color: rgb(255, 255, 255);
    color: black;
    padding-left: 10px;
    padding-right: 10px;
    padding: 10px 10px 10px 10px;

    border-left-color: rgb(193, 181, 181);
    border-right-color: rgb(193, 181, 181);
    border-width: 1px;
    border-style: solid;
    border-top-color: white;
    border-bottom-color: white;
        padding: 10px 10px 10px 10px;
}

.content-1-col-dark {
    background-color: rgb(41, 39, 39);
    color: white;
}
.content-2-col,
.content-3-col {
    display: flex; 
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.content-box {
    width: 450px;
    height:450px;
    border-radius: 10px;
    border-width: 1px;
    border-color: darkgray;
    border-style:solid;
    padding: 5px 5px;
}

.content-title {
    font-size: 48px;
}

.content-subtitle {
    font-size: 28px;
}


/* .even {
    background-color: rgb(0, 0, 0);
    color: black;
}

.odd {
    background-color: rgb(60, 61, 61);
    color: black;
}


.infrastructure {
    background-color: aqua;
    color: black;
}

.security {
    background-color: rgb(168, 210, 215);
    color: black;
}

.compute {
    background-color: rgb(186, 150, 166);
    color: black;
}

.apis {
    background-color: rgb(166, 255, 0);
    color: black;
}

.messaging {
    background-color: rgb(64, 0, 255);
    color: black;
} */

.footer {
    /* font-family: Arial, Helvetica, sans-serif; */
    background-color: rgb(85, 84, 84);
    color: white;
    min-height: 100px;
    padding: 10px 10px;
    flex: 1;
}

.navitem {
    /*background-color: rgb(0, 0, 0);*/
    background-color: transparent;
    height: 40px; 
    width: 100px;

    display: flex; 
    justify-content: center;
    align-items: center;
    /* font-family: sans-serif; */
    font-size: 20px;
    color:#4e0ecc;
}

.space {
    flex: 1;
}

.content-main-item {
    /* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
    font-size: 19;
}

/* .theme-toggle {
    
} */