/********************************************************************************************/
/* SITE-WIDE */
    @font-face{
     font-family:'Dayrom';
     src: url('/style/fonts/DAYROM.ttf');
    }
    
    @font-face{
     font-family:'Chomsky';
     src: url('/style/fonts/Chomsky.otf');
    }
    

body {
        font-family: Dayrom;
        text-align: center;
        position: absolute;
        margin: 0;
        left: 20%;
        width: 60%;
        align-items: center;
        background-image: url("/img/background.jpg");
        padding-bottom: 3%;
}

h1, h3, h4, h5 {
        font-family: Chomsky;
        font-size: 250%;
}

h2, h3, h4, h5 {
        font-family: Chomsky;
        font-size: 150%;
}

hr {
        border: 1px solid rgb(10,10,10);
        width: 80%;
}

#content iframe {
        display: block;
}

#menu {
        padding-bottom: 1%;
        font-size: 125%;
}

#menu img {
        width: 100%;
}

#menulinks {
        padding: 0.5%;
        color: rgb(30,30,30);
        font-family: Chomsky;
        text-decoration: none;
        font-size: 200%;
}

#error {
        display: inline-block;
        margin-top: 25%;
}

#menulinks a {
        color: rgb(30,30,30);
        font-family: Chomsky;
        text-decoration: none;
}

#menulinks a:hover {
        color: rgb(90, 90, 90);
        text-decoration: underline;
        font-weight: bold;
        animation: big 0.3s forwards;
}

#showselection img {
        width: 50%;
}

#showselection img:hover {
        width: 53%;
        animation: imgbig 0.3s;
}

@keyframes big {
  from {font-size: 100%;}
  to {font-size: 110%;}
}

@keyframes imgbig {
  from {width: 50%;}
  to {width: 53%;}
}

subtext {
        font-size: 12px;
        font-style: italic;
}

ul, ol {
        list-style-position: inside;
}

/********************************************************************************************/
/* INDEX */

#indexmain {
        display: flex;
        margin-bottom: 1%;
        text-align: center;
}

#indexmain img {
  width: 100%;
}

#indexguestbook {
        height: 100%;
        padding: 2%;
        background-color: rgb(237,242,222);
        overflow-y: hidden;
}

#indexmainleft {
        float:left;
        width: 78%;
        padding: 2%;
        text-align: center;
        background-color: rgb(237,242,222);
        overflow-y: hidden;
}

#indexmaincenter {
        float:left;
        width: 23%;
        margin-left: 1%;
}

#indexmain2 {
        margin-bottom: 1%;
        padding: 4%;
        background-color: rgb(237,242,222);
        height: 700px;
        font-size: 100%;
        align-content: center;
}

#indexblogframe {
        overflow-y: scroll;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        height: 100%;
        width: 60%;
        float: left;
}

#indexblogframe iframe {
        border: none;
        width: 90%;
        height: 100%;
}

#indexupcomingframe {
        border: none;
        width: 39%;
        height: 100%;
        float: left;
}

#indexupcomingframe img {
        width: 75%;
}

#footer {
        background-color: #ADC18F;
        padding: 0.5%;
        padding-right: 5%;
        color: rgb(30,30,30);
}

#footer a {
        color: rgb(30,30,30);
}

#footer a:hover {
        color: rgb(150,150,150);
        text-decoration: underline;
        animation: big 0.3s forwards;
}


/********************************************************************************************/
/* MUSIC */

#musicmain {
        display: flex;
        background-color: rgba(237,242,222,0.6);
        margin-bottom: 1%;
        padding: 2%;
}

#musicmain img {
  width: 100%;
}

#musicleft {
        float:left;
        width: 47%;
        padding-left: 1%;
        padding-right: 1%;
        margin-right: 1%;
}

#musicright {
        float:left;
        width: 48%;
        padding-left: 1%;
        padding-right: 1%;
        text-align: left;
}
/********************************************************************************************/
/* MUSIC */

#photoleft {
        display: inline-block;
        width: 75%;
        margin-left: -25%;
}

#photomid {
        display: inline-block;
        width: 75%;
}

#photoright {
        display: inline-block;
        width: 75%;
        margin-left: 25%;
}



/********************************************************************************************/
/* CONTACT */

#contactmain {
        display: flex;
        background-image:  linear-gradient(#ccc 2px, transparent 2px), linear-gradient(45deg, #ccc 2px, transparent 2px), linear-gradient(#ccc 1px, transparent 1px), linear-gradient(45deg, #ccc 1px, #e5e5f7 1px);
        background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
        padding: 5%;
}

#contactmain a {
        background-color: rgba(0,0,0,0.6);
        padding: 1%;
        color: white;
}

#contactmain a:hover {
        background-color: rgba(0,0,0,0.8);
        padding: 1%;
        color: white;
}

contactleft {
    width: 60%;
    float:left;
    font-weight: bold;
    padding: 1%;
}

contactright {
    width: 60%;
    float:right;
    padding: 1%;
}

magicalmailinglist {
    color: red;
}
/********************************************************************************************/
/* PAST SHOWS PHOTO GALLERY I STOLE FROM W3SCHOOLS */

* {
  box-sizing: border-box;
}

div.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

div.gallery-item {
  margin: 5px;
  border: 1px solid #ccc;
  width: calc(25% - 20px);
}

div.gallery-item img {
  width: 100%;
}

div.gallery-item div.desc {
  padding: 15px;
  text-align: center;
}

@media only screen and (max-width: 999px) {
  div.gallery-item {
    width: calc(50% - 20px);
  }
}

@media only screen and (max-width: 700px) {div.gallery-item {width: calc(100% - 20px);  }}

/********************************************************************************************/
/* SHOWS */

/* SHOWSMAIN */
#showsmain {
        margin-bottom: 1%;
}



#showsmainleft {
        float:left;
        width: 98%;
        padding: 2%;
        text-align: center;
        color: black;
}

#showsmain2 {
        margin-bottom: 1%;
        padding: 4%;
}

/********************************************************************************************/
/* MOBILE VIEW */
@media only screen and (max-width: 999.99px){
  

  
  body {
        left: 1%;
        width: 98%;
        font-size: 125%
}

#menulinks a {
        font-size: 200%;
}

@keyframes big {
  from {font-size: 200%;}
  to {font-size: 225%;}
}
  
  #menu img {
        width: 100%;
}

  subtext {
        font-size: 12px;
        font-style: italic;
}

  #menulinks {
        font-size: 80%;
}


/* INDEX */
#indexmain {
        display: flex;
        margin-bottom: 1%;
        text-align: center;
}

#indexmain img {
  width: 100%;
}


/* MUSIC */

#musicleft, #musicright {
        float:left;
        width: 95%;
        padding-left: 2.5%;
        padding-right: 2.5%;
}

#showselection img {
        width: 75%;
}

@keyframes imgbig {
  from {width: 75%;}
  to {width: 78%;}
}

#showselection img:hover {
        width: 78%;
}

#photoleft {
        display: inline-block;
        width: 75%;
        margin-left: 0%;
}

#photomid {
        display: inline-block;
        width: 75%;
}

#photoright {
        display: inline-block;
        width: 75%;
        margin-left: 0%;
}
  
}