header, h1, h2, h3, img, span, div, p, body, html {
  margin: 0;
  padding: 0;
}

body {
  background: #4f2ec7; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #4f2ec7 25%, #f72e98 90%, #f72e98 95%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #4f2ec7 25%,#f72e98 90%,#f72e98 95%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #4f2ec7 25%,#f72e98 90%,#f72e98 95%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f2ec7', endColorstr='#f72e98',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  background-attachment:fixed;
}

header {
  background: linear-gradient(135deg,#36208c,#752179);
  background-attachment:fixed;
  display: flex;
  align-items: center;
  height: 96px;
  padding: 28px;
}

* {
  box-sizing: border-box;
}

h1, h2 {
  color: #1928b1;
}

p {
  margin: 1rem 0;
}

.esba-container {
  background-color: white;
}

.container {
  text-align: center;
  height: 100%;
  color: white;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4f2ec7+25,f72e98+90,f72e98+95 */
}

.content {
  max-width: 800px;
  height: 500px;
  margin-inline: auto;

  display: flex;
  /* justify-content: center; */
  align-items: center;
  flex-direction: column;
}

.title {
  padding-top: 8rem;
  text-align: center;
  padding-bottom: 2rem;
}

.text {
  font-size: 1.6rem;
  padding: 2rem 18vw ;
  text-align: justify;
}

#banner {
  position: fixed;
  height: 20%;
  width: auto;
  top: 0;
  right: 0;
  z-index: 2;
}

#img-moving {
  height: 300px;
  padding-top: 4rem;
}

#image {
  max-width: 100%;
  position:relative;
  left:50%;
  transform: translateX(-50%);
}

#main-title, #hello-title {
  color: white;
}

#main-title {
  padding-block: 2rem;
}

#hello-title {
  word-spacing: 0.25rem;
}

#main-link {
  text-decoration: none;
}

/* CSS */
#main-button {
  background: #fff;
  backface-visibility: hidden;
  border-radius: .375rem;
  border-style: solid;
  border-width: .125rem;
  border-color: #752179;
  box-sizing: border-box;
  color: #212121;
  cursor: pointer;
  display: inline-block;
  font-family: Circular,Helvetica,sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  padding: .875rem 1.125rem;
  position: relative;
  text-align: left;
  text-decoration: none;
  transform: translateZ(0) scale(1);
  transition: transform .2s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;

  margin-top: 1rem;
}

#main-button:not(:disabled):hover {
  transform: scale(1.05);
}

#main-button:not(:disabled):hover:active {
  transform: scale(1.05) translateY(.125rem);
}

#main-button:focus {
  outline: 0 solid transparent;
}

#main-button:focus:before {
  content: "";
  left: calc(-1*.375rem);
  pointer-events: none;
  position: absolute;
  top: calc(-1*.375rem);
  transition: border-radius;
  user-select: none;
}

#main-button:focus:not(:focus-visible) {
  outline: 0 solid transparent;
}

#main-button:focus:not(:focus-visible):before {
  border-width: 0;
}

#main-button:not(:disabled):active {
  transform: translateY(.125rem);
}