<style>
    * {
      box-sizing: border-box;
    }
	
	html, body, div, span, applet, object, iframe,
    h1, h2, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
	 box-sizing: border-box; /* Ensures consistent box-sizing */
	 margin: 0;
	 padding: 0;
	 border: 0;
	 font-size: 100%;
	 font: inherit;
	 vertical-align: baseline;
    }
	
	article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
	display: block;
	}

    body {
      margin: 0;
      background-color: #000;
      font-family: Arial, Helvetica, sans-serif;
      padding-top: 60px;
	  overflow-y: scroll; /* Ensures the scrollbar is always present */
    }
	
	*, *::before, *::after {
	box-sizing: inherit; /* Inherit box-sizing for all elements */
	}

	/* Style the entire scrollbar */
	::-webkit-scrollbar {
	  width: 16px; /* Adjust width */
	  background-color: #000000; /* Background color */
	}

	/* Style the scrollbar thumb */
	::-webkit-scrollbar-thumb {
	  background-color: #000; /* Thumb color */
	  border-radius: 8px; /* Rounded edges */
	  border: 4px solid #888; /* Padding between thumb and track */
	}

	/* Hover effect for scrollbar thumb */
	::-webkit-scrollbar-thumb:hover {
	  background-color: #555; /* Darker on hover */
	}

	
	ol, ul {
	list-style: none;
    }
	
	blockquote, q {
	quotes: none;
    }
	
	blockquote:before, blockquote:after,
    q:before, q:after {
	content: '';
	content: none;
    }
	
	table {
	border-collapse: collapse;
	border-spacing: 0;
    }

    .tab {
      overflow: hidden;
      background-color: #000;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 9999;
      border-bottom: 2px solid grey;
      display: flex;
      align-items: center;
      padding: 0 20px;
      height: 80px; /* Define height of the nav bar */
    }

    .tab .logo {
      margin-right: auto;
    }

    .tab .logo img {
      height: 60px; /* Adjust the height as needed */
      width: auto;
      display: inline-block;
      vertical-align: middle;
    }

    .tab a {
      background-color: inherit;
      float: right;
      text-align: center;
      cursor: pointer;
      padding: 14px 16px;
      transition: 0.3s;
      font-size: 20px;
      color: #f2f2f2;
      text-decoration: none;
    }

    .tab a:hover {
      background-color: #ddd;
      color: black;
      transition: 0.3s;
    }

    .tabcontent {
      padding: 6px 12px;
    }

    .tabcontent:target {
      display: block !important;
      scroll-margin-top: 60px;
    }

    .tabcontent.active {
      display: block;
    }

    .dropdown {
    display: none;
    font-size: 30px;
    color: #f2f2f2;
    }

    .dropdown-content {
    display: none;
    position: fixed;
    background-color: #333;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
    top: 47px; /* Adjust based on the height of your navigation bar */
    width: 100%;
    height: auto; /* Ensure height adjusts to fit content */
    padding: 0px 0px;
    }

    .dropdown-content a {
    display: none; /* Make the buttons stack vertically */
    padding: 10px 20px;
    text-align: left; /* Align text to the left */
    color: white;
    text-decoration: none;
    border-bottom: 1px solid #444; /* Optional: Add border between items */
    }

    .dropdown-content a:hover {
    background-color: #ddd;
    color: black;
    }

    .show {
    display: block;
    }

    /* Style for the logo */
    .logo img {
    height: 60px; /* Adjust the height as needed */
    width: auto;
    display: inline-block;
    vertical-align: middle;
    }

    .image-gallery {
      column-count: 4; /* Set the number of columns */
      column-gap: 8px; /* Set the gap between columns */
      margin: 0 auto;
      padding: 0;
      justify-content: center;
      align-items: center;
      padding-top: 20px; /* Add padding to ensure gallery is not covered */
      z-index: 1;
    }

    .image-gallery li {
      margin-bottom: 8px; /* Set the gap between rows */
      break-inside: avoid; /* Prevent breaking inside a container */
      position: relative;
    }

    .image-gallery li img {
      width: 100%;
      max-width: 100%;
      border: 3px solid transparent; /* Default border style */
      display: block;
      transition: border-color 0.3s; /* Smooth transition for border color */
    }

    .modal {
      display: none;
      position: fixed;
      z-index: 10000;
      padding-top: 100px;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.9);
    }

    .modal-content {
      margin: auto;
      display: block;
      max-width: 80%;
      max-height: 80%;
    }

    .modal img {
      width: auto;
      height: auto;
      max-width: 100%; /* Ensure images don't exceed modal width */
      max-height: 100%; /* Ensure images don't exceed modal height */
    }

    .modal-text {
      color: white;
      text-align: center;
      padding-left: 20%;
      padding-right: 20%;
      padding-bottom: 5%;
	    padding-top: 5%;
    }

    .close {
      position: fixed;
      top: 30px;
      right: 50px;
      color: white;
      font-size: 30px;
      font-weight: bold;
      cursor: pointer;
    }

    .close:hover,
    .close:focus {
      color: red;
      text-decoration: none;
      cursor: pointer;
    }
	
		/* Next & previous buttons */
	.prev,
	.next {
	  cursor: pointer;
	  position: fixed;
	  top: 50%;
	  width: auto;
	  padding: 16px;
	  margin-top: -50px;
	  color: white;
	  font-weight: bold;
	  font-size: 20px;
	  border: none;
	  user-select: none;
	  -webkit-user-select: none;
	  background-color: black;
	}

	/* Position the "next button" to the right */
	.next {
	  right: 2%;
	}
	
	.prev {
	 left: 2%;
	}

	.prev:hover,
	.next:hover {
	  color: red;
	}

  .image-gallery li img:hover {
  border-color: white; /* Border color on hover */
  }
	
	/* About me tab content */
	
	.about-me-content {
	 display: flex; /* Use flexbox for layout */
	 align-items: center; /* Vertically center align the items */
	 text-align: center; /* Center text in the about-me-text div */
	 align-items: flex-start;
	}
	
	.about-me-text {
	 flex: 1; /* Let the text div grow to fill the available space */
	 padding: 30px; /* Add padding to the text */
	 color: white;
	 padding-top: 5%;
	}
	
	.about-me-text h2 {
	 font-size: 35px; /* Adjust the heading size as needed */
	 font-weight: bold;
	 text-align: left;
	 word-spacing: -2px;
	}
	
	.about-me-text h3 {
	 font-size: 27px; /* Adjust the heading size as needed */
	 font-weight: bold;
	 text-align: justify;
	 margin-bottom: 5px;
	 word-spacing: -2px;
	}

	.about-me-text p {
	 padding-top: 0px;
	 font-size: 20px; /* Adjust the paragraph text size as needed */
	 text-align: justify;
	 width: auto;
	 hyphens: auto;
	 word-spacing: -2px;
	 word-break: break-word;
	}
	
	.about-me-text li {
	text-align:justify;
	}
	
	.about-me-text ul {
	list-style-type: disc;
	padding: 20px;
	}
	
	.about-me-image {
	text-align: left; /* Center the image horizontally */
	}

	.about-me-image img {
	max-width: 100%;
	max-height: 90vh;
	width: auto;
	margin: auto;
	border-radius: 10%; /* Apply rounded corners */
	padding-top: 25px;
	}
	
	/* The contact form */
	
	/* Style inputs with type="text", select elements and textareas */
	input[type=text], select, textarea {
	  width: 100%; /* Full width */
	  padding: 12px; /* Some padding */ 
	  border: 1px solid #ccc; /* Gray border */
	  border-radius: 4px; /* Rounded borders */
	  box-sizing: border-box; /* Make sure that padding and width stays in place */
	  margin-top: 6px; /* Add a top margin */
	  margin-bottom: 16px; /* Bottom margin */
	  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
	}
	
	/* Style the placeholder text color to black */
	input[type=text]::placeholder, select::placeholder, textarea::placeholder {
	 color: black;
	}

	/* Style the submit button with a specific background color etc */
	input[type=submit] {
	  background-color: #04AA6D;
	  color: white;
	  padding: 12px 20px;
	  border: none;
	  border-radius: 4px;
	  cursor: pointer;
	}

	/* When moving the mouse over the submit button, add a darker green color */
	input[type=submit]:hover {
	  background-color: #45a049;
	}
	
	/* Footer content */
	
	footer {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center;
	}

	.footer-content p {
    margin-bottom: 10px;
    font-size: 16px;
	}

	.social-media a {
    color: #fff;
    margin: 0 10px;
    font-size: 24px;
    text-decoration: none;
	}

	.social-media a:hover {
    color: #007bff;
	}

/* Add a background color and some padding around the form */
	.form-container {
	  flex: 1;
	  border-radius: 5px;
	  background-color: black;
	  padding-top: 20px;
	}
	
/* Scroll arrow button */
	.scroll-arrow {
    position: fixed;
    bottom: 20px;
    right: 30px;
	width: 50px;            /* Set a fixed width */
    height: 50px;           /* Set the height equal to the width */
    background-color: #333;
    border: 3px solid white; /* White border added */
    color: white;
    font-size: 24px;
    padding: 10px;
    border-radius: 50%;
	display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    z-index: 1000; /* Ensures it's on top */
    transition: opacity 0.5s ease;
	}

/* Changes based on screen size */
    @media screen and (max-width: 1200px) {
      .image-gallery {
        column-count: 3; /* Change to 3 columns on smaller screens */
      }
    }

    @media screen and (max-width: 800px) {
      .tab a:not(.dropdown, .logo) {
      display: none;
      }
      .dropdown-content.show {
        display: block;
      }
      .dropdown {
      display: block;
      }

      .tab {
      height: auto;
      }


      /* Ensure the dropdown buttons stack vertically */
      .dropdown-content a {
        display: block; /* Forces each item to be a block element */
        width: 100%; /* Full width for mobile */
      }

      .image-gallery {
        column-count: 1; /* Change to 1 column on even smaller screens */
      }

	    .modal-navigation button {
      padding: 3px 7px; /* Adjust the padding for smaller buttons */
      background: none; /* Remove the background color */
	    border: none;
      margin: 5px; /* Add some margin to separate the buttons */
	    top: 80%;
	    }
    }

    @media screen and (max-width: 600px) {
      .image-gallery {
        column-count: 1; /* Change to 1 column on small screens */
      }

      .tab {
        flex-direction: column; /* Stack the items vertically */
        align-items: flex-start; /* Align items to the left */
      }

      .tab a {
        float: none; /* Reset the float */
        text-align: left; /* Align text to the left */
        padding: 10px; /* Adjust padding as needed */
      }

      .tab .logo {
        margin-right: 0;
      }

      .about-me-content {
        flex-direction: column; /* Stack text and image vertically */
        align-items: center; /* Center horizontally */
      }

      .about-me-text,
      .about-me-image {
        width: 100%; /* Full width */
        text-align: center; /* Center text */
      }

      .about-me-image img {
        margin: auto; /* Center image */
      }
    }
</style>