* {
	    box-sizing: border-box;
	    font-family: 'ubuntu', monospace;
		}
        
        body {
        background-color: #b9d7d1;
        margin: 0 auto;  
		background-image: url(https://i.imgur.com/ayHGf5R.png);
		backdrop-filter: blur(2px) brightness(.7);
        background-size: cover;
		background-attachment: fixed;
        h1,h2,h3,h4,h5 {
        padding: 0;
        }
        
			a {
			color: #a0d0c7;
				&:hover {
				color: #a0d0c7;
				text: #888888
			}
        }
		
        .header {
        background-color:  rgb(180,211,200,.8);
        color: #fff;
        width: 80%;
		max-width: 1200px;
        height: 100px;
        margin: 0 auto;
        padding: 1rem;
        text-align: left;
        }
        
        .footer {
        background-color: (255,255,255,1);
        border-top: 3px solid; 
        color: #b9d7d1;
        font-size: 0.9rem;
		font-weight: bold;
        margin-top: 3rem auto;
		padding-right: 3%;
        text-align: right;
        }

	.contact {
		float: right;
		position: relative;
		color: #fff;
		font-weight: ;
		font-style: italic;
		a {
			color: #fff;
			&:hover {
			color:#e7f1ef;
			}
		}
	}
        
			.navigation {				 
        background-color:  #749790;
        color: #fff;
        width: 80%;
		max-width: 1200px;
        padding: 0;
        margin: auto;
        text-align: center;
        	a {
            color: #fff;
            text-decoration: none;
            }
        	li,ol {
            width: 17%;            	 
            display: inline-block;
            padding: 0;
            }
            h1,h2,h3,h4,h5 {
            	padding: .5rem;
                margin: 0;
                text-align: center;
              &:hover {
            		    background: linear-gradient(to right, #749790, #9cc6be);
			  -webkit-background-clip: background;
						}
					}
			}
			
		.main {
			background-color: #dedfdd;
			width: 80%;
			color: black;
				}
    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
      gap: 20px;
      padding: 20px;
      max-width: 1200px;
	  max-height: 650px;
      background: #e2e2e2;
	  border-radius: 10px;
      margin: 20px auto;
	  overflow-y: scroll;
    }
	    .gallery img {
      width: 100%;
      height: auto;
      display: block;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      transition: transform 0.5s ease, box-shadow 0.5s ease;
      cursor: pointer;
	  background: #fff;
	  border-radius: 10px;
    }
    .gallery img:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }
	.main {
		background-color: white;
		width: 80%;
		max-width: 1200px;
		margin: auto;
			}
				
	#portBox {
		background-color: #ececec;
		height: 510px;
		max-width: 65%;
		margin-left: 25px;
		display: flex;
        justify-content: center;
        align-items: center;
		border-radius: 15px;
		
	}
	
	#expandedImg {
		display: block;
		max-width: 100%;
		max-height: 500px;
		margin-left: auto;
		margin-right: auto;
		vertical-align: middle;
		line-height: normal;
	}
	
.showcase {
	background: transparent;
	#blurb {
  color: #000;
    float: right;
    margin-right: 1%;
    max-width: 30%;
	a {
		color: #337366;
		&:hover {
			color: #48aa96;
		}
	}
}
 .expcontainer {
	display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  transition: background 0.5s ease;
  		max-width: 100%;
		max-height: 500px;
		&:hover {
			background: #fff;
		}
 }

.container {
  position: relative;
    display: flex;
  max-height: 100%;
  max-width: 100%;
}


.mySlides {
  max-height: 100%;
  max-width: 100%;
}

.cursor {
  cursor: pointer;
}
.prev,
.next {
  cursor: pointer;
  position: relative;
  width: auto;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  background: rgb(156,198,190,.3);
  transition: background 0.5s ease;
  user-select: none;
  -webkit-user-select: none;
}

.prev:hover,
.next:hover {
  background-color: #9cc6be;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}
.column {
  float: left;
  width: 16.66%;
}
.mySlides img {
	max-width: 100%;
  max-height: 500px;
  cursor: pointer;
}

    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    .modal img {
		display: flex;
      max-width: 100%;
      max-height: 100%;
      border-radius: 10px;
	  background: #fff;
	  border: 10px solid #749790;
      transition: all 0.3s ease;
    }

    .modal .close {
	display: flex;
      position: relative;
	  float: right;
	  margin-left: 10px;
      color: white;
      font-size: 40px;
      font-weight: bold;
      cursor: pointer;
      transition: color 0.3s ease;
    }

    .modal .close:hover {
      color: #749790;
    }