body {
height: 100%;
margin: 0;
padding: 0;
background-color: #2b2b2b;
background-image: url("../images/Snowfall.gif");
background-repeat: repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}


h1 {
text-align: center;
font-size: 55px;
font-family: "Rubik Distressed", system-ui;
font-style: normal;
font-weight: 400;
border: 3px solid #b7dce6;
width: auto;
margin: 0 auto;
color: #e0f7ff;
text-shadow: 2px 2px 6px #66ccff, 0 0 12px #ffffff;
box-shadow: 2px 2px 6px #66ccff, 0 0 12px #ffffff;;
padding: 8px 8px

}

header {
background-color: #4d4646;
padding: 10px;
margin-top: 2%;

}

.headerStrip {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

.cornerIMG {
width: 150px;
height: auto;        
pointer-events: none; 

}

.topleftIMG {
justify-self: end;
margin-right: -30px;
z-index: 1;
}

.toprightIMG {
justify-self: start;
transform: scaleX(-1);
margin-left: -30px;
z-index: 1;
}

.navbar {
display: flex;
justify-content: center;  
flex-wrap: wrap;                            
z-index: 2;  
margin-top: 0;     
position: relative;        
}

.navbar a {
text-decoration: none;     
color: #000;               
background: #beb3b3;          
padding: 8px 16px;         
border: 2px solid #333;    
border-radius: 6px;        
font-weight: bold;
transition: background-color 0.2s ease, transform 0.2s ease;
}

.navbar a:hover {
background-color: #e9e9e9; 
transform: translateY(-2px);
}

.navbar a:active {
background-color: #bbb;    
transform: translateY(0);
} 

.contactBox {
background-color: #313131;
padding: 10px;
border-radius: 6px;
box-shadow: 4px 4px 12px #00000040; 
width: 100%;
max-width: 600px;
margin-top: 2.5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 2.5rem auto 0;
position: relative;

}

.contactBox h2 {
font-size: 30px;
font-family: "Bungee", sans-serif;
font-weight: 400;
font-style: normal;
color: #cee4ef;
text-shadow: 2px 2px 6px #66ccff, 0 0 12px #ffffff;
text-align: center;
padding: 10px;      
margin: 5px;
border-radius: 6px;   
border: 2px solid #676565;
background-color: #4d4646;
width: 50%;

}

form {
display: flex;
flex-direction: column;

}

label {


font-size: 15px;
font-family: "Poiret One", sans-serif;
font-weight: 400;
font-style: normal;
color: #cee4ef;
text-shadow: 2px 2px 6px #66ccff, 0 0 12px #ffffff;
text-align: left;
padding: 10px;      
margin: 5px;



}

input, textarea {
padding: 10px;
border-radius: 6px;   
border: 2px solid #676565;
background-color: #2b2b2b;
color: #cee4ef;
width: 300px;
}


button {
margin-top: 2rem;
padding: 10px;
background-color: #4d4646;
color: #cee4ef;
border-radius: 6px;   
border: 2px solid #676565;
background-color: #4d4646;
font-size: 25px;
width: 200px;
margin: 2.5rem auto 0;

}

button:hover {
background-color: #1e1e1f;
}

#responseMessage {
text-align: center;
color: #96969b;
}

#message {
padding: 10px;
border-radius: 6px;   
border: 2px solid #676565;
background-color: #2b2b2b;
color: #cee4ef;
width: auto;
resize: vertical;       
box-sizing: border-box; 
overflow: hidden;
max-height: auto;
font-size: 15px;

}

.leftIMG {

height: 450px;
width: auto;
position: absolute;
pointer-events: none;
opacity: .8;
bottom: -2.5rem;
right: -5rem;

}

html {
  scrollbar-gutter: stable;
}