@font-face {
    font-family: 'InvoluteSans-Bold';
    src: url('InvoluteSans-Bold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'InvoluteSans-Italic';
    src: url('InvoluteSans-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
  }

  @font-face {
    font-family: 'InvoluteSans-Regular';
    src: url('InvoluteSans-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
  }

  body, html {
      margin: 0;
      padding: 0;
      height: 100%;
      font-family: 'InvoluteSans-Regular', sans-serif;
    }

    .header-content {
      background-color: #444445;
      color: white;
      padding: 3px;
      display: grid;
      height: 12vh;
      align-items: center;
      grid-template-columns: repeat(14, minmax(0, 1fr));
      justify-content: space-between;
    }

    .nav-link {
      color: white !important;
      margin: 0 8px;
      font-weight: 300;
    }

    .main-content {
      display: grid;
      gap: 0;
      grid-template-rows: calc(100vh - 12vh);
      grid-template-columns: repeat(14, minmax(0, 1fr));
      height: calc(100vh - 12vh);
    }

    .main-content > div {
      width: 100%;
      grid-row: 1;
    }

    .color-column {
      flex: 1;
      padding: 20px;
      overflow: hidden;
    }

    .dark-text{
      color: #434345 !important;
    }

    .dark-text-shadow{
      color: #434345;
    }

    .button-dark{
      background-color: #86888A;
      color: white;
    }
    .login-input{
      outline: none;
      box-shadow: #434345;
    }

    .col-1 { background-color: #444445; grid-column: 1;}
    .col-2 { background-color: #86888A; grid-column: 2;}
    .col-3 { background-color: #B0B2B4; grid-column: 3;}
    .col-4 { background-color: #CED1D2; grid-column: 4;}
    .col-5 { background-color: #DFDFDE; grid-column: 5;}
    .col-6 { background-color: #E8E7E6; grid-column: 6;}
    .col-7 { background-color: #F1F1F1; grid-column: 7;}
    .col-8 { background-color: #E8C9C8; grid-column: 8;}
    .col-9 { background-color: #E0C7CE; grid-column: 9;}
    .col-10 { background-color: #DFD5CE; grid-column: 10;}  
    .col-11 { background-color: #D9D3D8; grid-column: 11;}
    .col-12 { background-color: #D8D7C5; grid-column: 12;}  
    .col-13 { background-color: #C1D6DD; grid-column: 13;}
    .col-14 { background-color: #C5D6C8; grid-column: 14;}