@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@700&display=swap");

body {
  width: 100vw;
  height: 100vh;
  background-color: #7a0e0e;
  font-size: 19px;
}

.margin {
  width: 100%;
  height: 100%;
  padding-left: 15vw;
  padding-right: 15vw;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.gold-trim {
  width: 10px;
  min-width: 10px;
  max-width: 10px;
  height: 100vh; /* Full height of viewport */
  background: linear-gradient(
    to right,
    #5a3d0f,
    /* Dark outer edge */ #d4af37,
    /* Rich gold */ #ffeb8e,
    /* Bright highlight */ #d4af37,
    /* Rich gold */ #5a3d0f /* Dark outer edge */
  );
}

.content {
  flex-grow: 1; /* horizontal stretch to fill */
  height: 100%;
  background-color: #faf9f6;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  overflow: hidden;
}

.header {
  padding: 25px 25px 10px 25px;
  background-color: black;
  text-align: center;
}

.header-boundary {
  width: 100%;
  height: 10px;
  background: linear-gradient(0deg, #faf9f6, black);
}

.main {
  flex-grow: 1; /* vertical stretch to fill */
  padding: 25px;
  overflow-y: auto;
}

p {
  text-align: justify;
  padding-right: 15px;
  padding-left: 15px;
}

ul {
  padding-left: calc(15px + 12px);
}

h1 {
  margin: 0;
  font-size: min(64px, 8vw);
  font-family: "Cinzel", serif;
  font-weight: 700;
  line-height: min(64px, 8vw);
  position: relative;
  display: inline-block;
  color: transparent;
  background: linear-gradient(to top, #ee4c00, #cca700, #ffff99);
  background-clip: text;
  -webkit-background-clip: text;
  z-index: 2;
}

h1::before {
  content: "Sovereignia"; /* Duplicate text */
  line-height: min(64px, 8vw);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  color: transparent;
  /* Calculations */
  /* (-1.5px)*(8vw/64px) = -0.1875vw */
  /* (8px)*(8vw/64px) = 1.25vw */
  text-shadow: 0px min(-1.5px, -0.1875vw) min(8px, 1vw) rgba(255, 250, 200, 0.9); /* Strong upward glow */
  z-index: 1;
}

h2 {
  margin: 0;
  font-size: 26px;
  font-family: "Cinzel", serif;
  font-weight: 700;
}
