:root {
    --dicepurple: #620094;
    --dicepink: #a80094;
}

nav {
    display: flexbox;
    text-align: center;
    margin: 0 auto;
}

li {
    display: inline-block;
    list-style-type: none;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;   
    font-size: 1.25em;
    font-weight: bold;
    color: var(--dicepink);
    padding: 0px 10px;
    margin: 0 auto;
}
body {
    display: flexbox;
    align-items: center;
    background-color: white;
}

@media screen and (min-width:1500px) {
    img.dm_left {
    display:block;
    position: fixed;
    top: 0px;
    left: 0px;
    content: url(/images/Dungeon_Master_Coral_Springs_FL_Ed_Casas_pointing_sword_up.jpg);
    height: 100%;
    width: auto;
    max-width: 30%;
    }
}

@media screen and (min-width:1500px) {
    img.dm_right {
    display:block;
    position: fixed;
    top: 0px;
    right: 0px;
    content: url(/images/Dungeon_Master_Coral_Springs_FL_Ed_Casas_pointing_sword_down.jpg);
    height: 100%;
    width: auto;
    max-width: 30%;
    }
}

img.logo {
    display: block;
    content: url(/images/Logo.svg);
    text-align: center;
    margin: 0 auto;
}

#logohome {
    min-width: 200px;
    max-width: 500px;
}


#logochild {
    max-width: 20%;
}


h1 {
    display: flexbox;
    color: var(--dicepurple);
    font-size: 2em;
    font-weight: bold;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;   
}

h2 {
    display: flexbox;
    color: var(--dicepink);
    font-size: 1.5em;
    font-weight: bold;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;   
}

h3 {
    display: flexbox;
    color: var(--dicepurple);
    font-size: 1.25em;
    font-weight: bold;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;   
}

button {
    color: yellow;
    display: flexbox;
    font-size: large;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;   
    border: 1px;
    border-color: rgb(52, 11, 80);
    border-style: solid;
    border-radius: 10%;
    justify-content: center;
    align-self: center;
    background-color: var(--dicepink)
}

p {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;    
}

#contactform {
    display: flexbox;
    text-align: center;
    margin: 0 auto;
}

div.schedule {
    display: block;
    text-align: center;
    border-color: black;
    border-style: solid;
    justify-self: center;
    align-items: center;
    text-align: center;
    max-width: 500px;
    margin: 10px auto;
    padding-bottom: 15px;
}

div.halloween {
    display: block;
    text-align: center;
    background-color: black;
    border-color: orange;
    border-style: solid;
    border-radius: 50%;
    justify-self: center;
    align-items: center;
    text-align: center;
    max-width: 500px;
    margin: 10px auto;
    padding-bottom: 15px;
}

h1.halloween {
    color: orange
}

button.halloween{
    color: black;
    display: flexbox;
    font-size: large;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;   
    border: 1px;
    border-color: yellow;
    border-style: solid;
    border-radius: 10%;
    justify-content: center;
    align-self: center;
    background-color: orange;
}

div.childpage {
    display: block;
    text-align: center;
    justify-self: center;
    align-items: center;
    text-align: center;
    max-width: 500px;
    margin: 10px auto;
}

div.photogallery {
    display: inline;
    text-align: center;
    justify-self: center;
    align-items: center;
    text-align: center;
    max-width: 500px;
    margin: 10px auto;
}

.photosm {
    max-width: 500px;
    border-style: solid;
    border-color: black;
    border-radius: 2px;
}

@media screen and (max-width:500px) {
    .photosm {
    max-width: 100%;
    }
}

footer {
    display: block;
    position: static;
    bottom: 0px;
    text-align: center;
    color: var(--dicepurple);
    max-width: 500px;
    margin: 0px auto;
}

div.gallery {
    border: 1px solid #ccc;
  }
  
  div.gallery:hover {
    border: 1px solid #777;
  }
  
  div.gallery img {
    width: 100%;
    height: auto;
  }
  
  div.desc {
    padding: 15px;
    text-align: center;
  }
  
  * {
    box-sizing: border-box;
  }
  
  .responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
  }
  
  @media only screen and (max-width: 300px) {
    .responsive {
      width: 100%;
    }
  }  
  
  @media only screen and (min-width: 301px) {
    .responsive {
      width: 49.99999%;
    }
  }
  
  @media only screen and (min-width: 600px) {
    .responsive {
      width: 33.33333%;
    }
  }

  @media only screen and (min-width: 900px) {
    .responsive {
      width: 24.9999%;
    }
  }

  @media only screen and (min-width: 1200px) {
    .responsive {
      width: 20%;
    }
  }

  @media only screen and (min-width: 1500px) {
    .responsive {
      width: 16.6666%;
    }
  }


  @media only screen and (min-width: 1800px) {
    .responsive {
      width: 14.2857%;
    }
  }

  @media only screen and (min-width: 2100px) {
    .responsive {
      width: 12.5%;
    }
  }


  @media only screen and (min-width: 2400px) {
    .responsive {
      width: 10%;
    }
  }
  
  .clearfix:after {
    content: "";
    display: table;
    clear: both;
  }