* {
  box-sizing: border-box;
}

body {
font-family: 'Comic Sans MS', Comic Sans, sans-serif;
  padding: 20px;
  background-image: url('graphics/site/paw_BG.png');
  background-repeat: repeat;
background-size: 100px 100px;
}

.galleryBanner {
    background-color: #784C7F;
    color: white;
    padding: 10px;
    text-align: center;
	border-radius: 10px;
}


#jiggleImage {
	position:relative;
    top:120px;
    left: 15%;
    animation: jiggle 2s infinite ease-in-out;
}

@keyframes jiggle {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    50% {
        transform: translate(-50%, -50%) rotate(10deg);
    }
}

textarea {
    resize: none;
}


textarea {
    padding: 10px;
    border: 2px solid #c7c0b8;
    border-radius: 8px;
    background-color: #f9f9f9; 
    transition: border-color 0.3s ease, background-color 0.3s ease;
}


textarea:focus {
    outline: none; /* Remove the default focus outline */
    border-color: #c3b58d; /* Change border color when focused */
    background-color: #fff; /* Change background color when focused */
}


input[type="text"] {
    background-color: #f8f8ff; /* Very light purple */
    border: 3px solid white; /* Thick white outline */
    border-radius: 25px; /* Rounded corners */
    padding: 10px;
    font-size: 16px; /* Adjust font size as needed */
    width: 200px; /* Adjust width as needed */
    transition: background-color 0.3s, border-color 0.3s; /* Smooth transition */
}

/* Styling when the input field is focused */
input[type="text"]:focus {
    background-color: #ffffe0; /* Light yellow */
    border-color: purple; /* Purple outline */
    outline: none; /* Remove default focus outline */
}

/* Base styling for the button */
button {
    background-color: #4b0082; /* Dark purple */
    color: white; /* White text */
    border: none;
    border-radius: 25px; /* Rounded corners */
    padding: 10px 20px; /* Internal padding */
    margin: 5px; /* External padding */
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition */
}

/* Styling when the button is hovered */
button:hover {
    background-color: #2e004d; /* Darker purple */
    box-shadow: 0 0 0 3px white; /* White outline without changing size */
}

a.link-button {
            text-decoration: none;
            color: inherit;
            display: inline-block;
        }

.round-button {
      display: inline-block;
      padding: 10px 20px;
      border-radius: 10px; /* Make it round */
      background-color: #8855aa;
      color: white; /* Text color */
      text-decoration: none; /* Remove underlines */
      border: 5px solid #523366; /* Darker version of the background color */
      cursor: pointer;
    transition: all 0.1s ease; /* Smooth transition for all properties over 0.3 seconds */
font-family: 'Courier New', monospace;

    }
	
	.image-container {
  position: relative;
  display: inline-block;
}

.scroll-container {
    display: inline-block;
    width: auto; /* Maintain image aspect ratio */
    height: auto; /* Adjust if you want to control the height */
	      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
	  
	  
      display: flex;
      -webkit-box-align: end;
      -ms-flex-align: end;
      -webkit-box-pack: space-around;	  
      -ms-flex-pack: space-around;	  



}



.placed-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


.hover-image,
.hover-image-hover {
  display: block;
}

/* Hide the hover image initially */
.hover-image-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

/* Show the hover image on hover */
.image-container:hover .hover-image-hover {
  opacity: 1;
}

/* Hide the original image on hover */
.image-container:hover .hover-image {
  opacity: 0;
}




	
.scaling-button {
    position: relative;
    padding: 10px 20px;
    cursor: pointer;
    overflow: visible;
    transition: transform 0.1s ease-in-out;
}
	
.round-button:hover {

}	

    .centered-element {
      padding: 20px;
      border: 10px solid #DAB4D9;
      background-color: #FFEECE;
	  border-radius: 10px;
	  box-shadow:5px 5px 10px #5f3c77;
    }

/* Header/Blog Title */
.header {
  font-size: 40px;
  text-align: center;
  background: white;
}
h2{
    margin:0;
    padding:-10;
}

.talk{
float: left; 
width: 120px; 

}
h5{
    margin:0;
    padding:-10;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
  float: left;
  width: 75%;
}

.postTitle {
	  font-size: 40px;
  text-align: center;
  background: #b464c1;
  color: white;
}

.postDate {
	  font-size: 10px;
  text-align: center;
  background: white;
}


.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
}


.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}


.cardPurple {
  padding: 50px;
  margin-top: 20px;
  
  
    border-image-source: url('graphics/site/purpleBorder.png'); /* Path to your border PNG */
    border-image-slice: fill 180; /* Adjust the border slice value based on your design */
    border-image-repeat: round; /* Adjust the repeat value based on your design */
    border-image-width: 80px; /* Adjust the border image width based on your design */

}

.cardYellow {
  padding: 50px;
  margin-top: 20px;
  
  
    border-image-source: url('graphics/site/yellowBorder.png'); /* Path to your border PNG */
    border-image-slice: fill 190; /* Adjust the border slice value based on your design */
    border-image-repeat: round; /* Adjust the repeat value based on your design */
    border-image-width: 80px; /* Adjust the border image width based on your design */

}

    .bottom-left-image {
float: left;
display: inline;
margin: 0px;
    }

        /* Image styling */
        .enlarge-wiggle {
            transition: transform 0.3s ease-in-out;
        }

        /* Hover effect */
        .enlarge-wiggle:hover {
            
            animation: wiggle 0.3s ease-in-out infinite;
        }

        /* Wiggle animation */
        @keyframes wiggle {
            0%, 100% {
                transform: rotate(0deg);
            }
            25% {
                transform: rotate(-5deg);
            }
            75% {
                transform: rotate(5deg);
            }
        }

.corner-graphic {
    position: absolute;

    transform: translate(-45%, -55%);
    /* Adjust the transform value based on the size of your graphic */
}

.bottom-corner-graphic {
background:url(graphics/site/StarGraphics.png) bottom right no-repeat;

}

/* Add a card effect for articles */
.centercolumn {

      display: grid;
      place-items: center;
	
 
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
.dialog{
	width: 800px;
	  background-color: white;
  padding: 10px;
  margin-top: 20px;
}
    .speech-bubble {
	
      position: relative;
display: flex;
      background-color: #87CEEB; /* Light blue color */
      padding: 10px;
	  left:50px;
      border-radius: 10px;
      max-width: 500px;
	  text-align: left;
	   margin-top: 25px;
    }

    .speech-bubble::before {
      content: '';
      position: absolute;
	
      border-style: solid;
      border-width: 10px 45px 10px 0; /* Adjust border-width to point left */
      border-color: transparent #87CEEB transparent transparent; /* Adjust border-color to match background */
      top: 40%;
      transform: translateX(-120%);
    }


@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {
    width: 100%;
    padding: 0;
  }
}

button {
    padding: 5px 10px;
    margin: 0 2px;
    cursor: pointer;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    color: #333;
}

button.current-page {
    background-color: #ccc; 
    color: #666; 
    pointer-events: none; 
}

#gallery {
    display: grid;
    gap: 20px;
    justify-items: center; 
}

#gallery, #imageDetails {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.imageCard {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ddd;
}

#searchInput {
    padding: 5px;
}


.videoThumbnail {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ccc;
	border: 3px solid #648da8;
    cursor: pointer;
    border-radius: 10%; /* Makes it round */
    overflow: hidden; /* Ensures the content stays within the rounded corners */
	padding:3px;
}


.thumbnail {
    width: 200px;
    height: 200px;
    object-fit: cover; /* Maintain aspect ratio and cover the entire container */
    cursor: pointer;
    border-radius: 10%; /* Makes it round */
    border: 3px solid #301934; /* Dark purple outline */
    overflow: hidden; /* Ensures the image stays within the rounded corners */
    padding: 20px; /* Add padding inside the border */
    text-align: center; /* Center text (if any) */
    display: flex; /* Use flexbox for alignment */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
	margin-bottom: 20px;
}


/* Purple background for image thumbnails */
.thumbnail.image {
    border: 3px solid #301934; /* Dark purple outline */
    background-color: #7d4a8e; /* Purple background */
}

/* Pastel blue background for video thumbnails */
.thumbnail.video {
    border: 3px solid #87cde6; /* Dark blue outline */
    background-color: #9abed2; /* Pastel blue background */
}

/* Pastel yellow background for link thumbnails */
.thumbnail.link {
    border: 3px solid #a88e3b; /* Dark yellow outline */
    background-color: #ded29e; /* Pastel yellow background */
}

.thumbnail img {
    width: auto;
    height: 250px;
}

.funny-text {
    font-family: "Comic Sans MS", Comic Sans, sans-serif;
	width:16vw;
	height:9vw;
    display: inline-block;
	text-align: center; /* Center align the text */
	color:black;
	transform:translate(15vw,-10vw)
}



@keyframes wiggle {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

.thumbnail video {
    width: auto;
    height: 250px;
}

/* Pink background for audio thumbnails */
.thumbnail.audio {
    border: 3px solid #7d2c7d; /* Dark pink outline */
    background-color: #e39be3; /* Pink background */
}

.nextprevContainer {
    display: flex;
    justify-content: center;
    gap: 10px; /* Adjust the gap between buttons if needed */
    margin-top: 10px; /* Adjust the top margin if needed */
}

#prevButton, #nextButton {
    margin: auto 0; /* Center the buttons vertically within the flex container */
}

.paginationControls {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.paginationControls button {
    margin: 0 5px;
    cursor: pointer;
}


@media (max-width: 1600px) {

.rightcolumn {
  float: left;
  width: 100%;
  padding-left: 0px;
}
.leftcolumn {

  width: 100%;
  padding-left: 0px;
}
		
	
}