:root {
  --background-color: #eedeb1;
  --background-banner-height: 350px;
  --background-banner-radius: 300vw;
  --background-banner-radius-half: 150vw;
  --background-banner-color: #b66c6b;
  --background-banner-color-rotate: calc(360deg / 19);
  --side-padding: 16vw;
}

@media only screen and (max-width: 640px) {
  :root {
    --background-banner-height: calc(100vw * 500 / 640);
  }
}

@font-face {
  font-family: BogartExtrabold;
  src: url(../fonts/bogart/Bogart-Extrabold-trial.ttf);
}

@font-face {
  font-family: BogartBoldItalic;
  src: url(../fonts/bogart/Bogart-Bold-Italic-trial.ttf);
}

@font-face {
  font-family: RobotoMedium;
  src: url(../fonts/Roboto/Roboto-Medium.ttf);
}

@font-face {
  font-family: RobotoRegular;
  src: url(../fonts/Roboto/Roboto-Regular.ttf);
}

body {
  position: relative;
  background-color: var(--background-color);
  margin: 0;
  padding: 0px;
  overflow: auto;
}

#main {
  display: flex;
  width: 100vw;
  max-width: 1200px;
  flex-direction: column;
  margin: 0px auto;
}

.content {
  display: flex;
  width: calc(100% - var(--side-padding));
  max-width: 1000px;
  flex-direction: column;
  margin: 0px auto;
}

#main-content {
  margin-top: 245px;
}

@media only screen and (max-width: 734px) {
  #main-content {
    margin-top: 237px;
  }
}

/* @media only screen and (max-width: 535px) {
  #main-content {
    margin-top: calc(100vw * 180 / 500);
  }
} */

@media only screen and (max-width: 535px) {
  #main-content {
    margin-top: calc(100vw * 230 / 500);
  }
}

.border-line {
  height: 2px;
  background-color: #000;
}

h3 {
  font-size: 3em;
  font-family: RobotoMedium;
  text-align: center;
  margin-top: 80px;
  margin-bottom: 55px;
  overflow-wrap: break-word;
  width: 100%;
}

h4 {
  font-size: 2.1em;
  font-family: RobotoMedium;
  text-align: center;
  margin-top: 55px;
  margin-bottom: 47px;
  overflow-wrap: break-word;
  width: 100%;
}