html,
html * {
    box-sizing: border-box;
}
a { text-decoration: none; }
:root {
    --darkMode-color: #CACACA;
    --darkMode-bg: #232323;

    --lightMode-color: #232323;
    /* --lightMode-bg: #CACACA; */
    --lightMode-bg: rgba(200, 200, 200, 90%);


    --header-height: 8vh;
    --subheader-height: 4vh;
    font-family: sans-serif;
}

body {
    /* background-color: var(--default-bg); */
    background-image: url("../images/Workshop.jpg");
    background-size:cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    color: var(--default-color);
    transition: 400ms linear;
    min-height: 100%;
}

.darkMode {
    background-color: var(--darkMode-bg);
    color: var(--darkMode-color);
}

.lightMode {
    background-color: var(--lightMode-bg);
    color: var(--lightMode-color);
}

.topNav {
    position: fixed;
    height: var(--header-height);
    width: 100%;
    background: rgb(35, 35, 255);
    background: linear-gradient(180deg, rgba(35, 35, 255, 1) 0%, rgba(3, 176, 212, 1) 49%);
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 0px;
}
.subHeader{
    position: fixed;
    width: 100%;
    height: var(--subheader-height);
    top: var(--header-height);
    left: 0;
    background-color: lightblue;
    margin-top: 0px;
    display: flex;
    justify-content: flex-start;
}
.navBtn{
    height: var(--subheader-height);
    width: 20%;
    background:rgba(3, 176, 212, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    border: black solid 2px;
}
.navBtn:hover{
    background: rgba(3, 120, 255, 1);
}
.navLink{
    color: white;
}

.darkModeSwitch {
    position: absolute;
    right: 10px;
    top: 10%;
    height: 80%;
}

.btntext {
    font-size: 50%;
}

.banner-img {
    height: 80%;
    margin-left: 10px;
}

.headerText {
    color: var(--lightMode-color);
    font-family: sans-serif;
    margin-left: 10px;
    font-size: 3vh;
}

.mainContent {
    font-family: sans-serif;
    margin-top: calc(var(--header-height) + var(--subheader-height) + 20px);;
    margin-left: 5vw;
    margin-right: 5vw;
    margin-bottom: 5vw;
    padding: 10px;
    border-radius: 10px;
    background-color: var(--lightMode-bg);
    color: var(--lightMode-color)
}