*{
    font-family: 'Cormorant Unicase', serif;  }

.header.active {
   background-color: rgb(0.8, 0.8, 0.8);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 6;
 
   height:100px;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   white-space: nowrap;
   position: fixed;
   transition: all 0.3s;
   

}

.button {
    background-color: #111827;
    border: 1px solid transparent;
    border-radius: .75rem;
    box-sizing: border-box;
    color: #FFFFFF !important;
    cursor: pointer;
    
    
    line-height: 1.5rem;
    padding: .75rem 1.2rem;
    text-align: center;
    text-decoration: none #6B7280 solid;
    
    transition-duration: .2s;
    transition-property: background-color,border-color,color,fill,stroke;
    transition-timing-function: cubic-bezier(.4, 0, 0.2, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    font-size: 24pt;
    z-index: 6;
    position: relative;
    
    height: 60px;
    width: 400px;
    left: 115px;
    top: 320px;
    font-weight: bold;
  }
  
  .button:hover {
    background-color: #374151;
  }
  
  .button :focus {
    box-shadow: none;
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
  
  

.html, body {
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
}


.container{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100vh 600px 800px 800px 800px 800px 500px;
   
    
}
.bgimage{
    background: url("images/IMG_0645.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    height: 100vh;
    width: 100vw;
    top:0;
    left: 0;
    z-index: 1;
}
.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 4;
    background-color: rgba(8, 8, 8, 0.9);
    height:100px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    white-space: nowrap;
    position: fixed;
    transition: all 0.5s;


  }
  .shade{
   
background-color: rgba(8, 8, 8, 0.9);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: 3;
display: grid;
grid-column: 1 / 4;
grid-row: 2 / 8;

  }
  .title1{
    color: wheat;
grid-column: 1 / 3;
margin-top: 20px;
margin-left: 20px;;
font-size: 50px;
white-space: nowrap;
  }
  
  a:link {
    text-decoration: none;
    color: wheat;
}

a:visited {
    text-decoration: none;
    color: wheat;
}

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

a:active {
    text-decoration: none;
    color: wheat;
}

.box3{
    z-index: 5;
    display:grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: 150px 1600px 150px 300px;
    grid-column: 2 / 3;
    grid-row: 2 / 3;

  
}
.title4{
    display: grid;
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    color: wheat;
    text-align: center;
    font-size: 28pt;
    position: relative;
    bottom: 100px;
}
.title2{
    color: wheat;
display: grid;
grid-column: 2 / 3;
grid-row: 1 / 2;
font-size: 36pt;
white-space: nowrap;

text-align: center;
}
.p1{
color: wheat;
display: grid;
grid-column: 1 / 4;
grid-row: 2 / 3;
text-align: center;
word-spacing: 5px;
letter-spacing: 2px;
position: relative;
top: 140px;
font-size: 16pt;
}
.p12
{
    color: wheat;
    display: grid;
    text-align: center;
    word-spacing: 5px;
    letter-spacing: 2px;   
    grid-column: 1 / 4;
    grid-row: 2 / 3;
    font-size: 16pt;
}
.box4{
    display: grid;
    grid-column: 1 / 4;
    grid-row: 3 / 7;
    grid-template-rows: 400px 400px 400px 400px 400px;
    grid-template-columns: 1fr 1fr 1fr;
    z-index: 5;
   margin-left: 10%;
   margin-right: 10%;
    margin-top: 200px;
    position: relative;
    top: 650px;
}
.title3{
    display: grid;
    color: wheat;
    grid-column: 2 / 3;
    grid-row: 4 / 5;
text-align: center;
font-size: 36pt;
position: relative;
bottom: 600px;

}
.subtitle1{
    color: wheat;
    font-size: 22pt;
    display: grid;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    text-align: center;
}


.name1{
    display: grid;
    color: wheat;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    text-align: center;
    font-size: 18pt;
    white-space: nowrap;
    position: relative;
bottom: 30px;
}
.p2{
    display: grid;
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    text-align: center;
    color: wheat;
    align-self: center;
   
position: relative;
bottom: 50px;
font-size: 16pt;

}




.pic1 {
    display: grid;
    grid-row: 1 / 2;
    grid-column: 1 / 2;

   width: 200px;
   
   align-self: center;
   position: relative;
   left: 150px;
   bottom: 30px;
}

  

.pic2 {
    display: grid;
    grid-row: 2 / 3;
    grid-column: 1 / 2;

  
   width: 200px;
   position: relative;
 top: 80px;
   left: 150px;
 
}
.subtitle2{
    color: wheat;
    font-size: 22pt;
    display: grid;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    text-align: center;
}
.name2{
    display: grid;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    color: wheat;
    z-index: 6;
    text-align: center;
    font-size: 18pt;
position: relative;
bottom: 30px;

}

.p3{
    display: grid;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    color: wheat;
    z-index: 6;
    text-align: center;
    position: relative;
    font-size: 16pt;
    top: 60px;
}

.pic3{

        display: grid;
        grid-row: 3 / 4;
        grid-column: 1 / 2;
      
       width: 200px;
 position: relative;
   left: 150px;
   top: 80px;
    
}
.subtitle3{
    display: grid;
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    text-align: center;
    color: wheat;
    font-size: 22pt;
}
.name3{
    display: grid;
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    color: wheat;
    z-index: 6;
    text-align: center;
    font-size: 18pt;
position: relative;
bottom: 30px;
}

.p4{
    display: grid;
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    color: wheat;
    z-index: 6;
    text-align: center;
    position: relative;
    font-size: 16pt;
    top: 50px;
}



.pic4{

    display: grid;
    grid-row: 4 / 5;
    grid-column: 1 / 2;
  
   width: 200px;
position: relative;
   left: 150px;
   top: 115px;
}
.subtitle4{
    display: grid;
    grid-column: 1 / 2;
    grid-row: 4 / 5;
    text-align: center;
    color: wheat;
    font-size: 22pt;
    position: relative;

}
.name4{
    display: grid;
    grid-column: 1 / 2;
    grid-row: 4 / 5;
    color: wheat;
    z-index: 6;
    text-align: center;
    font-size: 18pt;
position: relative;
bottom: 30px;
}

.p5{
    display: grid;
    grid-column: 2 / 3;
    grid-row: 4 / 5;
    color: wheat;
    z-index: 6;
    text-align: center;
    font-size: 16pt;
    position: relative;
   top: 100px;
}

.subtitle5 {
    display: grid;
    color: wheat;
    grid-column: 1 / 2;
    grid-row: 5 / 6;
    text-align: center;
    font-size: 22pt;
}
.p7 {
    display: grid;
    grid-column: 2 / 3;
    grid-row: 5 / 6;
    color: wheat;
    z-index: 6;
    text-align: center;
    font-size: 16pt;
    position: relative;
    top: 60px;
   
}
.name5 {
    display: grid;
    grid-column: 1 / 2;
    grid-row: 5 / 6;
    color: wheat;
    z-index: 6;
    text-align: center;
    font-size: 18pt;
position: relative;
bottom: 30px;
}
.pic5 {
    display: grid;
    grid-row: 5 / 6;
    grid-column: 1 / 2;

   width: 200px;
   
   align-self: center;
   position: relative;
   left: 150px;
  top: 20px;
}
.p6
{
    display: grid;
    grid-column: 2 / 3;
    grid-row: 5 / 6;
    color: wheat;
    z-index: 6;
    text-align: center;
    font-size: 16pt;
    position: relative;
    bottom: 450px;
  
}

.box2{
    display: grid;
    grid-column: 2 / 3;
    grid-template-rows: 1fr 1fr 1fr 1fr;
}
.maintitle {
    
    z-index: 3;
   position: absolute;
    top: 150px;
    right: 900px;
    font-size: 100pt;
    color: rgb(247, 235, 213);
 text-shadow: 3px 3px black;

 font-family: 'Abril Fatface';
}
.maintitle2{
    z-index: 3;
 
    position: absolute;
    top: 300px;
    right: 850px;
    font-size: 65pt;
    color: rgb(247, 235, 213);
 text-shadow: 3px 3px black;

 font-family: 'Abril Fatface';
}
.maintitle3{
    z-index: 3;
   
    position: absolute;
    top: 330px;
    right: 650px;
    font-size: 100pt;
    color: rgb(247, 235, 213);
 text-shadow: 3px 3px black;

 font-family: 'Abril Fatface';
}
.f1{
    position: relative;
    width: 100%;
    z-index: 4;
    background-color:rgb(0.8, 0.8, 0.8);
    height:200px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    white-space: nowrap;
}

.line1 {
    display: grid;
    grid-row: 1 / 5;
    grid-column: 1 / 4;
    height: 1px;
    width: 100%;
    background-color: wheat;
    position: relative;
    top: 120px;
}

.line2 {
    display: grid;
    grid-row: 2 / 3;
    grid-column: 1 / 4;
    height: 1px;
    width: 100%;
    background-color: wheat;
    position: relative;
    top: 1260px; 
}

.l1 {
    width: 50px;
    position: absolute;
    top: 260px;
    right: 800px;
    z-index: 8;
}
.l2 {
    width: 50px;
    position: absolute;
    top: 260px;
    right: 680px;
    z-index: 8;
}
.l3 {
    width: 50px;
    position: absolute;
    top: 600px;
    right: 680px;
    z-index: 8;
}
.l4 {
    width: 50px;
    position: absolute;
    top: 600px;
    right: 800px;
    z-index: 8;
}
.l5 {
    width: 50px;
    position: absolute;
    top: 1015px;
    right: 800px;
    z-index: 8;
}
.l6 {
    width: 50px;
    position: absolute;
    top: 1015px;
    right: 680px;
    z-index: 8;
}
.l7 {
    width: 50px;
    position: absolute;
    top: 1465px;
    right: 680px;
    z-index: 8;
}
.l8 {
    width: 50px;
    position: absolute;
    top: 1465px;
    right: 800px;
    z-index: 8;
}
.l9 {
    width: 50px;
    position: absolute;
    top: 1905px;
    right: 680px;
    z-index: 8;
}
.l10 {
    width: 50px;
    position: absolute;
    top: 1905px;
    right: 800px;
    z-index: 8;
}