@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* {
   /* outline: solid 3px; */
   box-sizing: border-box;
   margin: 0%;
}

nav {
    display: flex;
    justify-content: space-evenly;
    background-color: #272727;
    width: 100%;
    padding: 1em;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25em;
}

nav a {
    color: white;
    text-decoration: none;
}

html {
    scroll-behavior: smooth;
  }
    
body {
    display: block;
    margin: 0%;
    background: #1B2631;
    color: white;
    font-family: 'Roboto', sans-serif;
}

.logo {
    display: block;
    width: 40%;
    margin: auto; 
    padding: 4%;  
}
header {
    margin-bottom: 5%;
}
main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, 300px);
    column-gap: 5%;
}

h1 {
    margin: 0%;
    font-family: 'Bebas Neue', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 120px;
    letter-spacing: 0.02em;
    line-height: 144px;
    text-align: center;
}

h2 {
    padding: 10px;
    font-weight: 700;
    font-size: 4rem;
}

h3 {
    padding: 10px;
    color: rgba(146, 43, 33, 1);
    font-size: 1.5rem;
}

p {
    padding: 10px;
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1.4em;  
}

.bio {
    line-height: 1.5em;
    font-size: 1.6rem;
    margin-bottom: 5%;
}

.warning {
    font-size: 1em;
    line-height: .25rem;
    margin-bottom: 2%;
}

ul {
    padding: 0;
}

li {
    line-height: .25em;
    margin-bottom: 3%;
    list-style-type: none;
}

li.em {
    margin-left: 1%;
    background-image: url("../links/email copy.png");
    background-repeat: no-repeat;
    padding-left: 7%;
 }

 li.fb {
    margin-left: 1%;
    background-image: url("../links/facebook copy.png");
    background-repeat: no-repeat;
    padding-left: 7%;
 }


a {
    color: rgba(146, 43, 33, 1) ;
}

a:hover {
    color:#C4C4C4;
}

#event_info, #form, #ticketing, #contact, #gallery {
    color: white;
}

legend {
color: white;
font-size: 1.25rem;
}

fieldset {
    margin-left: 2%;
    border: 3px solid white;
}

form {
   padding: 10px;
}

.submit {
    color: rgba(146, 43, 33, 1);
    font-weight: bolder;
}
.submit:hover {
    color: #272727;
}


div.Event {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 5;
    justify-self: start;
}

div.Form {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    justify-self: start;
}

div.Ticketing {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
    justify-self: start;
}

div.Contact {
    width:100%;
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
    justify-self: start;
}

div.Gallery {
    grid-column-start: 1;
    grid-column-end: two;
    grid-row-start: row5-start;
    grid-row-end: 5;
}
.Gallery {
    margin-left: 10px;


}
.photos img {

    width: 400px;
}
.photos {
    margin-top: 15px;
    margin-bottom: 55px;
    display: grid;
    grid-template-columns: repeat(3, 400px);
    grid-template-rows: repeat(2, 270px);
    row-gap: 25px;
    column-gap: 25px;
}

.one {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
}

.two {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}

.three {
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}
.four {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
}

.five {
    grid-column: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
}

footer {
    position: relative;
    bottom: 0;
    background-color:#272727;
}

footer p {
    font-size: .75rem;
    padding: 1%;
    line-height: .25em;
}

footer a {
    width: 20%;
    color: white;
}
@media only screen and (max-width: 1205px) {

    .logo {
        display: block;
        width: 50%;
        margin: auto; 
        padding: 4%;  
    }
  .Event {
       max-height: 95%;
       overflow-y: scroll;
     padding: 0;
  }

::-webkit-scrollbar {
    width: 7px;
  }

  ::-webkit-scrollbar-track {
    background: white; 
  }
  
  ::-webkit-scrollbar-thumb {
    background: #888; 
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(146, 43, 33, 1); 
  }

  .photos {
    display: block;
    text-align: center;
    
}

   .photos img {
    display: block;
    margin: auto;
    padding: 2%;
    width: 65%;
}

video {
    display: block;
    margin: auto;
    width: 90%;
}

.Gallery p {
   text-align: center;
}

}


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

    h1 {
        font-size: 90px;
        
    }

#event_info, #form, #ticketing, #contact, #gallery {
    text-decoration: underline;
}
   main { display: flex;
        flex-flow: row wrap;
    }

    .bio {
        margin-bottom: 2%;
    }

    li {
        margin-bottom: 1%;
    }

    .Event, .Form, .Ticketing, .Contact {
        margin-bottom: 7%;
    } 

    .Form {
        width: 70%;
    }

    .video {
        display: flex;
        flex-flow: row wrap;
    }

    .Event {
        width: 100%;
        overflow: visible;
   }

footer {
    display: flex;
    flex-flow: row wrap;
}

footer p {
    line-height: 1.5em;
}

  }


/**
 * Correct `block` display not defined in IE 8/9.
 */

/* article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
} */

/* Removes padding from the width calculation of your elements */
/* html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
} */

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
/* .cf:before,
.cf:after {
    content: " "; /* 1 */
    /* display: table; /* 2 */
/* } */

/* .cf:after {
    clear: both;
} */

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
/* .cf {
    *zoom: 1;
} */

/* WRITE YOUR STYLES BEGINNING HERE---------------------------- */