/* Text imports */
@import url('https://fonts.googleapis.com/css2?family=Agbalumo&display=swap');

@font-face {
font-family: 'Magica';
src: url(https://static.tumblr.com/p6yopnt/Qkiqnu0r5/theheart.ttf);
 }

@font-face {
src: url(https://dl.dropbox.com/s/8p8mi5uzbekohv7/Starborn.ttf);
font-family: starborn;
}

/* Variables I forget to use */
:root {
  --cursor: url(https://www.rw-designer.com/cursor-image/104954-32x32.png) 24 24, auto;
  --background: url(https://i.pinimg.com/736x/23/7a/19/237a194ce293287dac7111dd3b44a7e1.jpg);
  --text-color: #9E3C6D;
  --font-family: "Agbalumo", system-ui;
  --font-weight: 200;
}

/* Key frames */
    @keyframes pagedoll {
  0%, 100% {transform: rotate(10deg);}
  50% {transform: rotate(0deg);}
}
@keyframes stamps {
  0% {
    transform: translateX(0);
}

100% {
    transform: translateX(-50%);
}
}
/* Body */
body {
  cursor: var(--cursor);
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-style: normal;
  background-image: var(--background);
  color: var(--text-color);
  background-size: 100%;
  padding: 20px;
  max-width: 1000px;
  margin: 0px auto;
}


/* Links */
a, a:hover, a:focus, a:active {
  color: var(--text-color);
  cursor: var(--cursor)
    transition: 0.8s ease;
}

  a {
    text-decoration: none;
  }

/* Scroll bar */
::-webkit-scrollbar {
  display: none;
}

/* Navbar links */
header > ul> li > a {
  display: block;
  transition: 0.8s ease;
  }
 
.navbar-btns:hover {
   transform: rotate(15deg);
    text-shadow: 0px 2px 0px #E0487A; 
    transition: 1.1s ease;
  }
  
  .navbar-btns {
    transition: 0.8s ease;
  }
 .dropdown-content li {
  display: none;
  padding: 10px;
  margin-left: -60px;
  list-style: none;
  background-color: #FFCCD8;
  border-radius: 0px 0px 20px 20px;
}
.dropbtn:hover .dropdown-content li{
  display: block;
}
/* Container under Navbar */
  .main-container {
    max-width: 960px;
    font-family: Magica;
    font-weight: 400;
    font-size: 20px;
    background-color: white; 
    background-image: url(https://64.media.tumblr.com/4dc89cec46aac7f6e6f620031123affe/e3a02e58a5b271e4-19/s2048x3072/c6dc92d0bfc1f5fc6b1734b509e9877018fe368e.pnj); background-size: 100% 100%;
    height: 900px;
    padding: 10px 20px;
  }
  
/* Welcome section  */
  .welcome-section {
display: flex;
  }

/* Page doll */
.pagedoll img {
  display: block;
  animation: pagedoll 3s ease-in-out infinite;
  }
 
/* Tooltipster */
  .tooltip {
    position: relative;
    transition: 1s ease;
  }
  
  .tooltip .tooltip-text::before {
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    background: pink;
    right: -16px;
    border-radius: 100%;
       transition:  1s ease;
  }
    .tooltip .tooltip-text::before {
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    background: pink;
    right: -16px;
    border-radius: 100%;
       transition:  1s ease;
  }
    .tooltip .tooltip-text::before {
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    background: pink;
    right: -16px;
    border-radius: 100%;
       transition:  1s ease;
    border:2px solid white;
  }
      .tooltip .tooltip-text::after {
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    background: pink;
    right: -30px;
    top: 20px;
    border-radius: 100%;
       transition:  1s ease;
    border:2px solid white;
  }
  .tooltip .tooltip-text {
  visibility: hidden;
  width: 120px;
  background-color: pink;
  color: white;
  border-radius: 8px;
  text-align: center;
  padding: 5px 5px;
  position: absolute;
  margin-left: -60px ;
  margin-top: -300px;
  z-index: 1;
    transition: 1s ease;
 border:2px solid white;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
   transition: 1s ease;

}


/* second section */
.second-section {
  display: flex;
}

.tamanotchi {
  margin-left: 20px;
}
.pokemon {
  text-align: center;
}
.stamps {
  width: 400px;
  background: #FFDBE7;
  margin-left: 26px;
padding: 16px;
  border: 15px transparent solid;
  border-image: url(https://64.media.tumblr.com/cad16fd5ad0124f7ee63196939ab265e/b87029eebad30575-6f/s1280x1920/6922b454e4f754d4893b124d5972cc353dfd5de5.pnj) 15% round;
  border-image-outset: 10px;
}
.collection {
  overflow: hidden;
}

.actual-stamps {
    width: max-content;
    display: flex;
    gap: 6px;
    padding: 6px;
  animation: stamps 16s linear infinite;
  overflow-clip-margin: content-box;
    overflow: clip;
}
.actual-stamps img {
    display: block;
  margin-top: 20px;
  height: 50px;
}
.quick-links {
  margin-left: 40px;
  margin-top: -20px;
  border: 15px solid transparent;
  border-image: url(https://64.media.tumblr.com/ef8a9c5b8979fa79e2c880109ddf11a7/57163d0c63f82bb0-5d/s250x400/dc722671e58b397868bd3d7c9cbabd022a5546f8.pnj) 15% round;
  background: #FFDBE7;
  border-image-outset: 10px;
  width: 100px;
}
.third-section {
  margin-top: 20px;
  display: flex;
}
.links-text {
  margin-top: -5px;
  font-family: starborn;
  color: #ED80B5;
text-shadow: 0px 0px 2px #C94084;
  font-size: 15px;
  text-align: center;
  margin-left: -8px;
  position: absolute;
}
.blog-roll p {
   font-family: starborn;
  font-size: 14px;
  color: #ED80B5;
text-shadow: 0px 0px 2px #C94084;
  text-align: center;
}

.blog-roll {
  width: 240px;
  display: row;
}
.pagedolls img {
  display:block;
}
.add-me p {
   font-family: starborn;
  font-size: 14px;
  color: #ED80B5;
text-shadow: 0px 0px 2px #C94084;
  text-align: center;
  width: 220px;
  margin-top: -70px;
}
.add-me textarea {
  margin-left: 15px;
  height: 100px;
  border: 2px solid #ED80B5;
  color: #ED80B5;
  padding: 8px;
}
.art-section {
  width: 250px;
  border: 5px double #ED80B5;
  background-color: #FFEDF4;

}
.art-section p {
  font-family: starborn;
  color: white;
  background-color: #ED80B5;
  text-align: center;
  margin: 0;
}

.art-image {
  padding: 0px;
}

.p2 {
  font-size: 12px;
  text-align: center;
}

#calendar {
  height: 200px;
  width: 200px;
  border: #ED80B5 solid 2px;
  color: #FF5499;
}
#calendarHeader {
  background: #ED80B5;
  font-family: starborn;
  color: white;
  border: 1px solid #FF5499;
}
.calendarCell {
  color: #FF5499;
  font-family: starborn;
  border: 1px solid #ED80B5;
}
#calendarGrid {
  background: #FFDEE9;
  
}
.calendarDayOfTheWeek {
  color: white;
  background: #ED80B5;
  border: 1px solid #ED80B5;
}
.calendarCell {
  border: 1px solid #ED80B5;
}
.calendarNonMonthDay {
  color: #DBA2B6;
}
.calendarToday {
  color: white;
   background: #ED80B5;
}
:where(#calendarHeader, .calendarDayOfTheWeek, .calendarCell)  {
  border: 1px solid #ED80B5;
}
.last-section {
  display: flex;
}
.webring-header {
  font-family: starborn;
  color: #ED80B5;
  text-align: center;
}
.webrings {
  margin-top: -80px;
 margin-left: 50px;
}
.web-box {
  background: #FFDBE7;
  overflow-y: auto;
  padding: 10px;
  width: 300px;
  height: 60px;
  border: 15px transparent solid;
  border-image: url(https://64.media.tumblr.com/58310ee27442fd9606423c4318e5a131/81d93f418261215e-24/s1280x1920/74131290aa60147c6194745d645a0e1010c45e77.pnj) 15% round;
  border-image-outset: 15px;
}
.blinkies {
  margin-top: 20px;
  overflow-y: auto;
  height: 80px;
  text-align: center;
  margin-left: 150px;
}