/* This is the syle css sheet for the index.html page*/
/* *Now generalized to all pages */
/*all written by Garrett Robinson with a lot of internet help */

html, body{
margin: 0;
padding: 0;
width: 100%;
max-width: 100vw;
/*  overflow-x: hidden; breaks the header bar */
}

.site {
width: 100%;
margin: 0 auto;
}
.site p{
font-family: Calibri;
font-weight: lighter;
margin: 0; /*length/dist between lines*/
padding: 0;
color: green;
}
.site h1{
font-family: Calibri;
font-weight: bold;
/*font-size: 5vw;/* % of the viewport width*/
color: blue;
}

.header-bar{
position: sticky; /*relative static sticky*/
/*height: 60px;*/
height: 6vh;

background-color: #016273;
background-image: radial-gradient(circle, #0A9396 0.5px, transparent 0.5px);
background-size: 5px 5px;

box-shadow: 0 4px 6px rgba(0,0,0,0.1);

color: green;
display: flex;
/* justify-content: start; /*space-evenly*/
align-items: center; /*center*/ /* this is up/down alignment */

padding: 0px 0;
top: 0;
width: 100%;
border-bottom: 2px solid #CA6702;

z-index: 10;
}

.header-bar-image-sector{
/*border: 2px solid #333;/* FOR TESTING */

display: flex;
flex: .25;
height: 100%;
width: 100px;
gap: 20px;
flex-shrink: 1;
margin: 0px;

justify-content: center;
align-items: center;
}
.header-bar-text-sector{
display: flex;

/*border: 2px solid #333;/* FOR TESTING */
flex: 5;
height: 100%;
width: 100px;
gap: 20px;
flex-shrink: 1;
margin: 0px;

justify-content: flex-start;
align-items: center;
}
.header-bar-external-sector{ /* This was eventually unused, left in only for formatting*/
/*border: 2px solid #333;/* FOR TESTING */

display: flex;
flex: 1;
height: 100%;
width: 100px;
gap: 20px;
flex-shrink: 1;
margin: 0px;
}

.header-bar-text{
display: flex;
/*justify-content: space-evenly;*/
/*width: 40vw;*/
/*font-size: 200%;*/
gap: 4vw;
margin: 1vw;
font-size: clamp(1rem, 2vw, 2rem)
}

.header-bar-text h1{
font-family: Calibri;
color: #EE9B00; /*yellow*/
/*color: #BB3E03; red-orange*/
font-size: 80%;
}
        .header-bar-text h1:hover {
            color: #fff; /*color to change to white*/
        }



.header-logo{
height: 4vh;
width: auto;
/* filter: invert(1);
mix-blend-mode: screen; /* this never worked, so be it*/
background-color: #fff; /*#EE9B00;/*#EAF6F2;*/
background-size: 15px 15px;
border-radius: 5px;
border: 2px solid #CA6702;/*#CA6702;#0A9396*/
/*margin-left: 10px;*/
margin: 5px;
}



.spacing-box{
height: 20px;
}

.landing-head{
font-family: Calibri;
font-weight: bold;
text-align: center;
/*margin-top: 80px;*/
}
.landing-head p{
font-family: Calibri;
font-weight: lighter;
margin: 0; /*length/dist between lines*/
padding: 0;
color: #EE9B00; /*yellow*/
font-size: 20px;
}
.landing-head h1{
font-family: Calibri;
font-weight: bold;
font-size: 60px;
color: #BB3E03; /*red-orange*/
}

/* ~~~~~~~~~~~~~~~ PAGES STUFF ~~~~~~~~~~~~~~~~~*/
.page-head{
font-family: Calibri;
font-weight: bold;
text-align: center;
/*margin-top: 0px;*/
margin: 0px;
padding: 0px;
/*overflow: hidden;*/
}
.page-head p{
font-family: Calibri;
font-weight: lighter;
padding: 0;
color: #EE9B00; /*yellow*/
/*color: #CA6702; /*bronze*/
/*font-size: 20px;*/
font-size: clamp(1rem, .25vw + 1rem, 2.25rem);
margin: 0px;
}
.page-head h1{
font-family: Calibri;
font-weight: bold;
/*font-size: 60px;*/
font-size: clamp(1rem, 1vw + 1.5rem, 2.25rem);



color: #BB3E03; red-orange*/
margin: 0px;
margin: 0px;
padding: 0px;
}
.page-head h2{
font-family: Calibri;
font-weight: bold;
font-size: 30px;
/*color: #BB3E03; /*red-orange*/
/*color: #EE9B00; /*yellow*/
color: #000; /*red-orange*/
margin: 0px;
margin: 0px;
font-size: clamp(1rem, 1vw + 1.5rem, 2.25rem);  
}
.page-body{
font-family: Calibri;
margin: 0px;
padding: 0px;

font-size: 1rem;
/*overflow: hidden;*/
}

.page-body p{
font-family: Calibri;
font-weight: lighter;
padding: 0;
/*color: #EE9B00; /*yellow*/
/*font-size: 20px; /* 2vh */ 
font-size: clamp(1rem, 0.75vw + 0.5rem, 2.25rem);

margin: 0px;
/*margin-top: 1em; */
}
.page-body p2{ /* Note for future G: This is NOT correct practice, it should be .page-body .p2, as in its own container, p2 does not inherently exist as a tag*/
font-family: Calibri;
font-weight: bold;
padding: 0;
/*color: #EE9B00; /*yellow*/
/*font-size: 20px; /* 2vh */ 
font-size: clamp(1rem, 0.75vw + 0.1rem, 2.25rem);

margin: 0px;
/*margin-top: 1em; */
}
.page-body h1{
font-family: Calibri;
font-weight: bold;
padding: 0;
/*color: #EE9B00; /*yellow*/
font-size: 40px;
margin: 0px;
/*margin-top: .5em;*/
/*font-size: clamp(1rem, .75vw + 1.5rem, 2.25rem);*/
font-size: clamp(.25rem, 1vw + 1rem, 2.5rem);
}
.fixed-about-box{
border: 2px solid #BB3E03; /*for testing */

padding: 0px;
margin: 0px;
line-height: 0;

position: absolute; /* absolute instead of relative makes it ignore doc flow/resizing */
right: 15px;
top: -30px;
z-index: 3;
}
.about-name-container { /*used to hold the text*/ /* this ended up being a bad way to do this, flexbox may have worked better */
position: absolute;
/*background-color: #fff;*/
bottom: 100%; /*bottom of image at the top of the container its in */
left: 5%; /*22.5%X actually 20%*/

   /* transform: translateY(-150px); /*gives the height from the bottom (the top of parent container)*/  
   transform: translateY(-2vw); /*gives the height from the bottom (the top of parent container, previously 8vw)*/
}

.about-image {
position: absolute;
/*background-color: #fff;*/
bottom: 100%; /*bottom of image at the top of the container its in */
left: 60%;
  
/*height: 400px;*/	
height: 30vw; 
max-height: 400px;

width: auto;  
z-index: 4;
}
.about-head-text{
font-family: Calibri;
font-weight: bold;
/*font-size: 120px;*/
font-size: 120px;
font-size: clamp(1rem, 7vw + .25rem, 7rem);  

color: #fff;
margin: 0px;
padding: 0px;

/*text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);*/
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2), 2px 2px 4px rgba(50, 50, 50, 0.5);
}

.aboutcontainer{
display: grid;
grid-template-rows: 100%;
grid-template-columns: 15% 85%; /* For future garrett, or garrett re-doing this, use fractional units (0.5fr) */
/*grid-template-columns: .15fr .85fr;*/

/*border: 2px solid #BB3E03;*/
/*gap: 10vw;*/

    @media (max-width: 800px) {
	gap: 10vw;
    }
}

.about-item1{
/*border: 2px solid #040;*/
grid-row: 1 / 2;
grid-column: 1 / 2;
}
.about-item2{
/*border: 2px solid #040;*/
grid-row: 1 / 2;
grid-column: 2 / 3;
}
.pitt-logo{
height: 5vh;
width: auto;
/*margin: 5px;*/
}

.spreadsheet{
width: 100%;
border: none;
height: 500px;
overflow: hidden;
}
/*~~~~~ Back to index ~~~~~*/
.title-box{
background-color: #CA6702;
border: 2px solid #BB3E03;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
/*width: 280px;*/

padding: 0px;
margin: 0px;
line-height: 0;

position: absolute; /* absolute instead of relative makes it ignore doc flow/resizing */
left: -15px;
top: -30px;
z-index: 3;
}

.title-box h1{

margin: 18px;
font-family: Calibri;
font-weight: bold;
/*font-size: auto;*/
font-size: 3vh;
color: #fff;
text-align: center;
}

.center-box{
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
width: 80%;
max-width: 1200px;
/*padding:20px;*/
padding: 1%;
padding-top: .5vw; /*remember this affects a lot of stuff */

position: relative; /*absolute*/
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.center-box-alt{
background-color: #016273;
background-image: radial-gradient(circle, #0A9396 0.5px, transparent 0.5px);
background-size: 5px 5px;

box-shadow: 0 4px 6px rgba(0,0,0,0.1);
/*height: 500px;*/
border-radius: 8px;
width: 85%;
max-width: 1250px;
padding:20px;

position: relative; /*absolute*/
left: 50%;
transform: translateX(-50%);
z-index: 2;
}

.center-text-box{
/*border: 2px solid #BB3E03; /*FOR TESTING, PLEASE DO style = "border: 2px solid #BB3E03;" INSTEAD */

width: 80%;
max-width: 1200px;
/*padding:20px;*/

position: relative; /*absolute*/
left: 50%;
transform: translateX(-50%);
z-index: 2;
}

.featured-section{ /*remade into a flex container*/
display: flex;
/*height: 20vh;*/
min-height: 20vh;
align-items: center;
gap: 20px;
padding: -30px;
/* background-color: #BB3E03; /* used for editing */

width: 100%;
/*display: flex;
flex-shrink: 1; */
/* margin: 0 0;
/* justify-content: space-between;*/
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
        .featured-section:hover {
            background-color: #0A9396; /*color to change to*/
            box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); /*shadow effect*/
        }

.text-sector{
/*border: 2px solid #BB3E03; FOR TESTING */
flex: 1;
height: 100%;

gap: 20px;
flex-shrink: 1;
margin: 10px;
}
.image-sector{
height: 100%;
/*border: 2px solid #BB3E03;*/
display: flex;
margin: 10px;

flex: 0;
align-items: center;
justify-content: end;
}

.featured-title{
font-family: Calibri;
font-weight: bold;
font-size:  4vh;
/*font-size: clamp(1.8rem, 3vw, 2.5rem); /* Responsive scaling */
color: #000;
margin: 0 0 10px;
}

.featured-passage{
font-family: Calibri;
font-weight: lighter;

font-size: 2.5vh;
color: #333;
margin: 0;
}

.featured-image{
height: 18vh;
width: auto;
}

.horizontal-line {
width: 100%;
height: 2px; /* Thickness*/
background-color: #000;
/*margin: 5px 5px; /* Spacing above and below the line */
margin: 5px 0px;
}

/*---------------------------------------- Project Exclusive Stuff --------------------------------------------*/

.collapsible-section {
     /* margin: 10px 0;*/
	/*border: 1px solid #ccc;*/
     /* border-radius: 5px;*/

background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
width: 82%;
max-width: 1240px;
/*padding:20px;
/*margin: 0 20px;*/

position: relative; /*absolute*/
left: 50%;
transform: translateX(-50%);
z-index: 2;

    }

    .collapsible-button {
      width: 100%;
      text-align: left;
     /* padding: 10px;*/
	border-radius: 8px;

    /*border-top-left-radius: 8px;
    border-top-right-radius: 8px;/*
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;*/

      font-size: 16px;
      background-color: #CA6702;
      border: none;
      outline: none;
	/*margin: -20px;*/
	padding-block: 0;
	padding-inline: 0;      
	padding: 0px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .collapsible-button:hover {
      background-color: #BB3E03; /*ddd*/
    }

    .collapsible-content {
      max-height: 0;
      overflow: hidden;
      padding: 0 10px;
      
     transition: max-height 0.3s ease, padding 0.3s ease;
    }

    .collapsible-content.open {
      max-height: 800px; /*Not sure if this is necessary. Update- it is*/
      padding: 10px 10px;
    }

/*I do not claim to have written the javascript + original collapsible, credit goes to W3Schools */

.figure-image {
/*border: 1px solid #ccc;*/

/*background-color: #fff;*/
display: flex;
border: 2px #0;
left: 50%;

/*height: 400px;*/      
height: 15vw; 
/*max-height: 375px;*/

min-height: 12vh;

width: auto; 
/*margin-bottom: 1vw;*/ /*Typically the text has the margin*/

/*z-index: 4;*/
}

.figure-container {
/*border: 1px solid #000;*/
  
display: flex;
width: 100%;
justify-content: center;
align-items: center;

flex-wrap: wrap;
}

.half-figure-sector{
display: flex;
/*border: 1px solid #bbb;*/

flex: 0.5;

justify-content: center;
align-items: center;
}