body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    position: relative;
    /* font-family: Roboto, "Helvetica Neue", sans-serif; */
    font-family: sans-serif;
    background-color: var(--background-color);

    --background-color: rgb(30,30,30);
    --topnav-backcolor: #2d394b;
    --topnav-forecolor: white;
    --topnav-hover-forecolor: #40e0d0;
    --text-color: white;
    --card-backcolor: #2d394b;
    --card-backcolor-hover: #21726A;
    --table-backcolor: #21726A;
    --paragraph-color: #aaaaaa;
    --date-color: rgb(120, 120, 120);
    --title-color: #40e0d0;
    --link-color: #2f67ff;
    --avatar-backcolor: blue;
    --icon-color: white;
    --icon-hover-color: #40e0d0;
    --active-page-bg: green;
    --active-page-dropdown-bg: lightgreen;
    --tab-color: rgb(120, 120, 120);
    --tab-color-focus: steelblue;
    --dialog-background: white;
    --header-color: white;
    --btn-backcolor: #21726A;
    --btn-backcolor-hover: #33b3a6;
    --brand-color: #40e0d0;
    --time-color: #cccccc;
}

.container {
    padding: 0 1em;
    max-width: 800px;
    margin: 0 auto;
}

.container2 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 2rem;
    /* max-width: 800px; */
    width: 60%;
}

header {
    min-height: 300px;
}

a {
    text-decoration: none;
}

/* headers */
h1, h2, h3, h4 {
    color: var(--text-color);
    font-family: Roboto, "Helvetica Neue", sans-serif;
}

/* h1 {
    font-size: clamp(2rem, 1rem + 10vw, 5rem);
} */

/* home */

.large-header {
    font-size: 64px;
    font-weight: 500;
    color: var(--header-color);
}

.medium-header {
    font-size: 48px;
    font-weight: 500;
    color: var(--header-color);
}

.icon-link {
    color: var(--icon-color);
    transition: 0.5s;
}

.icon-link:hover {
    color: var(--icon-hover-color);
    transition: all 0.5s ease-out;
}

.btn {
    text-decoration: none;
    font-size: x-large;
    color: var(--text-color);
    border-radius: 10px;
    background-color: var(--btn-backcolor);
}

.btn:hover {
    background-color: var(--btn-backcolor-hover);
    transition: all 0.5s ease-out;
}

.btn,
.btn-dark {
  display: block;
  padding: 0.5rem 1rem;
  border: 0;
  margin-bottom: 0.3rem;
  width: fit-content;
  max-width: 250px;
  font-size: x-large;
  border-radius: 50px;
}

.btn:hover,
.btn-dark:hover {
  background: #39c9bb;
  color: black;
}

.btn-dark {
  background: var(--topnav-backcolor);;
  color: white;
}