* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ----- GENERAL IMPORTS ----- */
/* Fonts */
/* Colors */
/* Style */
.body_wrapper .wands, .body_wrapper .rings, .body_wrapper .star {
  background-size: cover;
  text-decoration: none;
  width: 250px;
  height: 435px;
  box-shadow: 0 0 30px 10px #111111;
  border-radius: 20px;
}

.body_wrapper .wands .container, .body_wrapper .rings .container, .body_wrapper .star .container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 150px;
  left: 75px;
  background-color: rgba(255, 255, 255, 0.8784313725);
  width: 100px;
  height: 100px;
  border-radius: 20px;
  transform: rotate(45deg);
}
.body_wrapper .wands .container p, .body_wrapper .rings .container p, .body_wrapper .star .container p {
  transform: rotate(-45deg);
  color: #000000;
  font-size: 1.5rem;
}

.book1,
.book2,
.book3,
.book4 {
  background-image: url(../images/book.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: 4rem 0;
  width: 400px;
  height: 300px;
}

@keyframes backgroundIMG {
  100% {
    background-image: url(../images/potion_green.png);
    background-size: contain;
    background-repeat: no-repeat;
  }
}
@keyframes wiggle {
  0%, 10%, 100% {
    transform: translateX(0);
  }
  1%, 3%, 5%, 7%, 9% {
    transform: translateX(-10px) rotate(15deg);
  }
  2%, 4%, 6%, 8% {
    transform: translateX(10px) rotate(-15deg);
  }
}
@keyframes flash {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 0;
  }
}
@keyframes pulse {
  from {
    transform: scale(0.8);
  }
  to {
    transform: scale(1.2);
  }
}
@media screen and (min-width: 780px) {
  /* ----- INDEX ----- */
  .body_wrapper {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    place-items: center;
    gap: 0;
    row-gap: 2rem;
    grid-template-areas: "star . rings" " . wands .";
    width: 70%;
  }
  .body_wrapper .star {
    grid-area: star;
  }
  .body_wrapper .rings {
    grid-area: rings;
  }
  .body_wrapper .wands {
    grid-area: wands;
  }
  /* ----- PORTFOLIO ----- */
  .portfolio_container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    place-items: center;
    gap: 2rem;
    grid-template-areas: "book1 rune book2" "book3 rune book4";
  }
  .portfolio_container .book1 {
    grid-area: book1;
  }
  .portfolio_container .book2 {
    grid-area: book2;
  }
  .portfolio_container .book3 {
    grid-area: book3;
  }
  .portfolio_container .book4 {
    grid-area: book4;
  }
  .portfolio_container .rune {
    grid-area: rune;
  }
  .portfolio_container .portal {
    opacity: 0.8;
  }
  .portfolio_container .book1:hover + .eiwaz {
    opacity: 1;
  }
  .portfolio_container .book2:hover + .algiz {
    opacity: 1;
  }
  .portfolio_container .book3:hover + .ansuz {
    opacity: 1;
  }
  .portfolio_container .book4:hover + .perthro {
    opacity: 1;
  }
  /* ----- CONTACT ----- */
  .contact_container .big_circle,
  .contact_container .small_circle {
    opacity: 1;
  }
  .contact_container .circle3,
  .contact_container .circle4,
  .contact_container .circle6 {
    animation: flash 1s ease infinite alternate;
  }
}
@media screen and (min-width: 880px) {
  /* ----- ABOUT ----- */
  .about_container {
    grid-template-columns: 1fr 1fr;
    place-items: center;
    grid-template-areas: "pic box1" "box2 box2_text" "box4 box4" "apic3 apic3" "apic2 box3";
  }
  .about_container .about_pic {
    grid-area: pic;
  }
  .about_container .box1 {
    grid-area: box1;
  }
  .about_container .box2 {
    grid-area: box2;
  }
  .about_container .box2_text {
    grid-area: box2_text;
    display: flex;
    justify-content: space-between;
    width: 600px;
  }
  .about_container .box3 {
    grid-area: box4;
    width: 800px;
  }
  .about_container .box4 {
    grid-area: box3;
    text-align: right;
    opacity: 0;
    width: 600px;
  }
  .about_container .animate_pic2 {
    grid-area: apic2;
    position: relative;
    animation: wiggle 5s infinite;
  }
  .about_container .animate_pic3 {
    grid-area: apic3;
    opacity: 1;
    height: 600px;
  }
  .about_container .animate_pic3:hover ~ .animate_pic2,
  .about_container .animate_pic3:hover ~ .animate_pic2 + .box3 {
    opacity: 1;
  }
}
header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  background: #1a1919;
  height: 3rem;
  width: 100%;
  top: 0;
  z-index: 3;
}
header ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;
}

body {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4588235294), black), url(../images/BG-planks.jpg);
  background-size: cover;
  background-attachment: fixed;
  color: white;
  font-family: "Alice", system-ui;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  background: #1a1919;
  height: 3rem;
}

a:link {
  color: white;
  text-decoration: none;
}

a:visited {
  color: #504f4f;
}

/* ----- INDEX STYLE ----- */
.body_wrapper {
  display: grid;
  place-items: center;
  gap: 4rem;
  margin: 6rem auto;
}
.body_wrapper h1 {
  font-family: "Cinzel Decorative", serif;
  text-align: center;
}
.body_wrapper .star {
  background-image: url(../images/tarot_the-star.jpg);
  position: relative;
}
.body_wrapper .star .container {
  opacity: 1;
  transition: all 0.7s linear;
}
.body_wrapper .star:hover .container {
  opacity: 0;
}
.body_wrapper .rings {
  background-image: url(../images/tarot_eight-of-rings.jpg);
}
.body_wrapper .rings .container {
  transition: all 0.7s linear;
}
.body_wrapper .rings:hover .container {
  opacity: 0;
}
.body_wrapper .wands {
  background-image: url(../images/tarot_five-of-wands.PNG);
}
.body_wrapper .wands .container {
  transition: all 0.7s linear;
}
.body_wrapper .wands:hover .container {
  opacity: 0;
}

/* ----- ABOUT STYLE ----- */
.about_container {
  display: grid;
  place-items: center;
  gap: 2rem;
}
.about_container .box1 {
  text-align: center;
}
.about_container .box1 h2 {
  margin-bottom: 1rem;
}
.about_container .box1 .moon_ul {
  display: flex;
  justify-content: space-between;
  width: 400px;
  margin-top: 2rem;
  list-style-type: none;
}
.about_container .box1 .fa-moon {
  font-size: 1.5rem;
  position: relative;
}
.about_container .box2_text {
  width: 400px;
}
.about_container .box2_text .education {
  text-align: right;
}
.about_container .box2_text ul {
  margin-top: 2rem;
  list-style-type: none;
}
.about_container .box2_text ul li {
  margin: 1rem 0;
}
.about_container .box3 {
  margin: 1rem;
}
.about_container .box3 h2 {
  margin: 1rem;
  text-align: center;
}
.about_container .box4 {
  text-align: right;
  width: 400px;
  opacity: 0;
}

.about_pic {
  background-image: url(../images/Matze.jpg);
  background-position: center;
  background-size: contain;
  border-radius: 200px;
  box-shadow: 0 0 10px 10px #0e0d0d, 0 0 10px 10px #0e0d0d inset;
  width: 300px;
  height: 300px;
  margin-top: 2rem;
}
.about_pic:hover {
  animation: backgroundIMG 1s ease-in-out 0.3s;
}

.skill_potions {
  margin-top: 2rem;
}
.skill_potions img {
  width: 125px;
}

.animate_pic2 {
  height: 200px;
  opacity: 0;
}

.animate_pic3 {
  margin: -8rem 0;
  height: 300px;
  transform: rotate(90deg);
}

.animate_pic3:hover ~ .box4,
.animate_pic3:hover ~ .box4 + .animate_pic2 {
  opacity: 1;
}

/* ----- PORTFOLIO STYLE -----*/
.portfolio_container {
  display: grid;
  justify-content: center;
  align-items: center;
}

.rune {
  opacity: 0;
  width: 100px;
  max-height: 200px;
  position: absolute;
}

.perthro {
  max-height: 150px;
}

.portal {
  opacity: 0;
  position: absolute;
  width: 270px;
}

.book1 .portfolio_example,
.book2 .portfolio_example,
.book3 .portfolio_example,
.book4 .portfolio_example {
  background-image: url(https://picsum.photos/150/200);
  border-radius: 5px;
  width: 150px;
  height: 200px;
}
.book1 .portfolio_text,
.book2 .portfolio_text,
.book3 .portfolio_text,
.book4 .portfolio_text {
  color: black;
  width: 150px;
  height: 200px;
}
.book1 .portfolio_text h3,
.book2 .portfolio_text h3,
.book3 .portfolio_text h3,
.book4 .portfolio_text h3 {
  font-size: 1rem;
}

/* ----- CONTACT STYLE ----- */
.contact {
  height: 89vh;
}
.contact .contact_container {
  background: url(../images/Crystal-Ball.png) no-repeat center;
  background-size: contain;
  width: 350px;
  height: 480px;
  margin: 0 auto;
}
.contact .contact_container .contact_form {
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  position: relative;
}
.contact .contact_container .contact_form button {
  margin-top: 1rem;
}

.big_circle {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: whiteSmoke;
  position: relative;
  opacity: 0;
}

.small_circle {
  display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: whiteSmoke;
  position: relative;
  opacity: 0;
}

.circle1 {
  box-shadow: 2px -20px 30px 2.5px #1a7dce inset;
  animation: pulse 1.5s infinite ease-in-out alternate;
  top: 50px;
  left: -30px;
}

.circle2 {
  box-shadow: 2px -20px 30px 2.5px #771ace inset;
  animation: pulse 1s infinite ease-in-out alternate;
  top: 250px;
  left: 300px;
}

.circle3 {
  box-shadow: 2px -20px 30px 2.5px #080a97 inset;
  top: 75px;
  left: 250px;
}

.circle4 {
  box-shadow: 1px -10px 15px 1.2px #3f0897 inset;
  top: -25px;
  left: -200px;
}

.circle5 {
  box-shadow: 1px -10px 15px 1.2px #089778 inset;
  animation: pulse 2s infinite ease-in-out alternate;
  left: 225px;
}

.circle6 {
  box-shadow: 1px -10px 15px 1.2px #089778 inset;
  top: px;
  left: -200px;
}

.wrapper {
  margin: 4rem 2rem;
}
.wrapper h1 {
  font-family: "Cinzel Decorative", serif;
  text-align: center;
  font-size: 4rem;
  text-shadow: 10px 10px 10px rgb(30, 15, 44);
}/*# sourceMappingURL=main.css.map */