body{
  background-color: #fff5aa;
  opacity: 1;
  background-image:  repeating-linear-gradient(45deg, #ffc247 25%, transparent 25%, transparent 75%, #ffc247 75%, #ffc247), repeating-linear-gradient(45deg, #ffc247 25%, #fff5aa 25%, #fff5aa 75%, #ffc247 75%, #ffc247);
  background-position: 0 0, 24px 24px;
  background-size: 48px 48px;
  color:white;
  font-size:16px;
  font-family: opensans;
  max-width:1000px;
  margin-left: auto;
  margin-right: auto;
}

p{
    font-family:opensans;
    text-align:justify;
    line-height: 2;
}

/*-------Monty------*/
.sergal{
    width: 200px;
    height: 200px;
    background-color: #008080;
    color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
} 


h1, h2, h3{
  font-family: merriweather;
}

h1{
  margin:0px;
  font-size:50px;
}


/*-----Fonts-----*/
@font-face {
  font-family: opensans;
  src: url(https://www.pixelbombpop.com/fonts/OpenSans.ttf);
}

@font-face {
   font-family: merriweather;
   src: url(https://www.pixelbombpop.com/fonts/merriweather.ttf);
}

/*-------Header-------*/
.header{
  display:flex;
  justify-content:center;
  margin-top:10px;
  margin-bottom:10px;
}

/*-------Button------*/
.button{
  color:white;
  width:250px;
  font-size:20px;
  font-weight:bold;
  padding:10px;
  margin:5px;
  border:none;
  border-radius:50px;
  font-family:opensans;
  text-shadow: 0px 0px 5px black;
}

.button:hover{
}

.home{
  background-color:#ffc247;
  border:3px solid #e2880a;
}

.twitch{
  
  background-color:#9146FF;
  width:200px;
}

.youtube{
  background-color:red;
  width:200px;
}


/*-----Links----*/
a, a:active{
  color:#CD8B3F;
  text-decoration:none;
}

a:hover{
  color:red;
  text-decoration:none;
}


/*-------Content--------*/
.main{
  padding:20px;
  
}

section{
  background-color:#0c153b;
  margin-bottom:20px;
  padding:30px;
  border-radius:10px;
  border:2px solid red;
  box-shadow: 0px 0px 5px 1px red;
}

details{
  background-color:transparent;
  padding:10px;
  margin-top:20px;
  margin-right:20px;
}

details li{
  line-height:2;
}

/*-------Image Gallery-------*/
    .image-gallery {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      align-items: center;
      margin-top:20px;
    }
    
    .image-gallery img {
      width: 100px;
      height: 100px;
      object-fit: cover;
      border-radius: 5px;
      margin:5px;
      transition: 0.3s;
    }
    
    .image-gallery img:hover{
       opacity:1.0;
       transition: 0.3s;
       transform: scale(1.05);
    }
    
    .lightbox {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      z-index: 999;
      justify-content: center;
      align-items: center;
    }
    
    .lightbox-image {
      max-width: 90%;
      max-height: 90%;
      border-radius: 5px;
    }