/* 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." */

:root {



--background: rgb(55,55,60);
--red: rgb(240,0,35);
--light_red: rgb(240,40,47);
--click_border: rgb(100,100,105);
--normal_text: rgb(165,155,165);
--button_text: rgb(230,20,27);
--neutral_border: rgb(110,110,115);
--button_black: rgb(10,10,20);
--name_text: rgb(200,200,205);
--contrast_red: rgb(200,20,27);
--contrast_white: rgb(240,200,210);
--inlay_black: rgb(20,20,40)


/*primary color, used in menu, branding, and non clickable text that is important 
link color used in header and links, also used in less saturate amounts depending on importance
main bg color, then 2nd bg color used for splitting and decorating 2nd background color is used for most default text, and is just used to split things
3 color design, brightest most important, 2ndary color, and tertiary background color with a 2ndary background color to split things, linkes are given no extra value in this theme, they just blend


*/


/*tos page, is next priority, the tos page will consist of tos, and then checkbox that reveals a forum to input request imformation after accepting terms, and then that will store a message on the site... i will take requests through this for a bit?

forum will require request, links to pertaining references, and then email address or means of contacting

*/
}





html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* end of css reset sheet... credit to https://meyerweb.com/eric/tools/css/reset/ for css reset sheet */



hr {

color: var(--neutral_border);

}

p {
font-size:18px;
color:var(--normal_text)

}




body {
/*original bg color*/
  background-color:var(--background);
  color: var(--light_red);
  font-family: Verdana;
  text-align:center;
}



a {
color:var(--red);

}  

h1 {
border: 2px solid var(--light_red);
  word-wrap:break-word;
  color:var(--red);
  padding: 10px;
  margin: 1% 3%;
  text-align:center; 
  font-size:56px;
  }
  
h2 { 
  color:var(--light_red);
  font-size:32px;
  padding:20px;
  text-align:center}
  
h3 {
    font-style: italic;
    font-size: 24px;
  }




 /*used for small less important text*/
  h4{ 
  color:var(--light_red)
  }

  .small_text {
  font-size:12px;
  
  }


ul {
  color:var(--normal_text);
  /*background-color: var(--light_gray);*/
  text-align: left;
  font-size: 16px;

  border-radius: 5px;
  size:90%;
  } 

  
img {
  max-width:100%;
  box-sizing:border-box;
  height:auto;
  
  }
  
  
.menu-buttons:link, .menu-buttons:visited {
  
   
    text-decoration:none;
    background-color:rgb(200,60,60);
    color:var(--red);
    padding: 15px 25px;
    text-align:center;
    display: inline-block;
    border-radius: 5px;
    margin: 4px;
  }  

.menu-buttons:hover , .menu-buttons:active {
      background-color: rgb(90,90,100)
    }
  
  

  

  
  .button1{
   height:18px;
    text-decoration:none;
    background-color:rgb(70,70,75);
    color:var(--button_text);
    padding: 15px 25px;
    text-align:center;
    display: inline-block;
    border-radius: 5px;
    margin: 4px;
    }
    
  .button1:hover,.button1:active {
      background-color: var(--red);
      color: var(--button_black);
      /*text-shadow: 1px 1px 1px var(--button_blue);*/
    
    }
    
  .button1:focus {
 
   border:2px solid red;
  }
  
  
  
  
  
  /* add more fancy stuff with borders set flex grow so that images fill screen evenly instead of making awkward empty space everywhere*/
  .image_container{
    display: flex;
    flex-wrap: wrap;
    gap:5px;
    justify-content:center;
  
    
    }
    
  .image_container .image_block {
  /*display:flex;
  width:100%;
  justify-content:row;
  
*/  
  }
  
  .image_container .image_block .gallery_image {
    
    border: 5px solid var(--click_border);
    
    /*
    max-width:95%;
    max-height:95%;
*/
    }
    
  .image_container .image_block .gallery_image:hover
  {
    border: 5px solid var(--light_red);
    }
    
  .image_container .image_block .name {
  
    display:flex;
    flex-wrap:wrap;
    /*
    max-width:95%;
    max-height:95%;
    */
    justify-content:center;
    padding:12px;
    font-size: 48px;
    color:var(--name_text);
    text-decoration:none;
    background-color:rgb(50,50,55);
    border-radius:5px;
    border-style:double;
    border: 1px solid var(--neutral_border);
 
    }
    
    
  .hidable_image {
  display:none;
  }
  
  
  #toggle1:checked ~ .hidable_image {
  display:flex;
  justify-content:center;
  }
  
  .gallery_button {
   font-size:16px;
   margin: 0px 8px 0px 8px;
   /*  
    background-color:rgb(70,70,75);
    color:red;
    padding: 15px 25px;
    text-align:center;
    display: inline-block;
    border-radius: 5px;
    margin: 4px;
    */
    /* just add the label to the button class*/
    
  }
   
  .gallery_button label:hover {
  /*background-color:rgb(90,90,100);*/
  cursor:pointer; 
  
  }
  

  
  .button_block {
    display:flex;
    flex-wrap:wrap;
    
    justify-content:center;
    
    
    
    }
  
  .menu {
  display:flex;
  justify-content: center;
  /*border: 1px solid var(--neutral_border);*/
  
  
  }
  
  
  .contact_forum {
  text-align:center;
  }
  
.commissions_slots {
color:var(--neutral_border);


}

.commissions_slots h3 {
padding: 1px 2px 5px 2px ;
color:var(--red);
font-size:36px;
border: 2px solid var(--red);
margin: 1% 3%;
}

.terms {

margin: 1% 3%;
display:flex;
justify-content:center;
/*background-color:var(--light_red);*/

border: 2px solid var(--light_red);
box-sizing:border-box;
height:220px;

overflow: scroll;

}



}

  


  .input_box:focus {
  border:2px solid red;
  }
  .input_box {
  /*display:none;*/
 
  opacity:0;
  height:0px;
  width:0px;
  }
  
  .placed_check {
  position:absolute;
  top:100px;
  }
  
  

  .focus_line:focus {
  border:2px solid red;
  }




.terms embed {
}
  
  
  
/* beginning of conterast button styles*/
#contrast:checked ~ .contrastable {
background-color:var(--button_black)
}
  
  
  
  
.contrastable p  {
color:red;
background-color:rgba(0,0,0,0)
}



#contrast:checked ~ .contrastable .text_link {
color:var(--button_black);
background-color:var(--light_red);
}

#contrast:checked ~ .contrastable label {
color:var(--button_black);
background-color:var(--light_red);
}

#contrast:checked ~ .contrastable .name {
background-color:var(--button_black);
color:var(--contrast_white);
border: 1px double var(--light_red)
}

#contrast:checked ~ .contrastable .gallery_image {
border: 5px solid var(--light_red)
}

#contrast:checked ~ .contrastable .gallery_image:hover {
border: 5px solid var(--click_border)
}



#contrast:checked ~ .contrastable label:hover {
color:var(--light_red);
background-color:var(--button_black);
}


#contrast:checked ~ .contrastable h3  {
color:var(--button_black);
background-color:var(--light_red);

}


#contrast:checked ~ .contrastable h2  {
color:var(--light_red);
background-color:var(--button_black);

}



#contrast:checked ~ .contrastable a:hover {
color:var(--light_red);
background-color:var(--button_black);
}



#contrast:checked ~ .contrastable p {
color:var(--light_red);
background-color:var(--button_black);

  
}


#contrast:checked ~ .contrastable ul {
color:var(--light_red);
background-color:var(--button_black);
}


#contrast:checked ~ .contrastable hr {
color:var(--light_red);

}

input:focus + label {
    border:2px solid var(--red);
  }
  
.gallery_image_link {
color:rgba(0,0,0,0);
background-color:rgba(0,0,0,0);
}
  
  
.contrast_button {
background-color:var(--button_black);
color:var(--light_red);
}