@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap');

/*
credits/inspo:
      https://codepen.io/srithan/pen/ZJgOWY
      https://www.youtube.com/watch?v=B5qepgwIZxA&t=165s
      https://codepen.io/herrberk/pen/GqrMvo
      https://codepen.io/hi-im-si/pen/DHoup
*/

body {
  background-color:#f5efe1;
  text-align: justify;
  color:#000;
  padding-top:10%;
  padding-left:20%;
  padding-right:20%;
  padding-bottom:20%;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  cursor: none;
  animation: colorchange 60s infinite; 
  -webkit-animation: colorchange 60s infinite;
}

h2 {  
  font-weight: 600;
}

h1 {
  font-weight: 800;
}

h3 {
  font-size: 16px;
  font-weight: 500;
}

/* basic */
@keyframes colorchange
{
  0%   {background: #f5efe1;}
  25%  {background: #fa9370;}
  50%  {background: #fa7070;}
  75%  {background: #fa9370;}
  100% {background: #f5efe1;}
}

@-webkit-keyframes colorchange 
{
  0%   {background: #f5efe1;}
  25%  {background: #fa9370;}
  50%  {background: #fa7070;}
  75%  {background: #fa9370;}
  100% {background: #f5efe1;}
}


/* pink */
/* 
@keyframes colorchange
{
  0%   {background: #fad0c4;}
  25%  {background: #ff9a9e;}
  50%  {background: #fad0c4;}
  75%  {background: #ff9a9e;}
  100% {background: #fad0c4;}
}

@-webkit-keyframes colorchange 
{
  0%   {background: #fad0c4;}
  25%  {background: #ff9a9e;}
  50%  {background: #fad0c4;}
  75%  {background: #ff9a9e;}
  100% {background: #fad0c4;}
}*/

/* SUNSET */
/*
@keyframes colorchange
{
  0%   {background: #fa7070;}
  25%  {background: #fa9370;}
  50%  {background: #fa7070;}
  75%  {background: #fa9370;}
  100% {background: #fa7070;}
}

@-webkit-keyframes colorchange 
{
  0%   {background: #fa7070;}
  25%  {background: #fa9370;}
  50%  {background: #fa7070;}
  75%  {background: #fa9370;}
  100% {background: #fa7070;}
}
*/

img {
  width: 10%;
  height: auto;
  min-width: 60px;
}

* { color:#000; text-decoration: none;}

.underline--magical {
  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.2em;
  background-position: 0 88%;
  transition: background-size 0.25s ease-in;
}
.underline--magical:hover {
  background-size: 100% 88%;
}

a {
  font-weight: 800; 
}

@supports not(-webkit-text-stroke: 2px red) {
  a:hover {
    text-shadow:
      3px 3px 0 #000,
      -1px -1px 0 #000,
      1px -1px 0 #000,
      -1px 1px 0 #000,
      1px 1px 0 #000;
  }
}
a:hover {
  color: transparent;
  cursor: none;
  -webkit-text-stroke: 1px #000;
}

.cursor {
      pointer-events: none;
      position: fixed;
      padding: 0.25rem;
      background-color: #fff;
      border-radius: 50%;
      /*mix-blend-mode:  lighten;*/
      transition: transform 0.3s ease;
}