/*
Name: Isaiah urbano
Class: CIS133

WELCOME to my master css and flex-box I have created for the website final!

Here you will find:
.box(main container) ,.topbox,.bottombox classes
and the id's flexdiv1,flexdiv5, and rightcolumn

the box contains two flex elements at the top and bottom, two flex elements on the left and right
and a singular center element for your main content flow.

later I will make it so one element folds (right side) in and triggers a displaynone to prevent issues with mobile devices.


if your looking for individual css classes check the css files with the reletive name to the page your looking for and treat this file as a 'master' document.

post script: I later plan to use this master document on my personal website which can be seen at test.renamon.org although because its a beta site the https certificate is having issues.


*/




body {

    background: #0b060a;
    background-color: #0b060a;
}




/* create an element that only appears at certain resolutions, -> links to comic navigation page */
/* completely crush down nav element once we get to that resolution */




/* start adressing hyperlinks 
here are some color notes.
#fe00ff
#a100b7
*/

a {outline: none;text-decoration: none !important;padding: 2px 1px 0;}

a:link {
  color: #c300ff;
}

a:visited {
  color: #a100b7;
}

a:focus {
filter: drop-shadow(0 0 0.75rem green);
}

a:hover {
filter: blur(2px);
filter: drop-shadow(0 0 0.75rem green);
}


/*
a:active {
  background: #265301;
  color: #CDFEAA;
}
*/


/*adressing hyperlinks end */


.box {
   border: solid 1px #000;
  display: flex;
    background-color: #0b060a;
  flex-wrap: wrap;
 justify-content: space-evenly;
  flex-direction:row;
}
 /* the top of our flexbox, the 'navigation' */
.topbox {
    /* padding-left: 5%; */
    background-color: rgb(30 29 31 / 70%);
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    border: solid 1px #000;
    flex-direction: row;
    justify-content: flex-end;
    z-index: 650;
    position: relative;
    /* opacity: 0.7; */
    border-radius: 25px;
}

.topbox > nav{
        font-size: x-large;
    font-family: 'Giddyup Std', sans-serif;
}


/*left column stuff*/

#flexdiv1 {
    background-color: #0b060a;
    flex: 1 1 auto;
    display: flex;
    flex: 1 1 5vw;
    border: solid 1px #000;
    width: 15%;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: space-around;
    align-items: flex-start;
    flex-direction: column;
}

/*if we have a logo this will size it*/
#logo > a > img {
    
    min-height: -moz-available;
    min-height: -webkit-fill-available;
    min-height: fill-available;
    width: -webkit-fill-available;
    width: fill-availiable;
    min-height: fit-content;
	object-fit: contain;
	width: 100%;
}

/*left pillar sub selection stuff*/

#leftcolumn > div img {
/* display: flex; */   
min-height: -moz-available; 
min-height: -webkit-fill-available;  
/* position: absolute; */   
min-height: fill-available;   
width: -webkit-fill-available; 
width: fill-availiable;   
min-height: fit-content;
min-height: -moz-fit-content;
min-height: moz-fit-content;   
object-fit: initial;
width: 16vh; 
/* height: 27vh; */
margin-bottom: -3vh;
/* margin: -2vh; */
padding: -10vh;
align-content: stretch;
justify-content: center;
align-items: stretch;  
flex-direction: column;
flex-wrap: wrap;
}

/*right column stuff*/

/*we select the id then subselect with ">" we then select div and img to apply these styles*/

#rightcolumn > div img {
  min-height: -moz-available;
  min-height: -webkit-fill-available;
  min-height: fill-available;
  width: -webkit-fill-available;
  width: fill-availiable;
  min-height: fit-content;
  object-fit: contain;
  width: 16vh;
}

#rightcolumn {
    display: flex;
    background-color: #0b060a;
    border: solid 1px #000;
    width: 15%;
    max-width: 15%;
    min-width: 14%;
    flex-wrap: wrap;
    align-content: space-between;
    flex-direction: column;
    align-items: center;
    flex: 1 0 auto;
    justify-content: flex-start;
}



/* this is our main container*/
#flexdiv5 {
    background-color: #0b060a;
  border: solid 1px #000;
  width:60%;
 flex: 1 1 auto;
  display:flex;
  justify-content: center;
}



/* the 'footer', anything we want to add under the webpage's flexbox */


.bottombox {
 background-color: #0b060a;
 display: flex;
 flex-wrap: wrap;
 border: solid 1px #000;
 justify-content: center;
 flex-direction:row;
 position:relative;
 width:100%;
}

/*inspector style sheet from live webdev */


div#leftpillar > div img {
    display: flow;
    /* width: 27vw; */
}

div#leftpillartwo {
    display: flex;
    top: 56.5vh;
    left: 1.5vw;
    position: absolute;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: flex-start;
    Z-INDEX: 5;
    align-items: baseline;
}

div#leftpillarthree {
    display: flex;
    top: 76vh;
    left: 3vw;
    position: absolute;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: flex-start;
    align-items: baseline;
    z-index: 5;
}

div#leftlongpillar {
    z-index: 1;
    display: flex;
    top: 30vh;
    /* left: 0vw; */
    position: absolute;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: flex-end;
    align-items: baseline;
}

div#statueleft {
    z-index: 3;
    position: absolute;
    top: 25vh;
    left: 1vw;
    display: flex;
    align-content: stretch;
    flex-wrap: wrap;
    align-items: baseline;
    flex-direction: column;
}

div#leftpillar {
	display: flex;
	position: absolute;
	z-index: 4;
	top: 41.3vh;
	left: 1vw;
	}

div#statueleftpillartwo {
    position: absolute;
    z-index: 6;
    top: 40vh;
    left: 2vw;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: stretch;
    align-items: baseline;
    justify-content: flex-end;
}

div#brazierleft {
	position: absolute;
	top: 12.1vh;
	z-index: 1;
	display: flex;
	align-content: stretch;
	flex-direction: column-reverse;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: baseline;
	}

div#statueleftthree {
    left: 3vw;
    position: absolute;
    top: 60vh;
    z-index: 6;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: flex-start;
    align-items: baseline;
}
div#brazieright {
    position: absolute;
    top: 12.1vh;
    z-index: 1;
    display: flex;
    align-content: stretch;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    RIGHT: 0vw;
}

div#longpillar {
    z-index: 1;
    display: flex;
    top: 30vh;
    /* left: 0vw; */
    position: absolute;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: flex-end;
    align-items: baseline;
    right: 0vw;
}

div#statueright {
    z-index: 3;
    position: absolute;
    top: 25vh;
    /* left: 1vw; */
    display: flex;
    align-content: stretch;
    flex-wrap: wrap;
    align-items: baseline;
    flex-direction: column;
    right: 1vw;
}

div#pillar {
    display: flex;
    position: absolute;
    z-index: 4;
    top: 41.3vh;
    /* left: 1vw; */
    right: 1vw;
    flex-direction: column;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}

div#statueright2 {
    position: absolute;
    z-index: 6;
    top: 40vh;
    /* left: 2vw; */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: stretch;
    align-items: baseline;
    justify-content: flex-end;
    right: 2vw;
}

div#pillar2 {
    display: flex;
    top: 56.5vh;
    right: 2vw;
    /* left: 1.5vw; */
    position: absolute;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: flex-start;
    Z-INDEX: 5;
    align-items: baseline;
}

div#pillar3 {
    display: flex;
    top: 76vh;
    /* left: 3vw; */
    position: absolute;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: flex-start;
    align-items: baseline;
    z-index: 5;
    right: 3vw;
}

div#statueright3 {
    right: 3vw;
    position: absolute;
    top: 60vh;
    z-index: 6;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: flex-start;
    align-items: baseline;
}

div#pillarflex {overflow: hidden;}