@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Roboto+Condensed');

/* * ----------------------------------- 
   * |   CSS Reset and Color Initial   |
   * -----------------------------------
 * */
:root {
  --gray: #ccc;
  --white: #fff;
  --redtwo: #7a0000;

  /*? Doctrine Icon Colors */
  --red: #b52b2e;
  --orange: #f78631;
  --blue: #029ca1;
  --purple: #5f489c;
  --green: #51b653;
  --color2: #20262e
}
h1,h2,h3,p {
  position: relative;
  margin: 0;
  padding: 0;
}

html{
  height: 100%;
}

body {
  /* margin: 2rem; */
  background: rgba(0, 0, 0, 0.95);
  /* background: rgba(255, 255, 255, 0.95); */
  min-height: 200px;
  color: white;
  font-family: 'Roboto Condensed';
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
footer{
  background-color: rgba(32, 38, 46, 0.50);
  color:rgba(255, 255, 255, 0.25);
  margin-top: auto;
  border-radius: 0.25rem;
  padding: 0.25rem;
  text-align: center;
}
a {
  color: white;
}

.file-buttons{
  width: 9rem;
  font-size: 2rem;
  padding: 0.25rem;
  border-radius: 0.25rem;
  background-color: #b52b2e;
  color: #fff;
  box-shadow: inset 0 0 0.25rem 0.25rem rgba(122, 0, 0, 0.5), 0 0 0.125rem 0.125rem rgba(0, 0, 0, 0.25);
}
.file-buttons:hover{
  cursor: pointer;
  background-color: #7a0000;
  box-shadow: inset 0 0 0.25rem 0.25rem rgba(181, 43, 46, 0.5);
  transition: 200ms ease-out;
}

/* * Doctrine Tab Stuff */
.doctrine-container {
  background-color: hsla(214, 18%, 15%, 0.75);
  box-shadow: inset 0 0 0.5rem 0.5rem rgba(0, 0, 0, 0.5);
  border-radius: 0.25rem;
}
.doctrine-tabs-container{  /* Doctrine Title Tabs Container */
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  text-align: center;
  width: 622px;
  background: #20262e;
  /* outline:0.125rem solid #2d2d2d; */
  border-radius: 0.125rem;
  height: 2.5rem;
  margin-bottom: 0.25rem;
  margin-left:0.125rem;
  margin-top:0.125rem;
}
.doctrine-grid-container{ /* Grid layout for Doctrine Icons and Descriptions */
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.25rem;
  margin-left:0.125rem;
  margin-bottom:0.125rem;
  width: 630px; 
}
/* * Doctrine Icon Settings */
.doctrine-grid-container div{ /* Defaults for Doctine Squares */
  outline:0.125rem solid #2d2d2d;
  box-shadow: inset 0 0 0.5rem 0.5rem rgba(0, 0, 0, 0.25);
  background: #20262e;
  border-radius: 0.125rem;
  position: relative;
  width: 100px;
  height: 100px;
}
.doctrine-grid-container img { /* Doctrine Icon Sizing */
  width: 6rem;
  height: 6rem;
}
/* * Doctrine Description Settings */
.doctrine-grid-container div:nth-of-type(4n){
  grid-column: 4/span 3;
  outline:0.125rem solid #2d2d2d;
  box-shadow: inset 0 0 0.5rem 0.5rem rgba(0, 0, 0, 0.25);
  background: #20262e;
  border-radius: 0.125rem;
  padding: 0.5rem;
  height: 100px;
  width: 304px;
}
.doctrine-grid-container h3 { /* Name of Doctrine */
  text-align: center;
  text-decoration: underline;
}
.doctrine-grid-container p { /* Doctrine Description */
  font-size: 0.875rem;
}
/* * ----------------------------------- 
   * |  Set outline color for each     |
   * |  specific Doctrine tab content  | 
   * -----------------------------------
 * */ 
 #AfterlifeTab div{
  outline: 0.125rem solid rgb(95, 72, 156, 0.45);
}
#WorkWorshipTab div{
  outline: 0.125rem solid rgba(181, 43, 45, 0.45);
}
#PossessionsTab div{
  outline: 0.125rem solid rgba(247, 135, 49, 0.35);
}
#LawOrderTab div{
  outline: 0.125rem solid rgba(2, 156, 161, 0.45);
}
#SustenanceTab div{
  outline: 0.125rem solid rgb(81, 182, 83, 0.25);
}
/* * ----------------------------------- 
   * |  Customize the Doctrine Icons   |
   * |  Color + Hover + Transitions    | 
   * -----------------------------------
 * */ 

 
.doctrine-icon-btn[type='radio'] {
  position: absolute;
  opacity: 0;
}
.doctrine-icon-btn[type='radio'] + img {
  cursor: pointer;
  filter: grayscale(90%);
  opacity: 0.35;
  top: 0.125rem;
  left: 0.125rem;
  position: relative;
}
.doctrine-icon-btn[type='radio']:checked + img {
  filter: grayscale(0);
  opacity: 1;
}
.doctrine-icon-btn[type='radio'] + img:hover {
  filter: grayscale(0);
  transition: 200ms linear;
  opacity: 1;
}

/* * ----------------------------------- 
   * |  Doctrine Desc. Container       |
   * |  selecting the 4th div child to |
   * |  span 3 cols to fit description | 
   * -----------------------------------
 * */ 


/* * ----------------------------------- 
   * |         Doctrine Tabs           |
   * -----------------------------------
 * */
.doctrine-tabs{
width: 7.5rem;
height: 2.25rem;
font-size: 1rem;
padding: 0.25rem;
color: #fff;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
position: relative;
top: 0.125rem;
/* top: 0.5rem; */
opacity: 50%;
filter: grayscale(85%);
}
.afterlife-tab{
background-color: #5f489c;
}
.workworship-tab{
  font-size: 0.9rem;
  background-color: #7a0000;
}
.possessions-tab{
  background-color: #f78631;
}
.laworder-tab{
  background-color: #029ca1;
}
.sustenance-tab{
  background-color: #51b653;
}
.doctrine-tab-active{
  opacity: 100%;
  filter: grayscale(0);
}