@import url("https://fonts.googleapis.com/css2?family=Estonia&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IM+Fell+French+Canon+SC&display=swap");

body {
  background-image: url("https://i.pinimg.com/1200x/de/27/06/de27064d80cca5427b337143c6893e29.jpg");
  background-size: cover;
  justify-content: center;
  text-align: center;
}

main {
  margin-top: 2%;
}

header {
  margin: 0 auto;
}

figcaption {
  margin: 0 auto;
  font-family: "IM Fell French Canon SC", serif;
  font-weight: 600;
  font-style: normal;
  color: #f3d6dfff;
  font-size: 100%;
  padding-bottom: 5%;
}

.section1 {
  padding-bottom: 2%;
}

.button1 {
  background: radial-gradient(
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 199, 244, 1) 35%,
    rgba(248, 81, 217, 1) 100%
  );
  border-radius: 20px;
  font-family: ;
  margin: 0 auto;
  font-family: "IM Fell French Canon SC", serif;
  font-weight: 600;
  font-style: normal;
  color: #000000ff;
  padding-top: 1%;
  padding-bottom: 1%;
  height: 50%;
  width: 10%;
}

.button2 {
  border-radius: 5px;
  color: black;
  cursor: pointer;
  background: white;
  border: 1px solid #ff91edff;
  outline: none;
  transition: 1s ease-in-out;
  padding-top: 1%;
  padding-bottom: 1%;
  height: 50%;
  width: 10%;
}

.button2:hover {
  transition: 1s ease-in-out;
  background: #da4fb3ff;
}

.button3 {
  border: none;
  outline: none;
  color: #ffffffff;
  background: #ffffffff;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  padding-top: 1%;
  padding-bottom: 1%;
  height: 50%;
  width: 10%;
  margin: 0 auto;
  font-family: "IM Fell French Canon SC", serif;
  font-weight: 600;
  font-style: normal;
  color: #ffffffff;
  font-size: 100%;
}

.button3:before {
  content: "";
  background: linear-gradient(
    45deg,
    #ff0000,
    #ff7300,
    #fffb00,
    #48ff00,
    #00ffd5,
    #002bff,
    #7a00ff,
    #ff00c8,
    #ff0000
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}

.button3:active {
  color: #000;
}

.button3:active:after {
  background: transparent;
}

.button3:hover:before {
  opacity: 1;
}

.button3:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  left: 0;
  top: 0;
  border-radius: 10px;
}

@keyframes glowing {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.button4 {
  text-decoration: none;
  border: 1px solid rgb(146, 148, 248);
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  padding-top: 1%;
  padding-bottom: 1%;
  height: 50%;
  width: 10%;
  background: white;
  font-family: "IM Fell French Canon SC", serif;
  font-weight: 600;
  font-style: normal;
  color: #000000ff;
  font-size: 100%;
}

.button4:hover {
  box-shadow: 1px 1px 25px 10px rgba(146, 148, 248, 0.4);
}

.button4:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(146, 148, 248, 0.4),
    transparent
  );
  transition: all 650ms;
}

.button4:hover:before {
  left: 100%;
}

p {
  margin: 0 auto;
  font-family: "IM Fell French Canon SC", serif;
  font-weight: 600;
  font-style: normal;
  color: #f3d6dfff;
  font-size: 100%;
}

nav {
  margin: 0 auto;
  display: flex;
}

a {
  text-decoration: none;
  margin: 0 auto;
  color: #f3d6dfff;
}

ul {
  margin: 0 auto;
  font-family: "IM Fell French Canon SC", serif;
  font-weight: 600;
  font-style: normal;
  color: #f3d6dfff;
  font-size: 100%;
  padding-bottom: 5%;
  list-style-position: inside;
}

.sect1sect2 {
  background-color: black;
  margin-bottom: 3%;
  border-radius: 10%;
  padding-bottom: 1%;
}

.proj2 {
  background: url("https://www.shutterstock.com/shutterstock/videos/1102887087/thumb/1.jpg");
  padding: 30px;
  margin: 20px auto;
  max-width: 600px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: 3px solid #a8838f;
  height: 50%;
}

blockquote {
  font-family: "Georgia", serif;
  font-size: 1.2em;
  line-height: 1.6;
  color: #333;
  position: relative;
  padding-left: 40px;
  margin: 0;
}

blockquote::before {
  content: "“";
  font-size: 4em;
  color: #ccc;
  position: absolute;
  left: 0;
  top: -15px;
}

blockquote::after {
  content: "”";
  font-size: 4em;
  color: #ccc;
  position: absolute;
  right: 0;
  top: -15px;
}

blockquote p {
  margin-bottom: 15px;
}

blockquote footer {
  font-size: 0.9em;
  color: #666;
  text-align: right;
  font-style: italic;
}

.h1-1 {
  margin: 0 auto;
  font-family: "Estonia", cursive;
  font-weight: 600;
  font-style: normal;
  color: #a8838f;
  font-size: 700%;
  text-align: center;
}

.h1-2 {
  margin: 0 auto;
  font-family: "Estonia", cursive;
  font-weight: 600;
  font-style: normal;
  color: #a8838f;
  font-size: 500%;
  text-align: center;
}

h2 {
  margin: 0 auto;
  font-family: "Estonia", cursive;
  font-weight: 600;
  font-style: normal;
  color: #a8838f;
  font-size: 700%;
  text-align: center;
}

h3 {
  margin: 0 auto;
  font-family: "IM Fell French Canon SC", serif;
  font-weight: 600;
  font-style: normal;
  color: #f3d6dfff;
  font-size: 200%;
  padding-bottom: 1%;
  padding-top: 2%;
}

.quote {
  color: white;
}

iframe {
  border-radius: 5%;
}

.list {
  background-color: black;
  border-radius: 20%;
}

.proj3 {
  margin: 0 auto;
  justify-content: center;
  float: center;
}

.proj4-h3 {
  padding-top: 5%;
}

.proj-4 {
  background-color: black;
  padding-bottom: 1%;
  border-radius: 10%;
}

/*Loader animation*/
.loader {
  display: inline-grid;
  width: 90px;
  aspect-ratio: 1;
  transform: rotate(90deg);
  animation: l4 1s linear infinite;
}
.loader:before,
.loader:after {
  content: "";
  grid-area: 1/1;
}
.loader:before {
  clip-path: polygon(
    100% 50%,
    90.45% 79.39%,
    65.45% 97.55%,
    34.55% 97.55%,
    9.55% 79.39%,
    0% 50%,
    9.55% 20.61%,
    34.55% 2.45%,
    65.45% 2.45%,
    90.45% 20.61%,
    100% 50%,
    85.6% 24.14%,
    63.6% 8.15%,
    36.4% 8.15%,
    14.4% 24.14%,
    6% 50%,
    14.4% 75.86%,
    36.4% 91.85%,
    63.6% 91.85%,
    85.6% 75.86%,
    94% 50%,
    85.6% 24.14%
  );
  background: #969696ff;
}
.loader:after {
  background: #ffc8daff;
  clip-path: polygon(
    100% 50%,
    65.45% 97.55%,
    9.55% 79.39%,
    9.55% 20.61%,
    65.45% 2.45%
  );
  margin: 27%;
  translate: 46% 0;
  transform-origin: right;
  animation: inherit;
}
@keyframes l4 {
  0% {
    rotate: 18deg;
  }
  to {
    rotate: -18deg;
  }
}

.divider {
  padding-top: 5%;
}
/*Loader2 animation*/
.loader2 {
  display: inline-grid;
  width: 20px;
  aspect-ratio: 1;
  background: #969696ff;
  animation: l12-0 4s steps(4) infinite, l12-1 6s linear infinite;
}
.loader2:before,
.loader2:after {
  content: "";
  grid-area: 1/1;
  background: #ffc8daff;
  clip-path: polygon(
    100% 50%,
    65.45% 97.55%,
    9.55% 79.39%,
    9.55% 20.61%,
    65.45% 2.45%
  );
  transform-origin: right;
  translate: -100% 50%;
  scale: 1.7;
  animation: l12-2 1s linear infinite;
}
.loader2:after {
  clip-path: polygon(
    90.45% 79.39%,
    34.55% 97.55%,
    0% 50%,
    34.55% 2.45%,
    90.45% 20.61%
  );
  transform-origin: left;
  translate: 100% -50%;
}
@keyframes l12-0 {
  to {
    rotate: 1turn;
  }
}
@keyframes l12-1 {
  to {
    transform: rotate(1turn);
  }
}
@keyframes l12-2 {
  0% {
    rotate: 36deg;
  }
  to {
    rotate: -126deg;
  }
}

p {
  height: 90px;
  width: 500px;
  margin: 100px auto;
  position: relative;
}

img {
  height: 100px;
  position: absolute;
  left: 0;
  offset-path: path("m 0 50 q 50-30 100-30 t 100 30 100 0 100-30 100 30");
  box-shadow: 1px 1px 3px #0008;
  transition: transform 0.4s ease-out,
    offset-path 0.4s cubic-bezier(0.77, -1.17, 0.75, 0.84), box-shadow 0.3s,
    z-index 0.3s;
  z-index: 0;
}

img:hover {
  transform: scale(3);
  offset-path: path("m 5 65 q 45-0 90-0 t 90 0 90 0 90-0 90 0");
  box-shadow: 3px 4px 10px #0006;
  z-index: 999;
}

/* 3 images */
img:nth-last-child(3):first-child {
  offset-distance: 17%;
}
img:nth-last-child(2):nth-child(2) {
  offset-distance: 49%;
}
img:last-child:nth-child(3) {
  offset-distance: 81%;
}

/* 4 images */
img:nth-last-child(4):first-child {
  offset-distance: 10%;
}
img:nth-last-child(3):nth-child(2) {
  offset-distance: 35%;
}
img:nth-last-child(2):nth-child(3) {
  offset-distance: 65%;
}
img:last-child:nth-child(4) {
  offset-distance: 90%;
}

/* 5 images */
img:nth-last-child(5):first-child {
  offset-distance: 0%;
}
img:nth-last-child(4):nth-child(2) {
  offset-distance: 25%;
}
img:nth-last-child(3):nth-child(3) {
  offset-distance: 51%;
}
img:nth-last-child(2):nth-child(4) {
  offset-distance: 75%;
}
img:last-child:nth-child(5) {
  offset-distance: 100%;
}