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);
}  

.videoPlayer {

display: flex;
justify-content: center;
align-items: center;
background-color: #313131;
padding: 10px;
border: 2px solid #676565;
border-radius: 8px;
box-shadow: 4px 4px 12px #00000040;
width: 600px;
flex-direction: column;


}

.videoPlayer iframe {
width: 560px;             
height: 300px;       
padding: 10px;      
margin: 5px;
border-radius: 6px;   
border: 2px solid #676565;
background-color: #4d4646;

}

.videoPlayer 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: 560px;

}


.infobox {
background-color: #313131; 
display: flex;            
align-items: flex-start;  
width: 600px;         
border-radius: 8px;   
border: 2px solid #676565;         
box-shadow: 4px 4px 12px #00000040;  
justify-content: center;
padding: 10px;


}


.infoimage {
width: 150px;             
height: auto;       
padding: 10px;      
margin: 5px;
border-radius: 6px;   
border: 2px solid #676565;
background-color: #4d4646;
}

.infobox p {
margin: 5px;               
line-height: 1.5;
font-family: "Homenaje", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 20px;
background-color: #4d4646;
padding: 10px;
border-radius: 6px;   
border: 2px solid #676565;
color: #e0f7ff;

}

.intro {

display: flex;
align-items: flex-start;
gap: 15px;
margin: 25px;
justify-content: center;
flex-wrap: wrap;
}

.infotable {

background-color: #313131;
margin-left: 50px;
padding: 10px;
border-radius: 6px;   
border: 2px solid #676565;         
box-shadow: 4px 4px 12px #00000040;  
flex-direction: 1 1 500px;
width: 650px;
}

.table1 {
width: 100%;
background-color: #4d4646;
border: solid 1px black;
border-radius: 6px;
border-collapse: collapse;
overflow: hidden;

}

.table1row {
display: flex;
align-items: center;
gap: 10px;
margin: 5px;
}

.table1 img {
max-width: 150px;
height: auto;
display: block;
border: solid 1px black;
border-radius: 6px;
overflow: hidden;
margin: 0;

}

.table1 h2

{
margin: 8px 0;
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;

}

.table1 p {
margin: 8px;
font-size: 20px;
font-family: "Homenaje", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 1.5;
color: #e0f7ff;

}

.table1 tr {
border: solid 2px #313131;
border-radius: 6px;
border-top: none;
border-left: none;
border-right: none;
overflow: hidden;

}

.table1 tr:last-child {
border-bottom: none;

}


.left1 {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}

html {
  scrollbar-gutter: stable;
}