/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
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;
}














#container {
  display: grid;
  grid-template-areas: 
  "mipic mi mi" 
  "g g gpic"
  "johpic joh joh"
  "l l lpic"
  "melpic mel mel"
  "ak ak akpic "
  "migpic mig mig"
  "t t tpic"
  "leepic lee lee"
  ;
  grid-template-columns: 1fr 2fr;
  background-color: rgb(70, 114, 83);
  gap: 3px;
  border-color: #8f9296;
  border-width: 5px;
}

.container div {
  padding: 10px;
  background-color: aqua;
}

body{
    background-color: #283a58;
}

.this{
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin-left: 15%;
    margin-right: 15%;
    background-color: rgb(181, 181, 181);
    padding: 2%;
    font-size: 20px;
}

.foot{
    text-align: center;
    background-color: rgb(181, 181, 181);
    font-size: 18px;
    align-items: base
}

.gig{
    width: 400px;
}

h1{
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin-left: 10%;
    margin-right: 10%;
    background-color: rgb(181, 181, 181);
    padding: 2%;
    font-size: 40px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul {
   list-style-type: none;
   margin: 0;
   padding-top: 1%;
   padding-bottom: 1%;
   display: flex;
   background-color: #04123c;
   justify-content: space-evenly;
   color:azure;
}

a {
   text-decoration: none;
   color:aliceblue;
   font-weight:500;
   font-size: 20px;
}

.pic{
    height: 50px;
}

.mipic{
  grid-area: mipic;
}


.gpic{
  grid-area: gpic;

}

.johpic{
  grid-area: johpic;

}

.jopic{
  grid-area: jopic;

}

.lpic{
  grid-area: lpic;

}

.melpic{
  grid-area: melpic;

}

.akpic{
  grid-area: akpic;

}

.migpic{
  grid-area: migpic;

}

.tpic{
  grid-area: tpic;

}

.leepic{
  grid-area: piclee;

}


.mi{
  grid-area: mi;

}

.g{
  grid-area: g;

}

.joh{
  grid-area: joh;

}

.jo{
  grid-area: jo;

}

.l{
  grid-area: l;

}

.mel{
  grid-area: mel;

}

.ak{
  grid-area: ak;

}
.mig{
  grid-area: mig;

}

.t{
  grid-area: t;
}

.lee{
  grid-area: lee;

}


.map{
    width:90%;
    height:300px;
    margin-left:10%;
}

a{
    color:#001bb5a6;
    text-decoration: underline;
}

/* ☊⍜⋏⏁⏃☊⏁ */
input[type=text], select, textarea {
  width: 100%; 
  padding: 12; 
  border: 1px solid #ccc; 
  border-radius: 4px; 
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=email], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px; 
  box-sizing: border-box; 
  margin-top: 6px; 
  margin-bottom: 16px; 
  resize: vertical;
}




input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  height:500px
}


.required{
    color:rgb(185, 13, 13);
}




.me{
  grid-area: me;
}

.he{
  grid-area: he;
}

.she{
  grid-area: she;
}

.us{
  grid-area: us;
}

.our{
  grid-area: our;
}

.them{
  grid-area: them;
}

.you{
  grid-area: you;
}

.uwu {
  display: grid;
  grid-template-areas: 
  "me none none"
  "none you none"
  "none none us"
  "them none none"
  "none none she"
  "none he none"
  "our none none"
  ;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 2fr 1fr 1fr 1fr 1fr 1fr;
  background-color: #21cf27;
  border-width: 10px;
  gap: 3px;
  padding: 5px;
}

.uwu div{
  background-color: #04AA6D;
  padding: 10px;
}

.aaa{
  width:250px;
  height: 250px;
  object-fit: cover;
}












/* fanart page css.. good luck