/* Navbar setup */

body {
    background-color: #000;
}

video {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
}  

.menu-container {
	max-height: 340px;
	margin: 0% auto;
	content: " ";
	width: 100%;
	position: fixed;
	z-index: 100;
    top: 0;
    left: 0;
    
}

.navbar {
    color: green;
    font: bold 12px/18px sans-serif;
    text-align: center;
    display: inline, flex;
    margin: 0% auto;
    padding: 0;
    list-style: none;
    text-decoration: none;
    overflow: hidden;
}

.navbar li {
    color: #000;
    background-color: grey;
    display: inline-block;
    margin: 0% auto;
    position: relative;
    padding: 12px 10%;
    border: 1px solid gray;
    box-shadow: 2px 2px 10px 0 black;
    border-radius: 6px;
    cursor: pointer;
    transition-property: background;
    transition-duration: .4s;
    transition-delay: 0s;
    transition-timing-function: ease-in-out;
    margin: 20px;
    height: 90px;
    z-index: 1;
    overflow: hidden;
}

.menu-container .text-overlay:hover {
    color: #000;
}

li img {
    transition: transform .5s;
    transform-origin: 50% 50%;
}

li video {
    transition: transform .5s;
    transform-origin: 50% 50%;
}

li:hover img {
    transform: scale(1.3);
    opacity: 0.3;
    overflow: hidden;
}

li:hover video {
    transform: scale(1.3);
    opacity: 0.3;
    overflow: hidden;
}

.imgcontain {
	height:  100%;
	width: 100%;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	text-align: center;
    object-fit: cover;
    z-index: 2;
}

.vidcontain {
	height:  100%;
	width: 100%;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
    text-align: center;
    object-fit: cover;
    z-index: 2;
}

.text-overlay {
        color: mintcream;
        font-weight: bold;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        padding-top: 16%;
        padding-left: 20px;
        padding-right: 20px;
        justify-content: center;
        align-items: center;
        text-align: center;
        z-index: 3;
}

.column {
  float: left;
  width: 50%;
  text-align: center;
  height: 500px;
  overflow: hidden;
}

.row {
    display: block;
    width: 100%;
    flex: auto;
    color: whitesmoke;
    z-index: 3;
    overflow: hidden;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.container {
	margin-right: auto;
	margin-left: auto;
    overflow: hidden;
}

.container3 {
	margin-right: auto;
	margin-left: auto;
    overflow: hidden;
  	display: block;
  	overflow: hidden;
    width: 70%;
}

.initial-text {
    padding-top: 300px;
    padding-bottom: 200px;
    font-style: italic;
    font-size: xx-large;
    color: wheat;
    text-align: center;
}

h3 {
    width: 100%;
	margin: 0px auto;
	font-family: Copperplate, Papyrus, fantasy;
    font-size: xx-large;
    padding-top: 50px;
}

.blurb-text {
        font-size: xx-large;
    color: wheat;
    text-align: center;
}

.image2 {
	height:  100%;
	width: 100%;
	position: relative;
	overflow: hidden;
	top: 0;
	left: 0;
	text-align: center;
    object-fit: cover;
    border-radius: 50px;
    
}

.container p {
    padding-left: 50px;
    padding-right: 50px;
    font-size: x-large;
}

/***** CONTACT FORM STYLING *****/
/* input[type=text] targets all text input sections of the contact form */
input[type=text] {
    width: 80%; /* Each input box covers the full width of the container */
    padding: 20px; /* Adds padding within the text box */
    border: 1px solid #ccc; /* Setting a solid border and its color */
    border-radius: 4px; /* Slightly rounds the corners of the text box border */
    box-sizing: border-box; /* This creates a box with a border around the contact form input boxes */
    margin-top: 6px; /* Adds a margin to the top of the text box */
    margin-bottom: 16px; /* Adds a margin to the bottom of the text box */
    resize: vertical; /* This allows the user to resize the text boxes vertically */
    font-family: Perpetua, Rockwell Extra Bold;
}

/* Hover effects for input boxes */
input[type=text]:hover {
    box-shadow: 0 0 5px #00004d inset; /* This creates a blue shadow in the text box when hovered over by the user */
}

/* Submit button */
input[type=submit] {
    background-color: black; /* Sets the background color of the submit button to black */
    color: white; /* Sets the font color of the Submit button to white */
    font-weight: bold; /* Makes the font of the submit button bold */
    padding: 12px 20px; /* Adds padding to the submit button */
    border: none; /* Removes the border from the submit button */
    border-radius: 4px; /* Gives the submit button the same rounded corners as the text boxes */
    cursor: pointer; /* Changes the cursor to pointer when over the submit button */
    display: block; /* Allows the submit button to be centered */
    margin-left: auto; /* In combination with "margin-right: auto" this will center the submit button */
    margin-right: auto;
    font-family: Perpetua, Rockwell Extra Bold;
}

/* Hover effect for submit button */
input[type=submit]:hover {
    background-color: white; /* Turns the background of the submit button white when the user hovers over it */
    color: black; /* Turns the font black when hovered over */
    transform: scale(1.5); /* Makes the button increase 1.5 times in size */
    transition: transform 1.5s; /* Makes the transform effect last 1.5 seconds */
}

/* Form element */
form {
    border-radius: 5px; /* Rounds the corners of the contact form */
    background-color: #f2f2f2; 
    padding: 1px; /* Adds padding to the contact form */
    font-family: "Trebuchet MS", Optima;
}
/***** END OF CONTACT FORM STYLING *****/