/* clears default browser css*/
* {
  box-sizing: border-box; /* Makes sizing more predictable */
  margin: 0;
  padding: 0;
}


body {
   background-image: url(../images/blackstarry-background.gif);
   background-color: rgb(0, 0, 0);
}

p, li {
    color:rgb(111, 213, 254);
    margin-bottom: 10px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

h2, h4 {
      font-family:cursive;
     font-size: 15px;
    text-align: center;
}

h2 {
    font-size: 23px;
    color: rgb(141, 214, 253);
    margin-bottom: 5px;
    text-shadow: 0 0 4px rgb(130, 161, 255);
    font-family:cursive;
}

h4 {
    margin-top: 0px;
    margin-bottom: 0px;
    color: rgb(208, 234, 249);
    padding: 5px;
    line-height: 1.3;
}

.gem {
    position: absolute;
    top: 20px;
    z-index: 12;
    right: 85%;
}


.moon {
    position: absolute;
    z-index: 0;
    top: -0px;
    left: 72%;
    filter: saturate(20%) hue-rotate(200deg);
}

#logo {
    position: absolute;
    z-index: 0;
    filter: brightness(140%);
    height: 190px;
    top: 100px;
    left: 340px;
}


header {
    min-width: 860px;
    height: 225px;
    position: relative;
    z-index: 12;
    left: 230px;
    width: 70%;
    display: flex;
    justify-content: center;
}


.flex-container {
    display:flex; 
    box-sizing: border-box;
    align-items: end; /* this is holding all of the non-grid elements together*/
    position: relative; 
    height: 800px;
    min-width: 1100px;
    left: 2%
}

nav {
    background-color: none;
    background-image: url("../images/nav-column.png");
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    left: 20px;
    padding-top: 87px;
    line-height: 38px;
    position:relative;
    z-index: 2;
     height: 1100px;
    min-width: 260px;
    top: 290px;
    bottom: 0; 
    z-index: 20;
}

 nav div {
    width: 115px;
    height: 50px;
    margin: 7px;
}

nav img:hover {
    background-color:rgb(15, 137, 219);
    box-shadow: 0px 0px 8px 3px rgba(0, 30, 138, 0.867);
}

.darkbox {
bottom: 0;
    display: grid;
   grid-template-areas:
   'leftbar intro intro intro intro rightbar'
   'leftbar stamps stamps stamps stamps rightbar'
   'leftbar changelog changelog changelog disclaimers rightbar'
   'leftbar lastupdate lastupdate lastupdate disclaimers rightbar'
   'leftbar gems gems gems todo rightbar'
   ;
    justify-content: center;
    gap: 1px 15px;
    position: relative;
    top: 230px;
    right: 40px;
    z-index: 1;
    min-width: 890px;
    width: 70%;
    height: 1000px;
    padding: 10px;
    box-shadow: 0px 0px 500px 0px rgb(20, 103, 220);
    background-image: url("../images/blue-stones-texture.png");
    background-size: 160px;
    background-color: rgb(41, 82, 129);
    border: 35px solid transparent;
    border-image: url("../images/lightstones-texture.png") 60 round;
    border-image-outset: 3px;
    z-index: 10;
}

.leftbar, .rightbar {
    height: 700px;
    width: 150px;
    position: relative;
    align-self: center;
    bottom: 32px;
    border: 5px solid transparent;
    border-color: rgb(98, 139, 170);
    background-image: url("../images/zoshua-colah-background.jpg");
    background-size: cover;
}

.leftbar {
    grid-area: leftbar;
    right: 15px;
}

@media screen and (max-width: 1500px) {
    .leftbar {
        display: none;
    }
}

.rightbar {
    grid-area: rightbar;
    left: 10px;
}

@media screen and (max-width: 1500px) {
    .rightbar {
        display: none;
    }
}
        
.intro-box {
    background-color: rgb(11, 14, 39);
    grid-area: intro;
    position: relative;
    z-index: 0;
    top: 60px;
    font-size: 16px;
    height: 255px;
    width: 695px;
    line-height: 1.3;
    padding-top: 17px;
    text-align: center;
    border: 35px solid transparent;
    border-image: url("../images/frame-2.png") 95 round;
    border-image-outset: 15px;  
    font-size: 16.9px;
}

.intro-box h2 {
    background-color: rgb(4, 10, 189);
    margin-top: -15px;
    padding: 13px;
    margin-bottom: 15px;
    text-align: center;
    position: relative;

    }

.stamps {
position: relative;
top: 35px;
display: flex;
grid-area: stamps;
}

.stamps > * {
margin: 10px;
}

.changelog {
    grid-area: changelog;
    position: relative;
    width: 365px;
    height: 166px;
    overflow-x: hidden;
    border: 15px solid transparent;
    border-image: url("../images/frame-6.png") 55 round;
}


/*targets the table*/
.changelog table {
    color:rgb(168, 218, 249);
    max-width: 370px;
    background-color: rgb(30, 54, 213);
    border: none;
    position: relative;
}
  
/*targets the date column*/
.changelog th {
background-color:rgb(84, 181, 250);
max-width: 80px;
padding: 20px 10px 20px 10px;
color:rgb(206, 236, 251);

    
}

/*targets the description column*/
.changelog td {
background-color:rgb(39, 134, 250);
padding-left: 10px;
font-size: 14px;
height: 75px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px;
}

.lastupdate {
background-color: rgb(127, 170, 255);
grid-area: lastupdate;
height: 35px;
width: 365px;
position: relative;
background-color: rgb(11, 14, 39);
color: rgb(139, 209, 252);
position: absolute;
bottom: 55px;
text-align: center;
padding: 7px;
font-size: 14px;
border: 2px solid transparent;
border-color: rgb(6, 36, 119);
}

.disclaimers {
grid-area: disclaimers;
background-color: rgb(30, 50, 231);
background-image: url("../images/blue-fabric.jpg");
background-size: cover;
height: 182px;
width: 320px;
border: 2px solid rgb(0, 4, 8);
border-image-outset: 10px;
position: relative;
top: 1px;
}

.to-do {
grid-area: todo;
position: relative;
bottom: 67px;
background-color: rgb(30, 50, 231);
width: 320px;
height: 150px;
overflow: auto;
border: 2px solid rgb(6, 36, 119);
}

.to-do h4 {
background-color: rgb(39, 134, 250);
color: rgb(168, 218, 249);
padding: 10px;  
}

.to-do ul {
margin: 0px 30px;
list-style: square;
font-size: 15px;
margin-top: 10px;  
}

.gems {
grid-area: gems;
position: relative;
bottom: 47px;
width: 365px;
height: 135px;
display: flex;
align-items: center;
justify-content: space-around;
border: 25px solid transparent;
border-image: url("../images/blacklaceborder.png") 30 round;
}

#gem-border {
position: absolute;
bottom: -2px;
right: 12%;
z-index: 5;
}

.seance {
position: relative;
right: 250px;
bottom: 100px;
}

.seance-image {
position: absolute;
left: 70px;
z-index: 99;
}

.seance-link {
position: absolute;
top: 259px;
left: 114px;
z-index: 99;
}

.seance-link:hover { 
background-color: rgb(65, 131, 218);
box-shadow: 0px 0px 8px 3px  rgba(0, 30, 138, 0.867);
}

.balancing-space {
width: 220px;
position: relative;
top: 30px;
right: 20px;
bottom: 0;
}

.nav-right {
width: 300px;
left: -100px;
padding-top: 160px;
position: relative;
z-index: 22;
pointer-events: none;
top: 290px;
}


footer {
background-color: rgb(0, 0, 0);
position: relative;
min-width: 1300px;
height: 120px;
top: 290px;

display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

footer img {
filter: hue-rotate(350deg);
margin: 5px;
}

.blinkies {
display: flex;
justify-content: center;
align-items: center;
}

footer p {
padding: 10px;
}

#garg {
position: absolute;
z-index: 20;
bottom: 780px;
left: -70px;
filter:  brightness(170%) hue-rotate(190deg) grayscale(50%);
}

#candles {
position: absolute;
top: 760px;
right: 20px;
}


.gobling {
position: absolute;
z-index: 200;
bottom: 210px;
left: 37px;
overflow: visible; 
}

.gobling img {
position: absolute;
top:0;
left: 0;
transition: opacity 0.1s ease-in-out;
overflow: visible;
pointer-events: none;
}

.gobling a::after {
height: 450px;
width: 170px;
content: "";
position: absolute;
top: 40px;     
bottom: 100px;   
left: 20px;    
cursor: pointer;
}

#hover-gob {
opacity: 0; 
}

.gobling:hover #hover-gob {
opacity: 1;
}