/* jost-500 - latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/jost-v20-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* jost-900 - latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/jost-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


:root {
    /* Common colors for backgrounds, etc */
    --common_activecolor: rgba(255, 255, 255, 0.5);
    --common_inactivecolor: #d2bcee80;
    --common_hovercolor: rgba(159, 111, 221, 0.651);
    /* Common text colors */
    --text_darkforlight: rgb(83, 39, 94);
}

html {
  font-family: "Jost";
  font-weight: 500;
  font-style: normal;
}

body {
    background-image: linear-gradient(to bottom, rgb(248, 189, 161), rgb(223, 144, 226));
    margin: 0;
    padding: 0;
}

.nav-bar {
    float:left;
    height: 100vh;
    width: 200px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.nav-item {
    background-color: var(--common_inactivecolor);
    padding:15px;
    display: block;
    text-decoration: none;
}

.nav-item:hover {
    background-color: var(--common_hovercolor);
    color: white;
}

.active {
    background-color: var(--common_activecolor);
    color: var(--text_darkforlight);
}

.main-content {
    margin: 0;
    margin-left: 200px;
    max-width: 100vw;
    min-width: 70vw;
    padding: 40px;
    padding-top: 5px;
    height: 100vh;
    background-color: var(--common_activecolor);
    color: var(--text_darkforlight);
}

.reallybigheader {
    font-family: "Jost";
    font-weight: 700;
    margin-top: 15px;
    margin-bottom: 20px;
    font-size: 100px;
}