body {
  background: #000000;
  color: #ccc;
  font-size: 13px;
  height: auto;
  padding-bottom: 20px;
}
#supersized{margin-left:0;}
#supersized li{padding-left:0;margin-left:0;}
a {
  color: #fff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
.caption{
    text-align:center;
    font-weight:bold;
    padding: 0 0 10px 0;
}
#content{
  display:block;
  background: black;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 50px;
  width:80%;
  margin:0 auto;
}
#linkback{
  text-align:center;
  font-size:1.2em;
  border-top:1px solid #999;
  padding-top:10px;
  margin:20px 100px;
}
h1 {
font-family: 'Vollkorn SC', serif;
  font-size:4em;
  line-height:1;
  font-weight: normal;
  padding-top: 1em;
  text-align: center;
  text-shadow: 3px 3px 3px black;
}

h2 {
font-family: 'Vollkorn SC', serif;
  padding-top: 1.4em;
  padding-bottom:1.4em;
  font-size:2em;
  text-align: center;
}
h3 {
font-family: 'Vollkorn SC', serif;
  padding-top: 1.2em;
  padding-bottom:1.2em;
  font-size:1.4em;
  text-align: center;
}

#writing{
    padding:0 60px;
}

p {
    font-family:sans-serif;
    font-size:17px;
    text-indent:1em;
    padding-bottom:5px;
    text-align:justify;
}
ul{
    margin-top:5px;
    margin-bottom:5px;
    list-style-type: circle;
}
li{
    font-family:sans-serif;
    font-size:17px;
}

.poetry{
    margin-left: -25%;
    margin-top: 10px;
    padding-left: 30%;
    text-indent: 0;
}
.novel{
    font-style: italic;
    margin:0 10%;
}
div.day a{
font-family: 'Vollkorn SC', serif;
  color:white;
  font-size: 3em;
  height:78px;
  padding-top:10px;
  width: 168px;
  margin-left:12px;
  margin-right:12px;
  margin-top:10px;
  margin-bottom:10px;
  display:block;
  background-color:rgba(178, 76, 76, 0.61);
  background-image: url("https://www.theanneboleynfiles.com/advent2022/images/numbers.png");
  float:left;
  text-align: center;
  text-decoration: none;
  cursor: not-allowed;
  -webkit-transition:color 1s ease-in;
  -moz-transition:color 1s ease-in;
  -o-transition:color 1s ease-in;
  transition:color 1s ease-in;
  border-radius:10px;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px 0 rgba(117, 81, 28, 0.3), 0 6px 20px 0 rgba(255, 255, 255, 0.19);
}
div.day.link a,div.day.past a{
  background-color:rgba(178, 76, 76, 0.40);
}
div.day.link a:hover{
  cursor: pointer;
}
div.day.link a:hover,div.day.past a:hover{
  color:gray;
  box-shadow: 15px 15px 26px #000;
  cursor:pointer;
}
#today a{ color:yellow;}

#content iframe{
display: block;
margin-left: auto;
margin-right: auto;
padding-bottom: 10px;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.sm { font-size:8px; vertical-align: top; line-height: 8px;}

blockquote{
  display:block;
  background: #fff;
  padding: 15px 20px 15px 45px;
  margin: 0 0 20px;
  position: relative;
  clear:both;
  
  /*Font*/
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.2;
  color: #666;
  text-align: justify;
  
  /*Borders - (Optional)*/
  border-left: 15px solid #c76c0c;
  border-right: 2px solid #c76c0c;
  border-radius:10px;
  
  /*Box Shadow - (Optional)*/
  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 15px #ccc;
}

blockquote::before{
  content: "\201C"; /*Unicode for Left Double Quote*/
  
  /*Font*/
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: #999;
  
  /*Positioning*/
  position: absolute;
  left: 10px;
  top:5px;
}

blockquote::after{
  /*Reset to make sure*/
  content: "";
}

blockquote a{
  text-decoration: none;
  background: #eee;
  cursor: pointer;
  padding: 0 3px;
  color: #c76c0c;
}

blockquote a:hover{
 color: #666;
}

blockquote em{
  font-style: italic;
}
#content img{
  margin:10px auto;
  display: block;
  border:none;
  -moz-box-shadow: 0px 0px 15px #555;
  -webkit-box-shadow: 0px 0px 15px #555;
  box-shadow: 0px 0px 15px #555;
  width:100%;
}
#content a img:hover{
  opacity: 0.5;
}
#content img.right{
  margin-left:15px;
  float:right;
  width: 40%;
}
#content img.left{
  margin-right:15px;
  float:left;
  width: 40%;
}
#content img.center{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.small{font-size:0.7em;}

li {padding-left:3.5em;text-indent:-2.5em;padding-bottom:10px;}

hr{color: white;
   padding: 1px 40px;
   border: 1px solid;
   margin: 10px;
   clear:both;
}

#linkback{clear:both;}

.answer{color:#555;font-weight:bold;text-decoration: underline;text-align: right;}
.answer:hover{color:red;}
.answer .ans {display:none;color:#fff;text-decoration: none;}
.nomargin p {margin:0;}

button {
	-moz-box-shadow: 0px 0px 0px 2px #9fb4f2;
	-webkit-box-shadow: 0px 0px 0px 2px #9fb4f2;
	box-shadow: 0px 0px 0px 2px #9fb4f2;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #7892c2), color-stop(1, #476e9e));
	background:-moz-linear-gradient(top, #7892c2 5%, #476e9e 100%);
	background:-webkit-linear-gradient(top, #7892c2 5%, #476e9e 100%);
	background:-o-linear-gradient(top, #7892c2 5%, #476e9e 100%);
	background:-ms-linear-gradient(top, #7892c2 5%, #476e9e 100%);
	background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7892c2', endColorstr='#476e9e',GradientType=0);
	background-color:#7892c2;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	border:1px solid #4e6096;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:19px;
	padding:12px 37px;
	text-decoration:none;
	text-shadow:0px 1px 0px #283966;
        margin-top:15px;
        margin-bottom:15px;
        width:50%;
        margin-left:25%;
}
button:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #476e9e), color-stop(1, #7892c2));
	background:-moz-linear-gradient(top, #476e9e 5%, #7892c2 100%);
	background:-webkit-linear-gradient(top, #476e9e 5%, #7892c2 100%);
	background:-o-linear-gradient(top, #476e9e 5%, #7892c2 100%);
	background:-ms-linear-gradient(top, #476e9e 5%, #7892c2 100%);
	background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#476e9e', endColorstr='#7892c2',GradientType=0);
	background-color:#476e9e;
}
button:active {
	position:relative;
	top:1px;
}
.johnson{
    border: 2px #fff dashed;
    border-radius: 30px;
    margin:10px 30px;
    padding:10px;
    text-align: center;
}
.button {
  /* text styles */
  font-size: 20px;
  line-height: 28px;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  
  /* box styles */
  display: inline-block;
  height: 29px;
  padding: 0 10px;
  border: 1px solid;
  border-color: #2d86b6 #24659e #255796;
  border-radius: 21px;
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.2) inset, 0 1px 1px rgba(1, 4, 8, 0.2);
  
  /* gradients */
  background-color: #52b6ec;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF52B6EC', endColorstr='#FF2E75CE');
  background-image: -webkit-linear-gradient(top, #52b6ec 0%, #2e75ce 100%);
  background-image: -moz-linear-gradient(top, #52b6ec 0%, #2e75ce 100%);
  background-image: -o-linear-gradient(top, #52b6ec 0%, #2e75ce 100%);
  background-image: linear-gradient(top, #52b6ec 0%, #2e75ce 100%);
    
}
.button:hover {
  text-decoration: none;
  border-color: #377cae #175a9c #0c4893;
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.2) inset, 0 1px 1px rgba(5, 64, 140, 0.2);
  
  background-color: #4fa6e4;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF4FA6E4', endColorstr='#FF1462C4');
  background-image: -webkit-linear-gradient(top, #4fa6e4 0%, #1462c4 100%);
  background-image: -moz-linear-gradient(top, #4fa6e4 0%, #1462c4 100%);
  background-image: -o-linear-gradient(top, #4fa6e4 0%, #1462c4 100%);
  background-image: linear-gradient(top, #4fa6e4 0%, #1462c4 100%);
}
.button:active {
  border-color: #094b84 #094b84 #0f4585;
  box-shadow: 0 1px 1px rgba(241, 243, 247, 0.2), 0 0 20px rgba(0, 0, 0, 0.5) inset;
  
  background-color: #1c7ec9;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF1C7EC9', endColorstr='#FF2395D9');
  background-image: -webkit-linear-gradient(top, #1c7ec9 0%, #2395d9 100%);
  background-image: -moz-linear-gradient(top, #1c7ec9 0%, #2395d9 100%);
  background-image: -o-linear-gradient(top, #1c7ec9 0%, #2395d9 100%);
  background-image: linear-gradient(top, #1c7ec9 0%, #2395d9 100%);
}

.vidcontainer {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
        margin-bottom:20px;
	height: 0;
}
.vidcontainer iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 800px) {
    p {font-size:16px;}
    h1 {font-size:3em;}
    #content{
        width:100%;
    }
    #writing{
        padding:0 10px;
    }
    #content img.right, #content img.left{
        margin:10px !important;
        float:none;
        width:100%;
    }
    div.day a{
      width: 95%;
        background-size: cover;
    }
}