*{
  margin: 0;
  padding: 0;
}

body{
  background: #020024;
  background: radial-gradient(circle,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 0, 0, 1) 100%);



}

.wrapper{
  max-inline-size: 1400px;
  margin-inline: auto;
  background-image: linear-gradient(184deg, #9a00d1 0%, #0f0d42 100%);
  z-index: -2;

}

.ShadowOverlay{
  position: relative;
  box-shadow: 0px -255px 123px 41px rgba(15,13,66,1) inset;
  z-index: 1;

}

.ShadowOverlay2{
  box-shadow: 0px -98px 123px -38px rgba(15,13,66,0.5) inset;
  z-index: 1;
  grid-column: 3;
  grid-row: 1;
}

.Book{
  display: grid;
  grid-template-columns: 30px 30px auto;
  grid-template-rows: auto;
}

.BookBindingOuter{
  grid-column: 1;
  grid-row: 1;
}

.BookBindingInner{
  display: grid;
  grid-column: 2;
  grid-row: 1;
}

.Binding{
  background: #000000;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(154, 0, 209, 0) 35%, rgba(14, 1, 11, 0.6) 49%, rgba(0, 0, 0, 0.6) 64%, rgba(154, 0, 209, 0) 82%);
  z-index: 2;
  grid-column: 1/2 span;
  grid-row: 1;
}

.Cover{
  display: grid;
  grid-column: 3;
  grid-row: 1;

}

.OuterBorder{
  display: grid;
  padding: 20px;
  border: 5px ridge goldenrod;


}

.InnerBorder{
  display: grid;
  padding: 20px;
  border: 5px ridge goldenrod;

  box-shadow: 1px 1px 20px 4px rgba(0,0,0,0.41) , 1px 1px 20px 4px rgba(0,0,0,0.41) inset;
  -webkit-box-shadow: 1px 1px 20px 4px rgba(0,0,0,0.41) , 1px 1px 20px 4px rgba(0,0,0,0.41) inset;
  -moz-box-shadow: 1px 1px 20px 4px rgba(0,0,0,0.41) , 1px 1px 20px 4px rgba(0,0,0,0.41) inset;
}


.CornerPieces{
  display: grid;
  grid-template-columns: 100px auto 100px;;
  grid-template-rows: auto auto auto auto auto;

}

.Corner1, .Corner2, .Corner3, .Corner4 img{
}


.Corner1{
  height: 100px;
  grid-column: 3;
  grid-row: 1;
}

.Corner2{
  height: 100px;
  grid-column: 1;
  grid-row: 1;
  transform: rotate(270deg);

}

.Corner3{
  height: 100px;
  grid-column: 1;
  grid-row: 5;
  transform: rotate(180deg);

}

.Corner4{
  height: 100px;
  grid-column: 3;
  grid-row: 5;
  transform: rotate(90deg);
}


.open-sidebar-button{
  position: fixed;
  display: none;
  border: none;
  padding: 1em;
  z-index: 8;
  cursor: pointer;
  text-align: start;
}
#close-sidebar-button{
  display: none;
  background: none;
  border: none;
  padding: 1em;
  cursor: pointer;

}


#navbar{

  grid-row: 2;
  grid-column: 2;
  min(700px, 1108px);
  place-items: center;
  z-index: 10;

}

nav ul{
  font-size: 20px;
  list-style: none;
  box-shadow: 3px 3px  5px rgba(20, 71, 11, 0.8) ;
  width: auto;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  box-sizing: content-box;
  border: 5px ridge goldenrod;



}


nav li{
  padding: 30px;
  text-align: center;
}

nav img{
  width: 100px;
  transition: 1s;
}

nav a{
  color: white;
  transition: 1s;
}

nav a:link{
  text-decoration: none;
}

nav a:visited{
  text-decoration: none;
}

nav a:hover{

}

nav image:hover{


}


widgetbot{
  max-width: 100%;
  height: auto;

}





.MainGridBox{
  display: grid;
  gap: 1.5em;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto auto;
  min-height: 1000px;
  justify-items: center;
  align-items: center;
  grid-column: 1/3 span;
  grid-row: 3;


}


.PortalBox{
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  max-height: 512px;
  max-width: 512px;
  justify-self: center;
  align-self: center;
  justify-content: center;
  align-content: center;
  grid-row: 1;
  grid-column: 1;
}


.PortalLogo{
  grid-column: 1;
  grid-row: 1;
  filter: drop-shadow(0px 0px 100px  white);
  animation: rotation 35s infinite linear;

}

@keyframes rotation {

  from{
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }

}



.innerPortalBox{
  display: grid;
  grid-template-columns: 100px;
  grid-template-rows: 100px;
  justify-content: center;
  align-content: center;
  grid-column: 1;
  grid-row: 1;
}

.PortalHeading{
 grid-column: 1;
 grid-row: 1;
 z-index: 5;
 justify-self: center;
 align-self: center;
 font-size: 50px;
 color: aliceblue;
  white-space: nowrap;
}


/*
.PaperOverlay{
  display: grid;
  box-shadow: inset 0 0 20px 10px rgba(0,0,0,0.9);
  border-width: 0;
  border-style: solid;
  border-image-source: linear-gradient(rgba(219 193 73 / 0.47), rgba(219 193 73 / 0.47));
  border-image-slice: 1 fill;
  grid-column: 1;
  grid-row: 2;

z-index: 10;
}
*/


.WeclomeBox{


  display: grid;
  font-size: 30px;
  line-height: 2.0;
  color: white;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  grid-column: 1;
  grid-row: 2;
  place-self: center;
  place-items: center;
  min-height: 400px;
}

.TableImage{
  grid-column: 1;
  grid-row: 1;
}

.TableImage img{
  max-width: 100%;
  height: auto;
}

.WelcomeText {
  padding-top: 100px;
  padding-bottom: 100px;
  grid-column: 1;
  grid-row: 2;
  text-align: center;
}


.MainEventBox{
  display: grid;
  gap: 1.5em;
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-column: 1;
  grid-row: 3;
  color: white;
  max-width: 1108px;
}

.EventsBox, .EventsBox2, .EventsBox3{

  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  gap: 1.5rem;
  display: grid;
  color: white;
  border: solid goldenrod;
  max-width: 1108px;
}


.EventImage{
  grid-column: 1;
  grid-row: 1/2 span;
  height: 300px;
  width: 100%;
  background: #020024;
  color: #020024;

 }

.EventsHeading{
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}

.EventsText{
  grid-column: 2;
  grid-row: 2;
  line-height: 2;
  align-self: end;
  text-align: left;
  padding-right: 20px;
  padding-bottom: 50px;
}

.ContactBox{
  color: white;
  grid-column: 1;
  grid-row: 2;
}

.ContactBox h3{
  text-align: center;
  font-size: 36px;
  padding-bottom: 30px;
}


.AboutBox{
  display: grid;
  gap: 1.5em;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 50px 550px;
  grid-column: 1;
  grid-row: 3;
  color: white;
  border: solid goldenrod;
  max-width: 1108px;
  min-height: 600px;
}

.AboutImage{
  grid-column: 1;
  grid-row: 1/2 span;
  width: 100%;
  background: #020024;
  color: #020024;

}

.AboutHeading{
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}

.AboutText{
  grid-column: 2;
  grid-row: 2;
  line-height: 3;
  align-self: center;
  text-align: left;
  padding-right: 20px;
  padding-bottom: 50px;

}






.FooterBox{
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto;
  gap: 1.5em;
  min-height: 350px;
  color: white;
  grid-column: 1;
  grid-row: 4;
  place-items: center;
}

.Contact{
  grid-column: 1;
  grid-row: 1;
}

.HoursBox{
  align-self: end;
  width: auto;
  grid-column: 2;
  grid-row: 1;
  max-height: 250px;
  min-height: 250px;

}


.HoursBox ul{
  list-style: none;
  color: white;
  line-height: 2;
}


.Information{
  grid-column: 3;
  grid-row: 1;
}

.Information a:visited & link{
  list-style: none;
}


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


  .MainEventBox{

  }

  .FooterBox{
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
    min-height: 650px;
    grid-column: 1;
    grid-row: 4;
  }


  .Contact{
    grid-column: 1;
    grid-row: 1;
  }
  .HoursBox{
    grid-column: 1;
    grid-row: 2;
  }
  .Information{
    grid-column: 1;
    grid-row: 3;
  }

  .EventsBox{

  }

  #navbar img{
    width: 70px;
  }





  .AboutText{
    font-size: 14px;
  }



  #close-sidebar-button{
    display: none;
    background: none;
    border: none;
    padding: 1em;
    cursor: pointer;

  }


  #OverlaySideBar{
    height: 200vh;
    background: rgba(0,0,0, 0.5);
    position: fixed;
    inset: 0;
    z-index: 9;
    display: none;
  }

}


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


  #open-sidebar-button, #close-sidebar-button{
    display: block;
  }

  .Book{
    display: grid;
    grid-template-columns: 10px 10px auto ;
    grid-template-rows: 132px auto;
  }





  .ShadowOverlay2{
    grid-row: 2;
    grid-column: 3;
  }

  .Binding{
    grid-row: 2;
  }

  .Cover{
    grid-row: 2;
  }




  .open-sidebar-button{
    height: 100px;
    grid-row: 1;
    grid-column: 1/3 span;
    visibility: visible;
    display: block;
    background: #020024;
    background: radial-gradient(circle,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 0, 0, 1) 100%);


  }

  .open-sidebar-button button{
    cursor: pointer;
    fill: white;
    background-color: rgba(194,183,164,0);
    border: none;
  }


  .PortalBox{

  }

  .PortalBox img{
    height: 200px;
    width: 100%;
  }

  .CornerPieces{
    display: grid;
    grid-template-columns: 50px auto 50px;;
    grid-template-rows: auto auto auto auto auto;

  }

  .Corner1, .Corner2, .Corner3, .Corner4{
    height: 50px;
  }

  nav{
    position: fixed;
    top: 0;
    left: -100%;
    height: 100vh;
    width: min( 15em, 100%);
    z-index: 10;
    transition: 0.4s ease-out;
    background: #9a00d1;
    border: 5px ridge goldenrod;


  }

  nav.show{
    left: 0;
  }

  nav.show ~ #OverlaySideBar{
    display: block;
  }

  nav ul{
    width: min(9.5em, 100%);
    flex-direction: column;
    height: 100vh;
    align-items: start;
    justify-content: start;
    border: none;
    box-shadow: none;
    row-gap: 40px;
  }

  nav a{
    width: min(5em, 100%);
    padding-right: 2.5em;
  }


  .AboutBox{
    grid-template-columns: auto auto auto;
    grid-template-rows: auto;

  }

  .AboutHeading{
    grid-row: 1;
    grid-column: 1;
  }

  .AboutImage{
    max-width: 100%;
    height: auto;
    grid-row: 2;
    grid-column: 1;
  }


  .AboutText{
    grid-row: 3;
    grid-column: 1;
    font-size: 12px;
  }


}

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

  .EventsBox, .EventsBox2, .EventsBox3{

    grid-template-columns: auto auto auto;
    grid-template-rows: auto;
    gap: 0;
    display: grid;
    color: white;
    border: solid goldenrod;
    max-width: 1108px;

  }




  .EventImage{
    grid-column: 1;
    grid-row: 2;
    place-self: center;

  }

  .EventsHeading{
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .EventsText{
    grid-column: 1;
    grid-row: 3;
    line-height: 2;
  }

}