:root {
  --darkblue: #123456;
  --body-white: #EEEEEE;
  --table-white1: #FFFFFF;
  --table-white2: #F2F2F2;
  --table-highlight: #8293A4;
  --section-background: #CCCCCC;
  --subsection-background: #BBBBBB;
  --button-gray: #6C757D;
  --button-gray-active: #5C636A;
  --button-blue: #123456;
  --button-blue-active: #002244;
  --button-red: #CC1212;
  --button-red-active: #AA0000;
  --green: green;
  --red: red;
}

html {
    font-family: Verdana, sans-serif;
    font-size: 16px;
}

@media (min-width: 2000px) {
    html {
        font-size: 20px;
    }
}

body {
  display: flex;
  flex-direction: column;
  background-color: var(--body-white);
}

main {
  width: 800px;  
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 800px) {
  main { width: 100%; }
}

main {
   background-color: var(--section-background);
}

section {
    padding-top: 5px;
}

header {
  width: 100%;
  color: var(--body-white);
  background-color: var(--darkblue);

  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

header a {
  color: var(--body-white);
  text-decoration: none;
}

.default-table {
    width: 100%;
    text-align: center;
    padding: 20px;
}

.default-table th {
    color: var(--body-white);
    background-color: var(--darkblue);
}

.default-table tr {
    text-transform: capitalize;
    background-color: var(--table-white2);
}

.default-table tr:nth-child(2n) {
    background-color: var(--table-white1);
}

.default-table .total:nth-child(1n) {
    font-weight: bold;
    color: var(--body-white);
    background-color: var(--darkblue);
}

.default-table a {
  color: black;
}

.form-table {
    width: 100%;
    text-align: center;
    padding: 20px;
}

.form-table input {
    width: 100%;
}

.btn-full {
    width: 100%;
}

.btn-blue {
    --bs-btn-color: white;
    --bs-btn-hover-color: white;
    --bs-btn-active-color: white;

    --bs-btn-bg: var(--button-blue);
    --bs-btn-border-color: var(--button-blue);
    --bs-btn-active-border-color: var(--button-blue);

    --bs-btn-hover-bg: var(--button-blue-active);
    --bs-btn-active-bg: var(--button-blue-active);
}
