/* GLOBAL CSS */
/*-------------------------------------------*/

/*clear predefined browser css and apply special styling*/

@font-face {
  font-family: 'celticg';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://www.dnddiceroller.com/assets/celticg.woff2') format('woff2'),
       url('https://www.dnddiceroller.com/assets/celticg.woff') format('woff'),
       url('https://www.dnddiceroller.com/assets/celticg.ttf') format('truetype');
}

*{
  font-family:Times;
  padding:0;
  margin:0;
  border:0;
  outline: 0;
  font-size: 1em;
  line-height: 1.0;
}

input[type=number], select{
    -webkit-appearance:none;
    -moz-appearance:none;        
    -ms-appearance:none;         
    -o-appearance:none;        
    appearance:none;   
    display:inline;  
    /*border-radius: 0; ommitted to allow curve of dice number input box */
}

select::-ms-expand {
    display: none;
}
/*

input[type=number], select{
	background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;
	-moz-appearance: none; 
	-webkit-appearance: none; 
	appearance: none;
        background-color:white;
        font-size: 0.9em;
 

//here's an alternative version with transparent background: 


select{ background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjEuNDEgNC42NyAyLjQ4IDMuMTggMy41NCA0LjY3IDEuNDEgNC42NyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIzLjU0IDUuMzMgMi40OCA2LjgyIDEuNDEgNS4zMyAzLjU0IDUuMzMiLz48L3N2Zz4=) no-repeat 95% 50%; }
*/


/*-------------------------------------------*/
/*class styling tags*/

.round{
  border-radius: 15px;
}

.display-inline{
    display:inline;
}

.display-flex{
    display:flex;
}

.float-center{
  clear:both;
  margin-left:auto;
  margin-right:auto;
}

.float-right{
  float:right;
}
.float-left{
    float:left;
}

.center{
  clear:both;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

.hidden{
    display:none;
}

.no-wrap{
  white-space:nowrap;
}
.black{
  color: #000000;
}
.black-border{
  border:black solid 1px;
}

.celticg{
  font-family: 'celticg', Georgia, serif;
}


.tab{/*fix for text blocks that require an indent */
  margin-left:15px;
}

.list-unstyled{
  list-style:none;
}

.red{
  color: #cc0000; 
}
.red-border{
  border: #cc0000 solid 1px; 
}
.redbg{
  background-color: #cc0000;
}
.white{
  color:#ffffff;
}
.white-border{
  border: white solid 1px;
}

.whitebg{
  background-color: #ffffff;
}

.transparentbg{
  background-color: transparent;
}


/*-------------------------------------------*/
/*element targets*/

body{
  background-image: url("https://www.dnddiceroller.com/assets/DnD_Starter_Art.jpg"); /* The image used */
  background-color: var(--bg-body, #000000); /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* only one image is displayed */
  background-attachment: fixed;
  background-size: cover; /* Resize the background image to cover the entire container */
  height: 100%;
  width: 100%;
  color: var(--text-primary, #000000);
}

#footer-wrapper{
  max-width:900px;
  margin-left: auto;
  margin-right: auto;
}

footer a:link {
  color: red;
}

footer a:visited {
  color: red;
}

footer a:hover {
  color: white;
}

footer a:active {
  color: white;
}

form{
  border-radius: 15px;
}
 
header{
  font-family: "celticg", Georgia, serif;
  background-color: transparent;
  border-bottom: 1px solid #cc0000;
}

img{
  /*object-fit: contain;*/
  max-width:100%;
}

hr{
  width:100%;
  border-top:darkgrey 1px solid;
  border-bottom:lightgrey 1px solid;
}

input[type=checkbox] {
  width: 16px;
  height: 16px;
  margin-right:2px;
  vertical-align: top;
}

input[type=number]{
  display:table-cell;
  padding-left:5px;
  background-color: var(--bg-input, #ffffff);
  color: var(--text-primary, #000000);
}

select{
  display:table-cell;
  background-color: var(--bg-input, #ffffff);
  color: var(--text-primary, #000000);
}

button{
    min-width:20px;
    font-weight: 900;
    border-radius: 15px;
}

button:hover{
    cursor: pointer;
}

button:active {
    transform: scale(0.99);
}

input:hover, select:hover{
    cursor: pointer;
    background-color: var(--bg-secondary, #eeeeee);
}

button:disabled{
   opacity:0;
   cursor: default;
}

p button {
  padding: 1px 3px 1px 3px;
  font-weight: 700;
  color: var(--text-primary, #000000);
  background-color: var(--bg-button, #efefde);
  border: var(--theme-primary, #cc0000) solid 2px;
}

table{
  display: inline-block;
  border-collapse:collapse;
}

th{
  height: 1.3em;
  font-family:'celticg';
  font-size:1.2em;
  padding:2px;
  border-bottom: #cc0000 1px solid;
}
    
td{
  margin:auto;
}

th:nth-child(3){
  width:100%;
  margin-left:auto;
  margin-right:auto;        
}

tr{
  display:flex;
  flex-direction: row;
}

/*-------------------------------------------*/
/*child selector targets*/

/*class targets*/


.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #FEFEFE;
}

.content{
  line-height: 2.0;
  max-width:90%;
  margin-left: auto;
  margin-right: auto;
  margin-top:10px;
  margin-bottom:10px;
  padding:5px;
  color: var(--text-primary, black);
  background-color: var(--bg-primary, #fefeee);
  border: var(--theme-primary, #cc0000) solid 2px;
  border-radius: 15px;
}

.content p{
  line-height: 30pt;
}

.content p > b{
  font-weight:900;
} 

.diceimage{
  height: 5em;
}

.division-line{
  width:100%;
  height:1px;
  border-top: black solid 1px;
}  

/*-------------------------------------------*/
/*id targets*/

#body-wrapper{
  position: relative;
  overflow-x: hidden;
}


/* ----------- basic CSS (for contact form) ----------- */
#contact-form{ 
  display:inline-flex;
  flex-direction:column; 
  color: var(--text-primary, black);
  padding-top: 20px;
  padding-bottom: 10px;
  width:550px;
  max-width:60%;
  margin-right:auto;
  margin-left:auto;
}

#contact-form p{
display:inline;
font-size:1.2em;
color:#cc0000;
font-weight:bold;
}

#contact-form label{
display:inline-block;
font-size:1.5em;
font-weight:bold;
text-align:center;
}

#contact-form input{
margin:5px;
padding:5px;
font-size:1.2em;
height:30px;
color: var(--text-primary, black);
background-color: var(--bg-input, #ffffff);
border:solid 2px var(--theme-primary, #CC0000);
  border-radius: 15px;
}

#contact-form input[type=submit], #contact-form input[type=reset]{ 
  display:inline;
  width:86px;
  color: var(--text-primary, black);
    background-color: var(--bg-button, #efefde);
    border: var(--theme-primary, #cc0000) solid 2px;
    border-radius: 15px;
  font-size:1.2em;
  font-weight:bold;
  margin:5px;
  padding:5px;
  height:50px;
}

#contact-form input[type=submit]:hover, #contact-form input[type=reset]:hover{ 
  background-color: var(--bg-secondary, #ffffff);
}

#contact-form select{
margin:5px;
padding:5px;
color: var(--text-primary, black);
  background-color: var(--bg-input, #ffffff);
  border: var(--theme-primary, #cc0000) solid 2px;
  border-radius: 15px;	
}

#contact-form textarea{
resize: none;
font-size:1.2em;
margin:5px;
padding:5px;
height: 270px;
color: var(--text-primary, black);
  background-color: var(--bg-input, #ffffff);
  border: var(--theme-primary, #cc0000) solid 2px;
  border-radius: 15px;
}

/* END CONTACT FORM CSS */


#copy-text{
  font-size: 0.9em;
}

.footer-banner{
  display: flex;
  justify-content: space-between;
  width:100%;
  font-size: 0.9em;
}

.footer-navigation{
  list-style: none;
  display:flex;
  flex-direction:row;
}

#footer-wrapper{
 color: var(--text-footer, white);
 width:100%;
 background-color: var(--bg-footer, #222222);
}

#hamburger{
 display:none;
}

#header-menu{
 display:flex;
 flex-direction:row;
 align-items: center;
 justify-content: space-evenly;
 flex-wrap: nowrap;
}

#header-menu li {
list-style:none;
 padding: 5px;
}

#header-menu a{
 cursor:pointer;
 text-align:center;
 text-decoration:none;
 font-family: "celticg";
 font-size:2em;
 font-weight: 500;
 -webkit-text-fill-color: var(--theme-primary-light, #ee0000);
 -webkit-text-stroke: #ffffff 1px;
}


#header-menu a:hover{
   background-image: radial-gradient(circle, rgba(255,255,255,1),rgba(255,255,255,0));
   border-radius: 5px;
   opacity: .85; /* Standard: FF gt 1.5, Opera, Safari, CSS3 */
   filter: alpha(opacity=85); /* IE lt 8 */
   -ms-filter: "alpha(opacity=85)"; /* IE 8 */
   -khtml-opacity: .85; /* Safari 1.x */
   -moz-opacity: .85; /* FF lt 1.5, Netscape */
}

#subtitle{
 font-family:"celticg", Georgia, serif;
 font-size: 0.96em;
 max-width:100%;
 word-wrap: none;
 margin-left:auto;
 margin-right:auto;
 white-space: nowrap;
 text-align:center;
 max-width:100%;
 margin-top: -5px;
}

#title{
 cursor:default;
 text-align: center;
 max-width:100%;
 font-stretch: 200%;
 font-size: 4.5em;
 font-weight: 500;
 margin-left:auto;
 margin-right:auto;
 word-wrap: none;
 white-space: nowrap;
 text-align:center;
 padding-top:5px;
 max-width: 100%;
 -webkit-text-fill-color: var(--theme-primary-light, #ee0000);
 -webkit-text-stroke: #ffffff 1px;
}

#title a{
 text-decoration: none;
}

.wizards-disclaimer{
 font-size: 0.65em;
}

/* WordPress-specific styling */

.site-wrapper {
    width:100%;
    max-width: 900px;
    margin: 0 auto;
}

.sidebar-module{
 display:flex;
 flex-direction:column;
 gap:4px;
}

.sidebar-module li{
  padding-top: 3px;
  padding-bottom: 3px;
}

.page-title{
  font-family: 'celticg', serif;
  font-size: 2.5em;
  font-stretch: 200%;
  font-weight:500;
  color: var(--theme-primary, #cc0000);
  margin-left:auto;
  margin-right:auto;
  padding:10px;
  text-align:center;  
  -webkit-text-fill-color: var(--theme-primary-light, #ee0000);
  -webkit-text-stroke: #FFFFFF 1px;
}

.blog-wrapper{
  display:flex;
  flex-direction:row;
  justify-content: space-evenly;
}

.blog-content{
  width:80%;
}


.blog-sidebar{
  width:20%
}

.sidebar-module h4{
    font-family:"celticg";
}

/* Blog-specific styling */

.entry-header {
    text-decoration:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-decoration:none;
    text-align:center;
    margin: 1em;
}

.entry-footer, .comments-link, .cat-links{
  display: none;
}

.entry-title {
    font-size: 1.8em;
    font-stretch: 200%;
    font-weight: 500;
    font-family: serif;
    text-align:center;
    color: var(--theme-primary-light, #ee0000);
    -webkit-text-fill-color: var(--theme-primary-light, #ee0000);
    -webkit-text-stroke: #000000 1px;
}

.entry-meta {
    color: var(--text-secondary, #666);
    font-size: 0.9em;
    margin-bottom: 1em;
}

.entry-content {
    background-color: var(--bg-tertiary, rgba(255, 255, 255, 0.85));
    padding: 2em;
    border-radius: 15px;
    margin-bottom: 2em;
}

.entry-content li{
  margin: 10px;
  margin-left:25px;
}

/* Widget areas */
.widget {
    background-color: var(--bg-tertiary, rgba(255, 255, 255, 0.85));
    padding: 1.5em;
    border-radius: 15px;
    margin-bottom: 2em;
}

.widget-title {
    font-family: 'celticg', serif;
    color: var(--theme-primary, #cc0000);
    margin-bottom: 1em;
}

/* Comments */
.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment {
  background-color: var(--bg-tertiary, rgba(255, 255, 255, 0.85));
  padding: 1.5em;
  border-radius: 15px;
  margin-bottom: 1em;
}

.comment-meta {
  color: var(--text-secondary, #666);
  font-size: 0.9em;
  margin-bottom: 1em;
}

/* Navigation */
.main-navigation {
    margin-bottom: 2em;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation li {
    display: inline-block;
    margin: 0.5em;
}

.main-navigation {
  position: relative;
}

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.nav-menu .menu-item {
      font-size: 1.7em;
      font-stretch: 200%;
      -webkit-text-fill-color: var(--theme-primary-light, #ee0000);
      -webkit-text-stroke: #ffffff 1px;
}

.nav-menu a {
  font-family: "celticg", Georgia, serif;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.nav-menu a:hover {
  background-image: radial-gradient(circle, rgba(255,255,255,1),rgba(255,255,255,0));
  border-radius: 5px;
  
  opacity: .85; /* Standard: FF gt 1.5, Opera, Safari, CSS3 */
  filter: alpha(opacity=85); /* IE lt 8 */
  -ms-filter: "alpha(opacity=85)"; /* IE 8 */
  -khtml-opacity: .85; /* Safari 1.x */
  -moz-opacity: .85; /* FF lt 1.5, Netscape */
}

/* Hamburger Menu */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.menu-toggle .bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  transition: all 0.3s ease-in-out;
  background-color: #ffffff;
}


/*-------------------------------------------------------------------------------------------------------------------------------------*/
/*at 900 + 320 px break side ads*/
@media screen and (max-width: 1220px){

}

@media screen and (max-width: 901px){

  #subtitle{
    font-size:1.75vw;
  }

  #title{
    font-size: 8.25vw;
  }

}


/*-------------------------------------------------------------------------------------------------------------------------------------*/
/*tablet and mobile landscape view) */
@media screen and (max-width: 640px) {

  body{
    background-image: url("https://www.dnddiceroller.com/assets/illo4.jpg");
  
    -webkit-background-position: top;
    -moz-background-position: top;
    -o-background-position: top;
    background-position: top;
  
    -webkit-background-attachment: fixed;
    -moz-background-attachment: fixed;
    -o-background-attachment: fixed;
    background-attachment: fixed;
  
    /*-webkit-background-size: 100%;
      -moz-background-size: 100%;
      -o-background-size: 100%;
      background-size: 100%; */
      
    -webkit-background-size: auto;
      -moz-background-size: auto;
      -o-background-size: auto;
      background-size: auto;
     
  }
  
  footer{
    justify-content: center;
    max-width:100%;
    padding-left: 5px;
    padding-right: 5px;
  }

  footer p{
   max-width: 96%;
  }


  .footer-banner{
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-evenly;
    align-items:center;
  }
  

  #contact-form{
   width:90%;
  }

  .site-header{
    background-color: black;
  }

  .content{
    max-width:90%;
  }
  

  .entry-content {
        padding: 1em;
  }
    
  .widget {
        padding: 1em;
  }

  .site-main{
    width:100%;
  }

  .site-wrapper{
    width:100%;
    min-width:100%;
    max-width:100%;
  }

  .blog-wrapper{
    flex-direction:column;
  }
  
  .blog-content, .blog-sidebar{
    width:100%;
  }

  .footer-navigation{
    padding-bottom:20px;
  }

  .footer-navigation{
    font-size:1.2em;
  }    

  #contact-form{
    max-width:80%;
  }

  #hamburger {
      display: block;
      cursor: pointer;       
  }

  #hamburger.active .bar:nth-child(2) {
          opacity: 0;
  }

  #hamburger.active .bar:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
  }

  #hamburger.active .bar:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
  }

  /* Footer widgets */
  #footer-widgets {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 2em;
  }

  
  #subtitle{
    margin-top: -2px;
  }
  
  #wizards-disclaimer{
    font-size: 0.85em;
  }

  .menu-toggle {
      display: block;
      position: relative; 
      margin-left: auto; 
      margin-right: auto;
      top: auto;          /* Remove top positioning */
      right: auto;        /* Remove right positioning */
      z-index: 1000;
  }

  .menu-toggle.active .bar:nth-child(2) {
      opacity: 0;
  }

  .menu-toggle.active .bar:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
  }

  .menu-toggle.active .bar:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
  }

  .nav-menu {
      position: absolute;
      left: -100%;
      top: 100%;  /* Position directly below the header */
      gap: 0;
      flex-direction: column;
      background-color: #000000;
      width: 100%;
      text-align: center;
      transition: 0.3s ease-in-out;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      padding: 20px 0;
 }

  .nav-menu.active {
      left: 0;
      z-index: 1000;
  }

  .nav-menu .menu-item {
      margin: 10px 0;
  }
}