html { /*mainly the background, sets border for entire page*/
  height: 100%;
  /*background-image: linear-gradient(to bottom right, rgb(138, 88, 167), rgb(0,0,0));*/
  background-repeat: no-repeat;

  background-color: var(--doc-bg-color);
  
}

#page-container { /*something to do with the position of the info to the footer*/
  position: relative;
}

.Info { /*creates the border, space, and aesthetic of the main body of information */
  margin: 80px 30% 120px 30%;
  padding-bottom: 10px;
  font-family: Georgia;
  position: relative;
  min-height: 100%;
  border-color: var(--info-border-color);
  border-width: 8px 0 8px 0;
  border-style: solid;
  border-radius: 20px;
  background-color: var(--info-bg-color);
  background-image: var(--info-bg-image);
}

.Info h2 { /*manipulates the text in the main section of the page tagged <h2>*/
  text-align: center;
  padding-top: 5px;
}

.Info p { /*manipulates the text in the main section of the page tagged <p>*/
  text-align: center;
  margin: 5px;
  
}

header { /*stylizes the header and sets its perameters*/
  text-align: left;
  position: absolute;
  top: 00%;
  height: 100px;
  width: 100%;
  background-color: var(--color-header-footer-bg);
  border-bottom: 30px solid var(--header-border-color)
}

header p { /*color of any <p> elements in the header, currently there is none*/
  color: var(--header-footer-p-color);
  padding-top: 15px;
  padding-left: 30px;
}

header p:hover { /*changes the color of any <p> elements in the header while hovering, currently there is none*/
  color: var(--header-footer-p-hover-color);
}

footer { /*creates the black bar to serve as a footer to the page */
  position: absolute;
  height: 75px;
  bottom: 0;
  background-color: var(--color-header-footer-bg);
  padding-top: 20px;
  width: 100%;
  border-top: 30px solid var(--header-border-color)
}

footer p { /* places and colors the text in the footer how I want */
  margin-top: 10px;
  margin-left: 80%;
  color:var(--header-footer-p-color);
}

footer p:hover { /* I need SOME interactivity */
  color:var(--header-footer-p-hover-color);
}

* { /* sets the overall margin and padding to zero, default at 20px. necessary for footer to span entire width */
  margin: 0;
  padding: 0;
}

.visually-hidden { /*hides the default radio stylings*/
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.color-picker > fieldset { /*stylizes the container of the theme buttons*/
  border-width: 1px;
  border-color: rgb(56, 56, 56);
  background-color: rgb(56, 56, 56);
  display: flex;
  gap: -5px;
  width: fit-content;
  margin-inline: auto;
  padding: 10px 10px;
  float:right;
  margin-top: 20px;
  border-radius: 20px 0 0 20px;
}

.color-picker > fieldset:hover { /* makes the container around the theme buttons hover a darker grey */
  background-color: rgb(32, 32, 32)
}

.color-picker input[type="radio"] { /* sets the shape of the buttons to a triangle, don't ask me how these make a triangle */
  appearance: none;  
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid var(--radio-color);
  border-radius: 0;
}

.color-picker input[type="radio"]#Light { /*color of the Light theme button */
  --radio-color: rgb(255, 255, 255);
}

.color-picker input[type="radio"]#Light:hover { /*color of the Light theme button while hovering*/
  --radio-color: grey;
}

.color-picker input[type="radio"]#Goomy { /*color of the Goomy theme button, also flips triangle upside down*/
  --radio-color: #9b8db3;
  border-top: 20px solid var(--radio-color);
  border-bottom: 0;
}

.color-picker input[type="radio"]#Goomy:hover { /*color of the Goomy theme button while hovering*/
  --radio-color: rgb(80, 21, 136);
}

:root:has(#Light:checked) { /*changes the theme of the page if Light button is checked*/
  --info-p-color: black;
  --header-footer-p-color: white;
  --header-footer-p-hover-color: rgb(165, 165, 165);
  --doc-bg-color: rgb(255, 255, 255);
  --color-header-footer-bg: black;
  --info-bg-color: white;
  --header-border-color: black;
  --NPB-shaded-hover: grey;
  --info-border-color: grey;
}

:root:has(#Goomy:checked) { /*changes the theme of the page if Goomy button is checked*/
  --info-p-color: black;
  --header-footer-p-color: black;
  --header-footer-p-hover-color: grey;
  --doc-bg-color: #fff2fd;
  --info-bg-color: #f09bff;
  --header-border-color: #f09bff;
  --color-header-footer-bg: #9baaff;
  --NPB-shaded-hover: #be9bff;
  --info-border-color: #be9bff;
}

/*.para1 {
  position: absolute;
  left: 10%;
  top: 200px;
  line-height: 50px;
}
#p1l2 {
  padding-left: 50px;
}
#p1l3 {
  padding-left: 25px;
}

.para2 {
  position: absolute;
  right: 15%;
  top: 250px;
  text-align: right;
  line-height: 30px;
}
#p2l2 {
  padding-right: 50px;
}
#p2l3 {
  padding-right: 25px;
} */

.Segue { /*container for the NPB*/
  position: absolute;
  right: 30px;
  top: 50%;
}

#NPB { /*"Next Page Button", stylizes the button used to move to the next/second page*/
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid var(--header-border-color);
  background: transparent;
}

#NPB:hover { /*makes the NPB a darker shade while hovering*/
  border-right: 10px solid var(--NPB-shaded-hover);
}