body {
  margin: 0
}

body > header {
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
}

.paint-ht {
  background-color: #7d1538;
  top: 0;
  left: 0;
  width: 100%;
  height: 7vh;
  z-index: 0;
  position: absolute;
}

.paint-hc {
  background-image: linear-gradient(to bottom, #7d1538 0%, #bc2c1a 30% 89%, #e1fef9 90%, #d3f3ee 90.5% 100%);
  height: 93vh;
  top: 7vh;
  left: 0;
  width: 100%;
  z-index: 0;
  position: absolute;
}

.paint-svg {
  background: url('img/img.svg') no-repeat center center / cover;
  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  position: absolute;
}

.ht-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ht-navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 20px;
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.header-top {
  display: flex;
  justify-content: space-between;
  height: 68px;
  position: relative;
  z-index: 2;
}

.header-content {
  height: 932px;
  flex-grow: 1;
  z-index: -1;
  position: relative;
  z-index: 2;
}

.ht-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 20px;
  color: #d4b306;
  font-size: 36px;
  font-family: Sekaiwo;
}

.ht-navigation ul > li {
  color: #d4b306;
  font-size: 24px;
  font-family: Radlush;
  font-weight: 500;
}



.header-content section {
  padding-top: 10vh;
  padding-bottom: 60vh;
  padding-left: 10vw;
  padding-right: 50vw;
  color: #dacc3e;
}

.hc-hero {
  font-size: 82px;
  font-family: Sekaiwo;
  margin-bottom:0;
}

.uline {
  text-decoration: underline;
}

.hc-hero-secondary {
  margin: 32px 0;
  font-size: 28px;
  font-family: Radlush;
  font-weight: 500;
}

button.hc-button {
  font-size: 18px;
  font-family: Radlush;
  font-weight: 500;
  background-color: #bc2c1a;
  color: #d4b306;
  box-shadow:
  -3px -3px 10px rgba(255, 255, 255, 0.4),
  3px 3px 10px rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  border: 0px;
  padding: 12px;
}

button.hc-button:hover {
  background-color: #d4b306;
  color: #bc2c1a;
  transition: 0.4s;
}

/* non-header sections */

/* main-illust */

.main-illust {
  height: 100vh;
  background-color: #d3f3ee;
  color:#407379;
  font-family: Radlush;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.main-quotes {
  height: 80vh;
  background-color: #7fb7be;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.main-action {
  height: 60vh;
  background-color: #d3f3ee;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mq-box {
  width: 50vw;
}

footer {
  display: flex;
  height: 10vh;
  justify-content: center;
  align-items: center;
  background-color: #7d1538;
  color: #DACC3E;
  font-family: Radlush;
  font-weight: 500;
  font-size: 16px;
}

/* main-illust */

header.mi-header {
  font-weight: 1000;
  font-size: 48px;
  margin-bottom: 36px;
}

div.mi-points {
  padding: 24px;
}

div.mi-points ul {
  font-weight: 500;
  font-size: 24px;
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: space-evenly;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 100px;
}

.mi-points ul > li {
  padding: 20px;
  flex-grow: 0;
  flex-basis: 35vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 8px;
  background: #d3f3ee;
  box-shadow:
  -3px -3px 10px rgba(255, 255, 255, 0.7),
  3px 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 20px;
}

li .icon img {
  width: 9vw;
}

/* main-quotes */

.mq-content {
  font-size: 48px;
  font-family: Sekaiwo;
  color: #e1fef9;
  margin: 30px 0;
}

.mq-ref {
  font-size: 24px; font-family: 'Radlush'; font-weight: 500; color: #407379;
  text-align: right;
}

.mq-box {
  width: 60vw;
  text-shadow: 1px 1px 2px gray;
}

.main-quotes {
  background-image: url('img/everaldo-coelho.jpg');
  background-attachment: fixed;
  background-size: cover;
}

/* main-action */

.sign-up {
  width: 70vw;
  height: 20vh;
  background-color: #407379;
  color: #e1fef9;
  box-shadow:
  -4px -4px 10px rgba(255, 255, 255, 0.8),
  3px 3px 10px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 60px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 50px;
}

.su-right {
  font-size: 18px;
  font-family: Radlush;
  font-weight: 1000;
  background-color: #407379;
  color: #e1fef9;
  box-shadow:
  -3px -3px 10px rgba(255, 255, 255, 0.4),
  3px 3px 10px rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  border: 0px;
  padding: 10px;
  flex: 1;
}

button.su-right:hover {
  background-color: #d3f3ee;;
  color: #407379;
  transition: 0.4s;
}

.su-left {
  flex: 3;
}

.su-main, .su-secondary {
  font-size: 24px; font-family: 'Radlush'; font-weight: 500; color: #d3f3ee;
  margin-top: 16px;
  margin-bottom: 16px;
}

.su-main {
  font-size: 36px;
  font-weight: 1000;
}

.su-logo {
  color: #d4b306;
  font-size: 36px;
  font-family: Sekaiwo;
}