.title {
    color: green;
}

body{
    background-color: midnightblue;
}

#Title{
    text-align: center;
    font-family:"Jacquard 24";
    font-size: 5rem;
    border-style: inset;
    border-width: 10px;
    border-color: goldenrod;
    margin-bottom: 1px;
    margin-top: 1px;
    text-shadow: 0px 0px 20px white;
}

.jacquard-24-regular {
  font-family: "Jacquard 24", system-ui;
  font-weight: 400;
  font-style: normal;
}

.center-img {
    display:block;
    margin: 0 auto;
}

.right-img {
    display:block;
    margin: 60 auto;
    
}

.large-png{
    position: relative;
    width: 400px;
    height: 300px;
    overflow: hidden;
}

#pot{
    display: block;
}

/* This is to create the top images under the title */
.image-row{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1px;
}

.side-img{
    width: 300px;
    transform: scale(2)
}

.center-imgs,
.side-img {
    display: block;
}

#welcometext {
    font-family:"Jacquard 24";
    
    font-size: 2.5rem;
}

.absolute-img {
    position: absolute
}

.outlined-text {
  color: #000000; /* fill color */
  -webkit-text-stroke: 1px #eeeeee; /* outline thickness + color */
  font-size: 48px;
  font-weight: 1;
}


.welcome-row {
  display: flex;              /* side by side */
  align-items: center;        /* vertical center */
  justify-content: flex-end;  /* push content to the right */
  gap: 20px;                  /* space between GIF and text */
}

.wizard-gif {
  width: 300px;               /* adjust size */
  height: auto;               /* keeps proportions */
  flex-shrink: 0;  
}

.align-right {
  text-align: right;           /* text lines up to the right inside its box */
}


#guestbooktext{
    text-align: center;
    font-family:"Jacquard 24";
    font-size: 3rem;
}

/* THis is for the wavy text on the guest book */
.wave span{
    display: inline-block;
    animation: wave 1s infinite
}

.wave span:nth-child(1)  { animation-delay: 0s; }
.wave span:nth-child(2)  { animation-delay: 0.05s; }
.wave span:nth-child(3)  { animation-delay: 0.1s; }
.wave span:nth-child(4)  { animation-delay: 0.15s; }
.wave span:nth-child(5)  { animation-delay: 0.2s; }
.wave span:nth-child(6)  { animation-delay: 0.25s; }
.wave span:nth-child(7)  { animation-delay: 0.3s; }
.wave span:nth-child(8)  { animation-delay: 0.35s; }
.wave span:nth-child(9)  { animation-delay: 0.4s; }
.wave span:nth-child(10) { animation-delay: 0.45s; }
.wave span:nth-child(11) { animation-delay: 0.5s; }
.wave span:nth-child(12) { animation-delay: 0.55s; }
.wave span:nth-child(13) { animation-delay: 0.6s; }
.wave span:nth-child(14) { animation-delay: 0.65s; }
.wave span:nth-child(15) { animation-delay: 0.7s; }
.wave span:nth-child(16) { animation-delay: 0.75s; }
.wave span:nth-child(17) { animation-delay: 0.8s; }
.wave span:nth-child(18) { animation-delay: 0.85s; }
.wave span:nth-child(19) { animation-delay: 0.9s; }
.wave span:nth-child(20) { animation-delay: 0.95s; }
.wave span:nth-child(21) { animation-delay: 1s; }
.wave span:nth-child(22) { animation-delay: 1.05s; }
.wave span:nth-child(23) { animation-delay: 1.1s; }
.wave span:nth-child(24) { animation-delay: 1.15s; }
.wave span:nth-child(25) { animation-delay: 1.2s; }

@keyframes wave {
    0%, 100% {transform: translateY(0); }
    50% {transform: translateY(-12px);}
}

h3.wave{
    color: mediumpurple
}

/*END wavy text*/


/* These classes should help with getting images on the left and right side of the page*/
.left-img {
  float: left;      /* moves the image to the left */
  margin-right: 20px;  /* space between image and content */
}

.right-img {
  float: right;     /* moves the image to the right */
  margin-left: 20px;   /* space between image and content */
}

#dancerR {
  position: absolute;
  top: 2569px;
  left: 1105px;
}

#dancerL{
    position: absolute;
    top: 2556px;
    left: 652px;
}

#BlogTitle {
    text-align: center;
    font-family:"Jacquard 24";
    font-size: 3rem;
    text-shadow: 0px 0px 4px white, -7px 10px 30px gold;
}

#desktoponly{
    position: absolute;
    top: 217px;
    left: 1617px;
}

#BlogPost1{
    text-align: center;
    font-size: x-large;
    text-shadow: -2px 6px 17px white
}



#archR{
    position: absolute;
    top: 353px;
    left: 1643px;
}

#archL{
    position: absolute;
    top: 354px;
    left: 10px;
}

#vinecornerL{
    position: absolute;
    top: 354px;
    left: 215px;
}

#vinecornerR{
    position: absolute;
    top: 354px;
    left: 1525px;
}

img.flip{
    transform: scaleX(-1);
}

#bordervine{
    position: absolute;
    top: 117px;
    left: 555px;
    z-index: -1;
}

#clickhere{
    position: absolute;
    top: 665px;
    left: 516px;
}

#clickhere2{
    position: absolute;
    top: 665px;
    left: 1136px;
    z-index: -1;
}

#arrow{
    position: absolute;
    top: 764px;
    left: 612px;
}

#arrow2{
    position: absolute;
    top: 764px;
    left: 1137px;
}

#coloreye{
    position: absolute;
    top: 434px;
    left: 76px;
    z-index: -1;
}

#bweye{
    position: absolute;
    top: 428px;
    left: 1712px;
    z-index: -1;
}

#centervine{
    position: absolute;
    top: 96px;
    left: 1278px;
}

#centervine2{
    position: absolute;
    top: 90px;
    left: 451px;
}

#banner{
    position: absolute;
    top: 560px;
    left: -12px;
}

#banner2{
    position: absolute;
    top: 560px;
    left: 1620px;
}

#blade{
    position: absolute;
    top: 176px;
    left: 98px;
}

#blade2{
    position: absolute;
    top: 176px;
    left: 1495px;
}

#energybar{
    position: absolute;
    top: 924px;
    left: 722px;
}

#waterbutton{
    position: absolute;
    top: 322px;
    left: 170px;
}

#spyro{
    position: absolute;
    top: 301px;
    left: 319px;
}

#mchole{
    position: absolute;
    top: 58px;
    left: -55px;
}

#mctnt{
    position: absolute;
    top: 245px;
    left: 1541px;
}

#BlogPost2{
    text-align: center;
    font-size: x-large;
    text-shadow: -2px 6px 17px white;
}