/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
   font-family: merriweatherLight;
   src: url(../fonts/merriweather.light.ttf);
}

@font-face {
   font-family: merriweatherReg;
   src: url(../fonts/merriweather.regular.ttf);
}

@font-face {
   font-family: merriweatherBlackI;
   src: url(../fonts/Merriweather_36pt-BlackItalic.ttf);
}

@font-face {
   font-family: AtheneVoyage;
   src: url(../fonts/AtheneVoyage.ttf);
}

@font-face {
   font-family: ubuntu;
   src: url(../fonts/UbuntuMono-R.ttf);
}

/* text */

h1 {
    font-family: AtheneVoyage;
    font-size: 7rem;
    margin: 0px;
    color: rgba(93, 53, 33, 0.927);
    padding-right: 0.2rem;
    padding-left: 0.2rem;

}
h2 {
    font-family: AtheneVoyage;
    font-size: 1.3rem;
    margin: 0px;
    margin-top: 0.2rem;
    color: rgba(93, 53, 33, 0.927);
    padding-right: 0.2rem;
    padding-left: 0.2rem;

}

h3 {
    font-family: AtheneVoyage;
    font-size: 1em;
    margin: 0px;
    color: rgba(93, 53, 33, 0.927);
    padding-right: 0.2rem;
    padding-left: 0.2rem;

}

p, li {
    font-family: merriweatherReg;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    padding-right: 0.2rem;
    padding-left: 0.2rem;
}

a {
    font-family: merriweatherBlackI;
}

/* divs */

body {
    background-color: white;
    color: black;
    font-family: Verdana;
    font-size: .8rem;
}


.welcomeContentGroup {
    width: 700px;
    display: grid;
    grid-template-columns: 2fr 1.2fr; 
    gap: 0.5%;
    padding-left: 20%;
}

.homeContentGroup {
    margin-left: 7%;
    width: 1200px;
    display: grid;
    grid-template-columns: 1.1fr 2fr 1.2fr; 
    gap: 0.5%;
}

.title{
    margin-top: 5%;
    margin-bottom: 0px;
    padding: 0px;
}

div, nav{
    margin: 0.2rem;

}
  
.naviButton{
    background-color: rgba(47, 28, 14, 0.064);
    text-align: center;
    padding: 2px;
}

.naviIcon{
    width: 40px; 
    height: 40px;
}

.overflow{
    overflow-y: scroll;
    scrollbar-color: rgba(231, 193, 165, 0.415) rgba(36, 21, 2, 0.735);
    scrollbar-width: thin;
}
  
.homeContentGroup section{
    /* height of the thing */
    height: 630px;      
    padding: 0.2rem;
    border-style: solid;
    border-color: rgba(36, 21, 2, 0.735);
    background-color: rgba(231, 193, 165, 0.415);
    display:grid;
        color: rgba(93, 53, 33, 0.927);

}

.homeContentGroup section div p, .homeContentGroup section div li {
    font-size: .7rem;
    padding-top: 0px;
    margin-top: 0px;

}

.welcomeContentGroup div p, .welcomeContentGroup div li, .welcomeContentGroup nav p {
    font-size: .7rem;
    padding-top: 0px;
    margin-top: 0px;
    color: rgba(93, 53, 33, 0.927);

}


.innerContentStyled{
    padding: 0.2rem;
    margin: 0.2rem;
    border-style: solid;
    border-color: rgba(36, 21, 2, 0.735);
    background-color: rgba(210, 173, 146, 0.415);
}

.innerContentStyledDark{
    padding: 0.2rem;
    margin: 0.2rem;
    border-style: solid;
    border-color: rgba(36, 21, 2, 0.735);
    background-color: rgba(76, 31, 14, 0.438);
}
  
.columnMain p, .columnMain li {
    font-size: .7rem;
}

a::before {
  content: "🔗";
}

.notes{
    /* color: rgb(29, 29, 29) !important; */
    /* background-color: rgb(245, 245, 245) !important; */
    background: 
        linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 7%,
        #ab3131 7%, #ab3131 7.5%,
        rgba(255, 255, 255, 0) 7.5%, rgba(255, 255, 255, 0) 9.5%,
        #ab3131 9.5%, #ab3131 10%,
        rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 100%,
        transparent 10%),
        linear-gradient(
        rgba(40, 20, 130, 0.208) 3%, rgba(40, 20, 130, 0.208) 3%, 
        #f0f0f0 3%, #f0f0f0 100%,
        transparent 70%);
    background-size: auto 15px;
        
}

.notes p, .notes h2, .notes h3{
    font-family: merriweatherLight;
    color: rgb(19, 13, 146);
    margin: .3rem;
    margin-left: 13%;
}

.bingo{
    margin: auto;
    width: 300px; /* I'm tired of mkaing this adaptable */
    height: 300px;
    background: gold; /** <-- For the demo **/
    display: grid;
    grid-template-columns: repeat(5, 20%);
    grid-template-rows: repeat(5, 20%);;
}

#UpdateLog h2, #UpdateLog h3, #UpdateLog p{
    color: rgb(0, 255, 0) !important;
    font-family: ubuntu;

}

iframe {
    max-width: 100%;
    height: auto;
    overflow:hidden !important;
    border:none;
}

/* images */

.imageOverlay {
    position: absolute;
    z-index:-1;
}