body {
  font-family: SF Pro Text-Meduim, sans-serif;
  background: var(--background);
  padding: 0px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0px;
}

@font-face {
  font-family: SF Pro Text-Bold;
  src: url(SF-Pro-Text-Bold.otf);
}

@font-face {
  font-family: SF Pro Text-Semibold;
  src: url(SF-Pro-Text-Semibold.otf);
}

@font-face {
  font-family: SF Pro Text-Meduim;
  src: url(SF-Pro-Text-Medium.otf);
}

@font-face {
  font-family: SF Pro Text;
  src: url(SF-Pro-Text-Regular.otf);
}

@font-face {
  font-family: SF Pro Text-Mono;
  src: url(SFMono-Regular.otf);
}


/*dark theme*/
/*:root {
  --actioncolor: #F6FFD6;
  --text: #DBE1FF;
  --background: #0C2630;
  --highlight: #214F60;
}*/

/*light theme*/
:root {
  --actioncolor: #4E3DB9;
  --text: #4E3DB9;
  --caps:#F8FFDD;
  --background: #D9D9F8;
  --highlight: #F1FDC6;
  --hover:#9898F1;
}

br {
  content: "";
  margin: 1em;
  display: block;
  font-size: 10%;
}


a {
  color: var(--text);
}


a:hover {
  color: var(--hover);
  text-decoration: underline;
}

h1 {
  color: var(--text);
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 139.13% */
  width: 75vw;
  padding: 0px 16px 24px 16px;
  margin: 8px 0px 0px 0px;
}

p {
  opacity: 1;
  color: var(--text);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  padding-left: 16px;

}

/*bold text*/
/*.highlight_h {
  color: var(--text);
  font-family: SF Pro Text-Bold;
  font-size: 46px;
  font-style: normal;
  font-weight: 700;
  line-height: 64px;
}*/

/*BG color*/
.highlight_h {
  color: var(--actioncolor);
  font-family: SF Pro Text-Bold;
  background-color: var(--highlight);
  padding: 0 6px;
  line-height: 130%;
  border-radius: 6px;
}

.highlight_p {
  color: var(--text);
  font-family: SF Pro Text-Bold;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 64px;
}

.caps {
  color: var(--caps);
  font-family: SF Pro Text-Mono;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
  letter-spacing: 0.96px;
  text-transform: uppercase;
  opacity: 1;
  gap: 16px;
  max-width: 100vw;
  white-space: nowrap;
  overflow: hidden;
}

.tag {
/*  display: flex;*/
padding: 4px 12px 4px 12px;
border-radius: 4px;
border: 1px solid var(--actioncolor);
color: var(--actioncolor);
under construction
font-size: 12px;
line-height: 24px; /* 150% */
letter-spacing: 0.96px;
text-transform: uppercase;
margin: 8px;
}



/* Responsive Style */
/* Responsive Style */

@media (max-width: 1500px) {


}


@media (max-width: 1180px) {
  h1 {
    color: var(--text);
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 139.13% */
    width: 90vw;
    padding: 0px 8px 24px 8px;
    margin: 8px 0px 0px 0px;
  }

  p {
    opacity: 1;
    color: var(--text);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    padding-left: 8px; 
  }

/* mobile phones */
@media (max-width: 650px) {

  p {
    opacity: 1;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    padding-left: 8px;

  }

  h1 {

    font-size: 34px;
    line-height: 130%;
    width: auto;
    padding-left: 8px;
    margin-bottom: 40px;

  }

  .caps {
    color: var(--text);
    font-family: SF Pro Text-Mono;
    font-size: 14px;
    line-height: 24px; /* 150% */
    letter-spacing: 0.96px;
    text-transform: uppercase;
    opacity: 0.5;
    gap: 16px;
    max-width: 100vw;
    white-space: nowrap;
    overflow: hidden;
  }
}