/* ============== Global Properties ============== */

@font-face {
	font-family: MinecraftCHMC;
	src: url('../misc/MinecraftCHMC.ttf') format('truetype');
}

html {
   scroll-behavior:smooth;
   /* scroll-padding-top: 5%; */
   background-color: black;
   height:100%;
   width:100%;
}

* {
   box-sizing: border-box;
   margin: 0px;
   padding: 0px;
   font-family:'MinecraftCHMC'
}



/* ============== Properties Related to Top Picture ============== */

.topPicture {
   width: 100%;
   position: sticky;
   top:0;
   z-index: 0;
   margin: auto;
   border: 0px;
   margin-bottom: -10%;
   display: block;
}




/* ============== Properties Related to Header ============== */

#headerContainer {
   display: block;
   position: sticky;
   z-index: 1000;
   top: 0;
   left: 0;
   overflow: hidden; 
   width: 100%;
   height: 12%;
   background-color: #181A1B;
   text-align: center;
   align-content: center;
   padding-top:10px;
   /* border:5px dotted black; */

   /* sectionHeading stickyHeading  */
}

#logo img {
   /* float: left; */
   margin-right: 1em;
   margin: 0 auto;
   height: 100px;
   /* border: greenyellow 5px dotted; */
   /* flex: 1; */
}

#headerTable {
   /* float:left; */
   text-align: left;
   /* margin-right:30px; */
   border-spacing:25px 0px;
   color: black;
   /* border: #EAAB00 5px dotted; */
   margin: 0 auto;
   display: inline-block;
   vertical-align: top;
   margin-top: 0.75em;
}

.navButtons {
   /* float: left; */
   /* margin-top: 1.5em; */
   border-left: 5px solid #C52227;
   padding-left: 20px;
   padding-right: 20px;
   margin: 0 auto;
   display: inline-block;
   top: 0;
   /* border:5px dotted yellowgreen; */
   vertical-align: top;
   margin-top: 1.2em;
}

.navButtons .omegaText, #endButton .omegaText, #motto {
   color: white;
}

#endButton {
  /* float: left; */
  /* margin-top: 1.5em; */
  border-left: 5px solid #C52227;
  border-right: 5px solid #C52227;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0 auto;
  display: inline-block;
  /* border:5px dotted green; */
  vertical-align: top;
  margin-top: 1.2em;
}

.navButtons a {
   color: black;
   text-decoration: none;
   /* margin-top: 25px; */
   /* padding-top: 25px; */
   margin: 0 auto;
   display: inline-block;
}

#endButton a {
   color: black;
   text-decoration: none;
   margin-top: 25px;
   padding-top: 25px;
}

/* ============== Properties Related to Main Content ============== */

body {
   background-color: white;
   width: 100%;
   height: 100%;
}

#contentBackground {
   display:flexbox;
   /* position: absolute; */
   z-index: 1;
   background-color: black;
   /* padding-top: 30px;
   padding-bottom: 30px; */
   width:100%;
   /* border: dashed red; */
}

.content {
    display:block;
    position: relative;
    z-index: 1;
    width: 100%;
    background-color: black;
    margin:auto;
    /* border: dashed red; */
}
 
p {
    display:block;
    font-family: 'MinecraftCHMC';
    color:white;
    z-index: 1;
    background-color: black;
    /* position:relative; */
    margin: auto;
    line-height: 1.25;
    margin-top: 0.5em;
    font-size: 24px;
    display:block;
    position: relative;
    z-index: 1;
    width: 40%;
    background-color: black;
    margin:auto;
    /* border: dashed red; */
}

#discordURL {
    display: block;
    font-size: 2em;
    word-wrap: break-word;
    /* border:greenyellow dotted 5px; */
}

.background {
   background-color: black;
}

.omegaText {
   font-size: 60px;
}

.giantText {
   font-size: 40px;
}

.bigText {
   font-size: 32px;
}

.mediumText {
   font-size: 28px;
}

.smallText {
   font-size: 24px;
}

.DC {
   color:#FF0000;
}

.Virginia {
   color: #0055ff;
}

.Maryland {
   color: #EAAB00;
}

.UMCPGMC {
   color:#C52227;
}

.boldText {
   font-weight: bold;
   /* text-shadow: 3px 2px #323232; */
}

summary {
   color: white;
   background-color: #C52227;
   padding: 25px;
   border-radius: 25px;
   margin: auto 0;
}

details {
   color:white;
   padding: 0.1em;
   border-radius: 25px;
   margin: auto 0;
   margin-top: 0.5em;

}

details[open] > div {
   background-color: #323232;
   padding-left:50px;
   padding-right:25px;
   padding-top:25px;
   padding-bottom:25px;
   border-radius:15px;
   margin: auto;
   margin-top: 1em;
}

.textAligner {
   text-align: center;
}

.autoMargin {
   margin: auto;
}

.sectionHeading * {
   color:#EAAB00;
   text-align: center;
   padding-top: 40px;
}

.stickyHeading {
   position:sticky;
   top: 100px;
   background-color: black;
   width: 100%;
   height: 100px;
   margin-left: 50%;
   transform: translateX(-50%);
   z-index: 5;
}

.stickyHeading h1 {
   padding-top:0.15em;
}

.stickyHeading h2 {
   padding-top:0.4em;
}

h1 {
   font-size: 80px;
   color:white;
}

h2 {
   font-size: 60px;
   color:white;
}

ol, ul, li {
   line-height: 1.25;
   margin-top: 1em;
   margin-bottom: 1em;
   margin-left:0;
   margin-right:0;
}

.info {
   list-style: none;
   line-height: 1.25;
   margin-top: 1em;
   margin-bottom: 1em;
   margin-left:0;
   margin-right:0;
}

.info li::before {
   content: "ⓘ "
}

dl, dt {
   display: block;
   line-height: 1.25;
   margin-top: 1em;
   margin-bottom: 1em;
   margin-left: 1em;
}

dd {
   margin-inline-start: 3em;
}

.newLine {
   margin-top: 1em;
}

.roundedEdges {
   background-color: #323232;
   border-radius: 25px;
   padding:1em;
}

#dynamicMap {
   margin: auto;
   width: 100%;
   height: 87.5%;
   display: block;
   position: absolute;
}

/* #mapContainer {
   width: 100%;
   height: 100%;
} */

.linkContainer {
   width:40%;
   margin:auto;
   margin-top: 2em;
}