body {
      /*background-color: rgb(135,241,156);*/
      background-color: rgb(255,242,82);
      background-image: url("sunflowersbg.jpg");
      background-size: 2000px;
      background-attachment: fixed;
      color: white;
      padding-left: 10%;
      padding-right: 10%;
      animation: scroll-bg 60s linear infinite;
      height: 100%;
    }
    
@keyframes scroll-bg {
    from {
      background-position: 0 0;
    }
    to {
      background-position: -300px 0; /* adjust based on image size or effect speed */
    }
}

/*.copytext {
      background-color: rgb(255,242,82);
      color: rgb(120,59,140);
      backdrop-filter: blur(4px);
      padding-top: 1%;
      padding-right: 3%;
      padding-bottom: 3%;
      padding-left: 3%;      
      display: flex;
    }*/
    
h1 {
      color: red;
      text-align: center;
    }
    
.header {
      padding-top: 2%;
      padding-bottom: 2%;
      text-align: center;
}
    
.landing {
      height: 1500px;
      overflow: hidden;
      transition: height 1.8s ease-in-out;
      text-align: center;
      cursor: pointer;
      filter: drop-shadow(0 0 0.75rem black);
}
    
.copytext {
      display: flex;
      align-items: center; /* vertically center image and text */
      gap: 10px;            /* spacing between them */
      background-color: white;
      color: rgb(120,59,140);
      padding: 1% 3% 3% 3%;
      filter: drop-shadow(0 0 0.75rem black);
      --angle: 0deg;
    	border: 2vmin solid;
    	border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
    	
    	animation: 10s rotate linear infinite;
}

.page {
      align-items: center;
}

@keyframes rotate {
	to {
		--angle: 360deg;
	}
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
  
    
.inline-img {
  
  margin: 0 20px 20px 0;
  max-width: 20%;
  height: auto;
}

.sidebar {  
      display: block;
      text-align: center;
      margin-bottom: 10px;
      /*height: 10%;*/
      filter: drop-shadow(0 0 0.75rem black);
    }
    
.sidebar-button {
      /*border: 6px outset yellow;*/
      border: 6px outset rgba(250, 5, 197, 1);
      border-radius: 25px;
      color: white;
      background-color: rgba(225, 5, 177, 1);
      width: 13%;
      padding-top: 1%;
      margin-bottom: 1%;
      padding-bottom: 2%;
      display: inline-block;
      font-size: 1.5em;
      transition-duration: all 0.1s ease;
      cursor: pointer;
      user-select: none;      
      align-items: center;
      justify-content: center;
    }
    
.sidebar-button:hover {
      border: 6px outset rgb(255, 125, 222);
      background-color: rgb(245,5,193);
      text-decoration: underline;
      /*box-shadow: 3px 3px 6px 6px rgb(255, 125, 222) inset;
      filter: drop-shadow(0px 0px 30px rgb(245,5,193));*/
    }
    
.sidebar-button:active {
      border: 6px solid rgb(120,59,140);
      background-color: rgb(190,25,160);
      box-shadow: 5px 5px 10px 10px rgb(120,59,140) inset;
      /*filter: drop-shadow(0px 0px 30px #FF0000);*/
    }
    
.sidebar-button img {
      height: 40px;
      object-fit: contain;
      display: inline-block;
      align-items: center;
    }
    
.footer {
      color: white;
      font-size: 1em;
}
    
/*mobile only properties*/
 @media only screen and (max-width: 768px) {
    .sidebar-button {
      width: 20%;
      font-size: 1em;
    }
    
    .inline-img {
      margin: 0 20px 20px 0;
      max-width: 50%;
      height: auto;
    }
    body {
      padding-left: 2%;
      padding-right: 2%;
    }
    .copytext {
      padding: 1% 2% 2% 2%;
    }
    #guestbookiframe {
      border: 0px none; 
      margin-left: -8%; 
      height: 1000px; 
      margin-top: -130px; 
      width: 90%;
    }

    }