@charset "utf-8";
body {
  background-image: url(/images/fish/ripples-background.jpg);
  background-color: #f6f6f6;
  background-size: cover;
  background-repeat: repeat;
  background-position: center top;	
  background-attachment: scroll;
  font-family: 'Roboto', sans-serif; font-size: 14px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  padding-left: 2%;
  padding-right: 2%;
}

img {
  border-style: none;
} 

h1 {
  color: #000000;
  font-size: 20px;
  font-family: 'Broadway Regular', sans-serif;
  text-decoration: none;
}

h2 {
  font-size: 18px;
  font-family: 'Broadway Regular', sans-serif;
  text-decoration: none;
}

h3 {
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
  text-align: left;
}

h4 {
  font-size: 14px;  
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
}

h5 {  
  font-size: 14px;  
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
}

a {
  font-size: 14px;
  color: #3300ff;
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
}

a:visited {
  font-size: 14px;
  color: #ff0000;
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
}

p {
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
}

i {
  font-size: 12px;
  font-style: italic;
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
}

em {
  font-size: 14px;
  font-style: italic;
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
}

.smaller-text {
  font-size: smaller;
}

.responsive-image {
  width: 100%; /* Makes the image take up the full width of its container */
  height: auto; /* Maintains the aspect ratio */
  max-width: 100%; /* Prevents the image from getting larger than its container */
  display: block; /* Removes the extra space at the bottom of images */
}

.clearfix {
  clear: both;
}

div {
  padding: 5px;
}

* , *:before, :after {
	box-sizing: border-box;
}

.raised-effect {
    display: inline-block;
    position: relative;
    overflow: hidden;  /* Ensures the shadow doesn't overflow the container */
    border-radius: 10px; /* Optional: For rounded corners */
}

.raised-effect img {
    width: 100%;
    height: auto;
    display: block;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); /* Box-shadow creates the raised effect */
}

/* Optional: Add a hover effect to make it more dynamic */
.raised-effect:hover img {
    transform: translateY(-5px); /* Slightly lift the image on hover */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3), 0 12px 30px rgba(0, 0, 0, 0.25); /* More pronounced shadow on hover */
}
	
.container {
  display: grid;
  grid-template-areas: 
    "section1 section1 section1 section1"
    "section2 section2 section2 section2"
	"section3 section3 section3 section3"
    "section4 section5 section5 section7"
    "section10 section10 section10 section10";
	
  grid-template-columns: 1fr 24% 24% 26%;  
  overflow-x: auto;
  background-color: #ffffff;
  border: 1px solid purple; 
  border-radius: 20px;
  /* grid-gap: 1px; */
}

.header {
  grid-area: section1;
}

.searchbox {
  grid-area: section2;
}	

.buttons {
	grid-area: section3;
	overflow: auto;
	text-align: left;
	vertical-align: top;
}

.sidebar {
  grid-area: section4;
  text-align: center;
  }

.bodytext {
  grid-area: section5;
}
	
.bodytext2 {
  grid-area: section7;
  text-align: center;
}

.footer {
  grid-area: section10;
  text-align: center;
}

@media all and (max-width: 768px) {
body {
  padding-left: 2%;
  padding-right: 2%;
}

div {
  padding: 5px;
}

  .container {
      grid-template-areas: 
      "section1" 
      "section2"
      "section3"
      "section4"
      "section5"
      "section7"
	  "section10";
      grid-template-columns: 1fr;
      overflow-x: auto;
      background-color: #ffffff;
    }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 768px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
body {
  padding-left: 2%;
  padding-right: 2%;
}

div {
  padding: 5px;
}

  .container {
      grid-template-areas: 
      "section1" 
      "section2"
      "section3"
      "section4"
      "section5"
      "section7"  
	  "section10";

      grid-template-columns: 1fr;
      overflow-x: auto;
      background-color: #ffffff;
    }
}