:root {
     --dk-color:#2451ce;
     --mid-color:#56bd7800;
     --lt-color:#354ea0;
     --dkest-color:#5f4bce;
      --accent:#ff0000;
}
 html, body {
     margin:0;
     padding-top:25px;
     padding:0;
     height:100%;
     font-family: 'Cinzel', 'Jersey 25', 'Jacquard 24', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     font-weight: bold;
     font-size:15px;
     background-image:url('assets/purplestars.gif');
     background-repeat:repeat;
     color:var(--dk-color);
     padding:1px;
        
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}
body a {
  color:var(--accent);
  font-weight:bold;
  }
 #container {
     max-width:900px;
     margin:0 auto;
     margin-top:20px;
     height:100%;
     align-items: center;
     overflow: scroll;
    min-width: 400;
     
}
 h1, h3, h5 {
     color:var(--dk-color);
}
 h2, h4, h6 {
     color:var(--accent);
  }
 #header {
   
     max-width:700px;
     height:167px;
     margin-left:5px;
     margin-right:5px;
     margin:0 auto;
       margin-top: 10px;
     background-color: transparent;
 background-image: url(assets/kk1.png);
              border-width: 5px;
    border-style: solid;
    border-image: url('assets/border2.png') 9 fill round;

 }
 .title {
     font-size:35px;
     text-align:right;
     font-style:italic;
     color: #ffffff;
     padding-right: 3px;
}
 #wrapper {
     margin:0 auto;
     margin-top: 60px;
     max-width:1200px;
     background-image: url('assets/bluerosebg.gif');
     border-width: 34px;
     border-radius: 2px;
     border-style: solid;
     border-image: url('assets/border4.png') 11 fill round;
     background-color: transparent;
     background-clip:padding-box;
     padding:1px;
     overflow: auto;
   
  


    
}
.content {
  padding:10px;
 
  }

.box-one > .content{
  padding:4px;
  color: #ffffff;
}

.content > ul{
  margin-left: -20px;
  text-align: center;
}

.box-one > .content > img{
margin-left: 25px;
  height: 144px;
  width: 256px;
}
 #two-boxes {
     display:flex;
     flex-wrap:wrap;
     max-width:800px;
       
}


 .box-one, .box-two, .box-three, .box-four, .box-five, .box-six, .box-seven {
     border:1px solid var(--dkest-color);
     background-color:var(--lt-color);
     overflow:auto;
          border-width: 5px;
    border-style: solid;
    border-image: url('assets/border2.png') 9 fill round;
    background-image: url('assets/IMG-6827.jpg');

 
}

.box-eight{
 border:1px solid var(--dkest-color);
     background-color:var(--lt-color);
     overflow:auto;
          border-width: 5px;
    border-style: solid;
border-image: url('assets/laceborder.png') 6 fill round;
background-color: transparent;

}


 .box-one, .box-two {
     height:300px;
     width:330px;
     margin-left:10px;
     margin-right: 10px;
}
 .box-one {
     margin-top:10px;
     margin-right:10px;
     background-image: url('assets/IMG_3233.jpg');
}
 .box-two {
  width: 400px;
     margin-top:10px;
     margin-right: 10px;
     margin-left: 10px;
}
 .box-three {
     margin-left:10px;
     margin-top:10px;
     width:260px;
     height:326px;
}
 .box-four {
     margin-top:10px;
     margin-left:10px;
     width:350px;
     height:500px;
     
}

.box-four > .content{
  justify-items: center;
}
 .section-title {
  font-family: 'Jersey 25', Geneva, Tahoma, sans-serif;
     text-align:center;
     font-weight:bold;
     padding-top:5px;
     padding-bottom:5px;
     background-color:transparent;
     color:var(--dkest-color);
     font-size:15px;
     background-image: url('assets/bgbluetile.png');
}
 .nav-wrapper {
     display:flex;
     flex-wrap:wrap;
     width:400px;
     height:50px;
     margin:0 auto;
     justify-content:space-evenly;
     margin-top:5px;
}

 .nav-wrapper > img{
  margin-top:140px;
 }
 button {
     width:190px;
     height:35px;
     background-color:var(--mid-color);
     color:var(--dkest-color);
     font-weight:bold;
     border:none;
     margin-top:5px;
     margin-right:5px;
     padding-left: 1px;
     padding-right: 1px;
}
  button a {
    color:var(--accent);
    font-weight:bold;
  }
  p {
     padding:5px;
}
 p a {
  color:var(--dkest-color);
  font-weight:bold;
  text-decoration: none;
  }

 #footer {
     text-align:center;
     padding-top:5px;
     margin-bottom:5px;
     font-size: 12px;
     margin-top: 10x;


}
 #footer p {
     background-color:rgb(163, 155, 235);
     display:block;
     width:100px;
     height: 15px;
     margin:0 auto;
     margin-top:5px;
     margin-bottom:5px;
     padding:5px;
    border-width: 10px;
    border-style: solid;
    border-image: url('assets/border2.png') 9 fill round;
    background-clip: padding-box;
}

#footer a{
  color: #002fff;
}

textarea {
  background-color:var(--dkest-color);
  color:var(--lt-color);
  font-size:10px;
  }
 @media only screen and (max-width: 860px) {
     html, body {
         overflow:visible;
    }
    #header {
      width:97.6%;
    }
     #container {
         width:100%;
       

    }
     .box-one, .box-two, .box-three, .box-four, .box-five, .box-six, .box-seven, .box-eight {
         width:100%;
         

         
    }
    .box-two {
      order:1;
    }
    .box-one {
      order:2;
    }
     .box-three {
         width:98%;
         order:2;
    }
     .three-boxes {
         width:98%;
    }
     .two-boxes {
         width:100%;
    }
     .wrapper {
         width:100%;
    
    }
    .one-box{
      width: 100%;
    }
     .box-seven {
         width:98%;
         order:2;
    }
    .box-eight{
      width: 100%;
      order:2;
    }
}

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: 20px;
    scrollbar-color: #5682fc #a1a2f0;
   
    
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 20px;
  
  }

  *::-webkit-scrollbar-track {
    background: #ffffff;
   
  }

  *::-webkit-scrollbar-thumb {

    border-radius: 10px;
    border: 19px solid #ffffff;
  }
 /* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #1b3194; 
  
}

#lacetop{
background-image: url('assets/blueroseborder3.gif');
background-repeat: repeat-x;
width: 200vw;
height: 10vh;
position:fixed;
top: -2px;
z-index: 5;
}

#lacedividertop{
    display: flex;
    min-width: -webkit-fill-available;
    border-radius: 5px;
    height: 40px;
    align-items: center;
    gap: 7px;
    justify-content: space-between;
    align-content: center;
    background: url('assets/bluewhitelacediviers.gif');
    background-position: center;
   
    filter: var(--outline1);
}

#lacedividerbottom{
    display: flex;
    min-width: -webkit-fill-available;
    border-radius: 5px;
    height: 40px;
    align-items: center;
    gap: 7px;
    justify-content: space-between;
    align-content: center;
    background: url('assets/bluewhitelacediviers.gif');
    background-position: center;
    
    filter: var(--outline1);

}

a:link, a:visited, a:active { 
color:#6062e0;text-decoration:none;

}
a:hover {
color:#1d37c9;
}

 #topmenuwrapper {
    display: flex;
     margin:0 auto;
   
     max-width:600px;
     justify-items: center;
     border-width: 20px;
     border-radius: 2px;
     border-style: solid;
     border-image: url('assets/eyeball.gif');
     background-color: transparent;
     background-image: url('assets/IMG-7800.png');    
}

#topmenuitems{
  display: flex;
  justify-content: center;
  align-items: center;
  justify-items: center;
  overflow: auto;
}

#button1{
  background-color: transparent;
  background-image: url('assets/applesbg.gif');
  width: 101px;
  height: 50px;
}

.secondnavcontainer{
     display:flex;
     flex-wrap:wrap;
     height:200px;
     margin:0 auto;
     justify-content:center;
     align-items: c;
    margin-right:0px;
    margin-top: -210px;
    margin-bottom: 10px;
    order:2;
    width: 25%;
    z-index: 1;
    position:relative;
    top:-100px;
    left:-10px;
    min-width: 170px;
   

}
.sidenavigation{
  
   border:1px solid var(--dkest-color);
     background-color:var(--lt-color);
     overflow:auto;
          border-width: 5px;
    border-style: solid;
    border-image: url('assets/border2.png') 9 fill round;
    background-image: url('assets/IMG_3233.jpg');
   
     

   
}

.nav-wrapper2{
    display:flex;
     flex-wrap:nowrap;
     width:280px;
     height:300px;
     margin:0 auto;
     justify-content:center;
    


    
}

.section-title2{
    font-family: 'Jersey 25', Geneva, Tahoma, sans-serif;
     text-align:center;
     font-weight:bold;
     padding-top:5px;
     padding-bottom:5px;
     background-color:transparent;
     color:#aa0808;
     font-size:15px;
     background-image: url('assets/heartsbg.gif');
}


ul{
  list-style-type: none;
 margin-top:-10px;
}
.navwrapper2 > ul {
  list-style-image: url('assets/SC06.gif');
  margin-top: 1px;
  width: 200px;
  background-color: transparent;



  
 
  
}

li a {
  
  display: block;
  color: rgb(252, 20, 20);
  padding: 8px 16px;
  text-decoration: none;
  font-size: 18px;
  
}

li a.active {
  background-color: #04AA6D;
  color: white;
}

li a:hover:not(.active) {
  background-color: transparent;
  color: white;
}
#yttext{
  font-size: 20px;
  color:#3354c4;
}

/* Scroll Container Styling */
        .scroll-container {

          margin-left: 300px;
          margin-top: -160px;
          margin-bottom: 50px;
            width:  60%;
            overflow: hidden;
            white-space: nowrap;
            background-color: transparent; /* Optional: adds background for visibility */
        }

        .scroll-content {
          height: 11dvh;
            display: inline-block;
            white-space: nowrap;
            animation: scroll 30s linear infinite;
           
        }

        .scroll-content img {
            width: 99px;
            height: 56px;
            object-fit: cover;
            margin-right: 10px;
            display: flex;
            vertical-align: middle;
        }

        @keyframes scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }

        /* Duplicate content to create seamless loop */
        .scroll-content {
            width: max-content;
            
        }

        .scroll-content > * {
            display: inline-block;
        }





.updatedates{
  color:#8081ec;
  font-size: 13px;
  font-weight: bold;
}







#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 8; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

 #one-box {
     display:flex;
     flex-wrap:wrap;
     max-width:500px;
     position:relative;
 }

  .box-seven {
     margin-left:10px;
     margin-top:-165px;
     width:260px;
     height:326px;
     
}




  .box-eight {
    height:310px;
     width:135px;
     margin-left:60px;
     margin-right: 10px;
       margin-top: -200px;
     
}

.box-eight > .content{
  margin-left: 9px;
  
}
.section-title3{
font-family: 'Jersey 25', Geneva, Tahoma, sans-serif;
     text-align:center;
     font-weight:bold;
     padding-top:5px;
     padding-bottom:5px;
     background-color:transparent;
     color: var(--dkest-color);
     font-size:15px;
     background-image: url('assets/flowersribbons.gif');
}