body {
    font-family: 'Akshar';
    background-color: #151515;
    color: #EEE;
}
* {
    padding: 0;
    margin: 0;
}
p { padding: 0.5rem 0 0.75rem 0 }
a {
    color: inherit;
    text-decoration: none;
    font-style: italic;
}
a path {
  stroke: #EEE;
}

.flexbox {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.flex-column { flex-direction: column; }
.flex-end { justify-content: flex-end; }

#navbar {
    position: sticky;
    top: 0;
    overflow: hidden;
    background-color: #151515;

    justify-content: space-between;
    padding: 0 1rem;

    box-shadow: 0 0 0.25rem 0.125rem rgba(0, 0, 0, 0.5);
    height: 4rem;
    max-width: 100%;
    z-index: 10;
}
#navbar * { max-height: 2rem; text-wrap: nowrap; }
#navbar a { font-style: normal; font-size: 125%; }
/* hide the name if the screen width gets small enough */
@media screen and (max-width: 768px) {
  #navbar > :first-child {
    display: none;
  }
  #navbar a { font-size: 150%; }
}

#content {
    font-size: clamp(12px, 1.5vw, 16px);
    --padding: clamp(2rem, 6.0vw, 5rem);
}
#content > div:nth-child(odd) {
    background-color: #202020;
}

#start {
    background-image: url('front.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: inset 0 -0.25rem 0.25rem -0.125rem rgba(0, 0, 0, 0.5);
    overflow: clip;
}
#start > div {
    padding: var(--padding);
    width: calc(100vw - calc(var(--padding) * 2));
    min-height: calc(100vh - 4rem - calc(var(--padding) * 2));
    font-size: 180%;
    background-color: rgba(0, 0, 0, 0.75);
    overflow: scroll;

    display: flex;
    align-items: center;
    justify-content: center;
}

.section {
    padding: var(--padding);
    min-height: calc(20rem - calc(var(--padding) * 2));
    width: calc(100% - calc(var(--padding) * 2));
    font-size: 180%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--padding) * 1.5);
}
.section > :first-child {
    width: 25rem;
    flex-shrink: 0;
    justify-items: center;
    text-wrap: nowrap;
}
.section > div > div { gap: 2rem; }
.section img { max-height: 6rem; }
.section a { font-size: 75%; }

@media screen and (max-width: 900px) {
  .section {
      height: auto;
      gap: 1rem;
      flex-direction: column;
  }
}