@charset "utf-8";
/* CSS Document */

.hero {
	
  display: grid; 
 
  gap: 2px 2px; 
  grid-template-areas: 
   
  
    "a b b c"
    "k d d ."
	"e d d f"
  	"g h i j"
	  
	  
	  ; 
}

.herolife {
	
  display: grid; 
  
  gap: 2px 2px; 
  grid-template-areas: 
   
  
    "a b b b c"
    "d e e f g"
	"h i i j j"
  	
	  
	  
	  ; 
}

.herorelax {
	
  display: grid; 
  
  gap: 2px 2px; 
  grid-template-areas: 
   
  
    "a b c d"
    "e f g h"
	"i j j k"
  	
	  
	  
	  ; 
}



.a { grid-area: a;  border: 0px solid black; /* Optional: add borders to each cell */}
.b { grid-area: b;  border: 0px solid black; /* Optional: add borders to each cell */}
.c { grid-area: c;  border: 0px solid black; /* Optional: add borders to each cell */}
.d { grid-area: d;  border: 0px solid black; /* Optional: add borders to each cell */}
.e { grid-area: e;  border: 0px solid black; /* Optional: add borders to each cell */}
.f { grid-area: f;  border: 0px solid black; /* Optional: add borders to each cell */}
.g { grid-area: g;  border: 0px solid black; /* Optional: add borders to each cell */}
.h { grid-area: h;  border: 0px solid black; /* Optional: add borders to each cell */}
.i { grid-area: i;  border: 0px solid black; /* Optional: add borders to each cell */}
.j { grid-area: j;  border: 0px solid black; /* Optional: add borders to each cell */}
.k { grid-area: k;  border: 0px solid black; /* Optional: add borders to each cell */}
.l { grid-area: l;  border: 0px solid black; /* Optional: add borders to each cell */}
.m { grid-area: m;  border: 0px solid black; /* Optional: add borders to each cell */}
.n { grid-area: n;  border: 0px solid black; /* Optional: add borders to each cell */}
.o { grid-area: o;  border: 0px solid black; /* Optional: add borders to each cell */}
.p { grid-area: p;  border: 0px solid black; /* Optional: add borders to each cell */}
.q { grid-area: q;  border: 0px solid black; /* Optional: add borders to each cell */}
.r { grid-area: r;  border: 0px solid black; /* Optional: add borders to each cell */}
.s { grid-area: s;  border: 0px solid black; /* Optional: add borders to each cell */}
.t { grid-area: t;  border: 0px solid black; /* Optional: add borders to each cell */}
.u { grid-area: u;  border: 0px solid black; /* Optional: add borders to each cell */}
.v { grid-area: v;  border: 0px solid black; /* Optional: add borders to each cell */}
.w { grid-area: w;  border: 0px solid black; /* Optional: add borders to each cell */}
.x { grid-area: x;  border: 0px solid black; /* Optional: add borders to each cell */}
.y { grid-area: y;  border: 0px solid black; /* Optional: add borders to each cell */}
.z { grid-area: z;  border: 0px solid black; /* Optional: add borders to each cell */}
.ab { grid-area: ab;  border: 0px solid black; /* Optional: add borders to each cell */}
.ac { grid-area: ac;  border: 0px solid black; /* Optional: add borders to each cell */}
.ad { grid-area: ad;  border: 0px solid black; /* Optional: add borders to each cell */}
.ae { grid-area: ae;  border: 0px solid black; /* Optional: add borders to each cell */}
.af { grid-area: af;  border: 0px solid black; /* Optional: add borders to each cell */}
.ag { grid-area: ag;  border: 0px solid black; /* Optional: add borders to each cell */}
.ai { grid-area: ai;  border: 0px solid black; /* Optional: add borders to each cell */}
.aj { grid-area: aj;  border: 0px solid black; /* Optional: add borders to each cell */}
.al { grid-area: al; border: 0px solid black; /* Optional: add borders to each cell */}
.am { grid-area: am; border: 0px solid black; /* Optional: add borders to each cell */}
.an { grid-area: an;  border: 0px solid black; /* Optional: add borders to each cell */}
.ao { grid-area: ao;  border: 0px solid black; /* Optional: add borders to each cell */}
.ap { grid-area: ap;  border: 0px solid black; /* Optional: add borders to each cell */}
.aq { grid-area: aq;  border: 0px solid black; /* Optional: add borders to each cell */}
.ar { grid-area: ar;  border: 0px solid black; /* Optional: add borders to each cell */}
.as { grid-area: as;  border: 0px solid black; /* Optional: add borders to each cell */}
.at { grid-area: at;  border: 0px solid black; /* Optional: add borders to each cell */}
.au { grid-area: au; border: 00px solid black; /* Optional: add borders to each cell */}
.ba { grid-area: ba; border: 0px solid black; /* Optional: add borders to each cell */}
.bb { grid-area: bb; border: 0px solid black; /* Optional: add borders to each cell */}
.bc { grid-area: bc; border: 0px solid black; /* Optional: add borders to each cell */}



.container { 
	
  display: grid;
  background-image:url("picture.png");
  background-repeat: no-repeat;
  background-size: cover;
  grid-template-columns: 2fr 3fr 0.2fr 3fr 0.2fr 3fr .20fr 2fr;
  grid-template-rows: 250px 1.6fr 0.3fr 1.5fr 0.3fr 1.6fr 0.3fr;
  gap: 2px 2px;
  grid-auto-flow: row;
  grid-template-areas:
    "lheader header header header header header header rheader"
    "menu main main main main main main main"
    "menu main main main main main main main"
    "menu main main main main main main main"
    "menu main main main main main main main"
    "menu main main main main main main main"
    "footer footer footer footer footer footer footer footer";
}

.lheader {
  grid-area: lheader;
  border: 0px solid black; /* Optional: add borders to each cell */
  text-align: center; /* Center content in each cell */
  line-height: 100%; /* Vertical alignment */
  padding: 5px; 
	
}

.header {
  grid-area: header;
  border: 0px solid black; /* Optional: add borders to each cell */
  text-align: center; /* Center content in each cell */
  line-height: 100%; /* Vertical alignment */
  padding: 5px; 
	
}
.rheader {
  grid-area: rheader;
	Justify-self:stretch;
  border: 0px solid black; /* Optional: add borders to each cell */
  text-align: center; /* Center content in each cell */
  line-height: 100%; /* Vertical alignment */
  padding: 5px; /* Optional: add some padding */
}

.main {
 
  grid-area:main;
  border: 0px solid black; /* Optional: add borders to each cell */
  text-align: center; /* Center content in each cell */
  line-height: 100%; /* Vertical alignment */
  padding: 5px; /* Optional: add some padding */
}
.menu {
  grid-area:menu;
  align-content: center;
  border: 0px solid black; /* Optional: add borders to each cell */
  text-align: center; /* Center content in each cell */
  line-height: 100%; /* Vertical alignment */
  padding: 5px; /* Optional: add some padding */
}

.footer {
  grid-area: footer;
	
  border: 0px solid black; /* Optional: add borders to each cell */
  text-align: center; /* Center content in each cell */
  line-height: 100%; /* Vertical alignment */
  padding: 5px; /* Optional: add some padding */
}

.p1 {
  font-family: "Times New Roman", Times, serif;
	font-size: 100px;
	color: #A81012;
  text-shadow: 1px 1px 2px black, 0 0 25px green, 0 0 5px red;
} 

.p2 {
  font-family: "Times New Roman", Times, serif;
	font-size: 75px;
	color: #A81012;
  text-shadow: 1px 1px 2px black, 0 0 25px green, 0 0 5px red;
}   
.p4 {
  font-family: "Times New Roman", Times, serif;
	font-size: 40px;
	color: #A81012;
  
} 
.p5 {
  font-family: "Times New Roman", Times, serif;
	font-size: 90px;
	color: #6B0102;
  font-weight: bold;
	text-shadow: 2px 2px 4px white;
}   

.p6 {font-family: "Times New Roman", Times, serif;
	font-size: 20px;
	color: #840B0D;
	font-weight: bold;
} 

.vertical-menu {
  width: 300px; /* Set a width if you like */
}

.vertical-menu a {
  
  color: black; /* Black text color */
  display: block; /* Make the links appear below each other */
	
  padding: 2px; /* Add some padding */
  text-decoration: none; /* Remove underline from links */
}
.btn-1,
.btn-1 *,
.btn-1 :after,
.btn-1 :before,
.btn-1:after,
.btn-1:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-1 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #840B0D;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 500;
  line-height: 1;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 2;
  text-transform: uppercase;
}
.btn-1:disabled {
  cursor: default;
}
.btn-1:-moz-focusring {
  outline: auto;
}
.btn-1 svg {
  display: block;
  vertical-align: middle;
}
.btn-1 [hidden] {
  display: none;
}
.btn-1 {
  border-radius: 99rem;
  border-width: 2px;
  padding: 0.8rem 3rem;
}
.btn-1:hover {
  color: #999;
}