html, body{
    margin: 0;
    padding: 0;
  height: 100%;
  background-color: black;
  }
  
.artbox{
  min-height: 100%;
  display: grid;
  background-color: grey; 
  grid-template-columns: 1fr 1fr 1fr auto; 
  grid-template-rows: auto auto 1fr 1fr auto; 
  grid-template-areas:
  "artheader artheader artheader artheader"
  ". . arttxt artimagecontainer"
  ". . arttxt artimagecontainer"
  ". . socialsbox artimagecontainer"
  "footer footer footer footer";
  align-content: flex-start; 
  }
  
.artheader{
  background-color: blue;
  grid-area: artheader;
  min-height: 100px;
  text-align: center;
  }


.arttxt{
  display: flex;
  flex-direction: column;
  grid-area: arttxt;
  max-width: 500px;
  margin: 10px 20px 10px 10px;
  gap: 10px;
  }

.ratingbox{
  display: grid;
  background-color: red;
  align-self: stretch;
  height:auto;
  grid-template-areas:
  "ratingheader ratingheader"
  "ratingimg ratingtitle"
  "ratingimg ratingsum"
  "ratingdesc ratingdesc";
  }

.rb_ratingheader{
  grid-area: ratingheader;
  margin-bottom: 10px;
  height: max-content;
  background-color: green;
  }
.rb_ratingimg{
  grid-area: ratingimg;
  width: 100px;
  height:100px;
  background-image: var(--badgeicon); 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 10px;
  }
.rb_ratingtitle{
  grid-area: ratingtitle;
  }
.rb_ratingsum{
  grid-area: ratingsum;
  }
.rb_ratingdesc{
  grid-area: ratingdesc;
  }

.artsumcontainer{
  display: flex;
  background-color: red;
  align-self: stretch;
  height:auto;
  flex-direction: column;
  }

.as_header{
  margin-bottom: 10px;
  background-color: green;
  }
.as_title{
  min-height:0;
  }
.as_date{
  min-height:0;
  }
.as_type{
  min-height:0;
  }
.as_credits{
  min-height:0;
  }

.artdescriptioncontainer{
  max-width: 500px;
  }

.artdescheader{
  background-color: green;
  min-height: 20px;
  }

.artdescription{
  background-color: red;
  }
  
.artimagecontainer{
  align-self: flex-start;
  background-color: black;
  grid-area: artimagecontainer;
  text-align: center;
  justify-self: center;
  margin: 10px 20px 10px 0;
  }
  
.artspoilercontainer{
  overflow: hidden;
  background-color: black;
  display: grid;
  place-items: center;
  }

.act_artwork{
  filter: blur(50px);
  transform: scale(1.3);
  transition: filter 0.5s ease, transform 0.5s ease;
  max-width: 100%;
  height: auto;
  display: block; 
  grid-area: 1/1;
  justify-items: center;
  }
  
.spoilertext{
  color:white;
  grid-area: 1/1;
  z-index: 1;
  max-width: max-content;
  padding: 10px;
  background-color: rgba(0,0,0,0.75);
  border-radius: 10px;
  pointer-events: none;
  width: auto;
  }
  
.spoilermode .spoilertext{
  grid-area: 1/1;
  opacity: 0;
  transition: opacity 0.5s ease;
  }
  
.artspoilercontainer.spoilermode:not(.revealed):hover .spoilertext{
  opacity: 1;
}
  
.artspoilercontainer.spoilermode:not(.revealed):hover .act_artwork{
  transform: scale(1.6);
}

.artspoilercontainer.spoilermode.revealed .spoilertext{
  opacity: 0;
  }

.artspoilercontainer.spoilermode.revealed .act_artwork{
  filter: blur(0px);
  transform: scale(1);
  }

.socialsbox{
  display: flex;
  flex-direction: column;
  background-color: red;
  grid-area: socialsbox;
  max-width: 500px;
  height: auto;
  }
  
.sb_header{
  background-color: green;
  }
  
.sb_socialgallery{
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
  grid-auto-rows: 50px;
  overflow: hidden;
  
  
  }

.footer{
  text-align: center;
  background-color: blue;
  grid-area: footer;
  }

.ratingq {--badgeicon: url("/my_work/assets/ratingbadge_q.png"); 
--ratingtheme: #FFFFFF;
--spoilersummary: "Work unrated, likely by accident or code error.<br>This work has been spoilered just in case.<br><b>Click to reveal</b>";
--ratingtitle: "This work has been Rated:<br><b>Unknown</b>";
--ratingsummary: "The rating for this work has not been set properly.";
}
.ratingu {--badgeicon: url("/my_work/assets/ratingbadge_u.png");
--ratingtheme: #5abce6;
--spoilersummary: "If this is visible then something in my code isn't working :P.<br> This work is safe.<br><b>Click to reveal</b>";
--ratingtitle: "This work has been Rated:<br><b>Universal</b>";
--ratingsummary: "This work is able to be viewed by anyone.";
}
.rating13 {--badgeicon: url("/my_work/assets/ratingbadge_13.png");
--ratingtheme: #edb25f;
--spoilersummary: "This content has been spoilered.<br>This Work contains elements unsuitable for people under 13.<br><b>Click to reveal</b>";
--ratingtitle: "This work has been Rated:<br><b>13+</b>";
--ratingsummary: "This work is not suitable for people under 13.";
}
.rating16 {--badgeicon: url("/my_work/assets/ratingbadge_16.png");
--ratingtheme: #410a8f;
--spoilersummary: "This content has been spoilered.<br>This Work contains elements unsuitable for people under 16.<br><b>Click to reveal</b>";
--ratingtitle: "This work has been Rated:<br><b>16+</b>";
--ratingsummary: "This work is not suitable for people under 16.";
}
.rating18 {--badgeicon: url("/my_work/assets/ratingbadge_18.png");
--ratingtheme: #990000;
--spoilersummary: "This content has been spoilered.<br>This Work contains elements unsuitable for people under 18.<br><b>Click to reveal</b>";
--ratingtitle: "This work has been Rated:<br><b>18+</b>";
--ratingsummary: "This work is only for Mature Audiences.";
}