:root {
  --lite: #e1b4ff;
  --base: #ca8dff;
  --medium: #a370f8;
  --dark: #6542ca;
  --accent: #fcbe38;
}

@font-face {
  font-family: Starborn;
  src: url(font/Starborn.ttf);
}

@font-face {
  font-family: ShantellSans;
  src: url(font/ShantellSans.ttf);
}

body {
  background-color: var(--medium);
  font-family: ShantellSans;
  font-weight: 500;
  display: grid;
  place-items: center;
  background-image: url(img/bg-pattern.svg);
  background-size: 100px;
}

.main {
  display: grid;
  place-items: center;
  border-style: solid;
  border-radius: 40px;
  border-color: var(--dark);
  background-color: var(--lite);
  width: 80%;
  box-shadow: 0px 5px 10px 0px #4f349f9b;
}

main {
  border-style: solid;
  border-radius: 32px 32px 0px 0px;
  border-color: var(--dark);
  background-color: var(--medium);
  width: 98%;
}

header {
  border-style: solid;
  border-radius: 32px 32px 0px 0px;
  border-color: var(--dark);
  background-color: var(--medium);
  margin: 20px;
  width: 98%;
}

header h1 {
  display: inline;
  padding-bottom: 100px;
  text-align: center;
  padding: 200px 0 200px 0;
}

header img {
  width: 150px;
}

h1 {
  font-family: Starborn;
  font-weight: 100;
  font-size: 100px; 
  color: var(--dark);
}

p {
  font-size: 25px;
  color: var(--dark);
}

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

.excent {
  color: var(--accent);
}