@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&family=Odibee+Sans&family=Rubik&display=swap');
/*
font-family: 'Libre Baskerville', serif;
font-family: 'Odibee Sans', cursive;
font-family: 'Rubik', sans-serif;
*/
:root {
    --henderson-black: #090B0A;
    --henderson-red: #D62C39;
    --henderson-grey: #505458;
    --henderson-silver: #727270;
    --henderson-white: #FFFFFF;
}
* {
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    list-style-type: none;
    box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
    background-color: var(--henderson-black);
}
.ADL{
    display: block;
    width: fit-content;
    margin: 0 auto;
}
.comingSoon {}
.site, .site > header, .site > nav, .site > main, .site > footer {
    width: 100%
}
.site {
    display: grid;
    grid-template-columns: 10% 80% 10%;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: ". header ."
                         ". nav ."
                         ". main ."
                         ". footer .";
}
.site > header {
    grid-area: header;
    margin-top: 25px;
}
.logo {
    display: block;
    margin: 0 auto;
    width: max-content; 
}
.ADL, .comingSoon {
    display: block;
    width: max-content;
    margin: 0 auto;
}
.ADL h1 {
    font-family: 'Rubik', sans-serif;
    font-size: 6ch;
    color: rgba(255,255,255,.3);
    text-shadow: 0 0 15px rgba(255,255,255,.5), 0 0 10px rgba(255,255,255,.5);
    margin: 25px 0px;
}

.comingSoon h1 {
    font-family: 'Odibee Sans', cursive;
    font-size: 6ch;
    color: #FFFFFF;

text-shadow: 0 -1px 4px #FFF, 0 -2px 10px #ff0, 0 -10px 20px #ff8000, 0 -18px 40px #F00;
color: #FFFFFF;

}
.site > nav {
    grid-area: nav;
    margin-bottom: 10px;
}
.menu {}
.menu ul {
    width: max-content;
    list-style-type: none;
    margin: 0 auto;
}
.menu li {
    display: inline-block;
    border-radius: 50%;
    background-color: var(--henderson-silver);
    color: var(--henderson-white);
    width: 75px;
    height: 75px;
    text-align: center;
    padding-top: 28px;
    font-family: 'Odibee Sans', cursive;
    
}
.menu li:hover {
    background-color: var(--henderson-grey);
    color: var(--henderson-red);
}
.menu a {
    border-radius: 50%;
    border-color: var(--henderson-black);
    padding: 10px 5px;
    background-color: var(--henderson-black);
    text-decoration: none;
    color: var(--henderson-white);
    -webkit-box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.26);
    -moz-box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.26);
    box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.26);
}
.menu a:hover {
    color: var(--henderson-red);
}
.site > main {
    grid-area: main;
}
.mainContentContainer {
    background-color: var(--henderson-grey);
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 25px;
}
.mainContent {
    display: block;
    border-radius: 5px;
    padding: 15px 25px;
    background-color: var(--henderson-white);
    -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.75);
}
.mainContent h1, .mainContent h2, .mainContent h3, .mainContent h4 {
    font-family: 'Libre Baskerville', serif;
}
.mainContent h1 {
    font-size: 5ch;
}
.mainContent h2 {
    font-size: 4ch;
}
.mainContent h3 {
    font-size: 3ch;
}
.mainContent h4 {
    font-size: 2ch;
}
.mainContent p {
    font-family: 'Rubik', sans-serif;
    text-indent: 3ch;
}
.site > footer {
    grid-area: footer;
    margin-bottom: 25px;
}
.footerContentContainer {
    background-color: var(--henderson-grey);
    border-radius: 5px;
    padding: 3px;
}
.footerContent {
    background-color: var(--henderson-silver);
    display: block;
    border-radius: 5px;
    padding: 15px 25px;
    -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.75);
}