body {
    color: white;
    background-color: black;
    background-image: url("Untitled_Artwork\ 26.png");
    background-size: cover;
    width: 100%;
    overflow-x: hidden;
    position: relative;
    display:block;
}



@font-face {
    font-family: anonymousproregular;
    src: url("Anonymous_Pro/AnonymousPro-Regular.ttf");
  }
@font-face {
    font-family: monofettregular;
    src: url("Monofett/Monofett-Regular.ttf");
  }

@font-face {
    font-family: handpixel;
    src: url(rdjhandpixel.otf);
}
  


.tupperware{
    display:flex;
    position: relative;
    margin-left:auto;
    margin-right:auto;
    width: 100%;
    flex-direction: column;
    align-items: center;
}


.welcome{
    display:flex;
    justify-content: center;
}

.marquee {
    width: 1270px;
    background: black;

    margin-top: 10px;
    z-index: 2;
}
.navbar{
   
    height: 20px ; 
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-around;
    padding: 0;
    z-index: 2;
    border: 4px outset white; 
    margin-left: auto;
    margin-right: auto;
    position: relative;
    max-width: fit-content;

}

.navbar + .navbar {
    z-index: 1;
 
    padding-top: 60px;
}
.navbar ul {
    display: flex;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
    width: fit-content;
    
}

.navbar li {
    display: inline-block;
    list-style: none;
    /*margin-right: 90px;*/
    padding-left: 80px;
    padding-right: 80px;
    
}

/*.container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    position: absolute;
    display: inline-block;
    width: 1250px;
}*/

.sparkles{
    float:left;
    position:absolute;
    z-index: 2;
}



.clouds {
    float: right;
    position: absolute;
    z-index: 0;
    top: 1px;

}


.spraiggif {
    background-image: url(spraiggif.gif);
    background-repeat: no-repeat;
    background-position: center 40%;
    background-size: 500px 250px;
    display: flex;
    justify-content: center;
    height: 60px;
    width:500px;
    margin-top: 4%;
    transform: rotate(4deg);
    margin-right: auto;
    margin-left: auto;
}
.pp {
    display: flex;
    justify-content: space-between;
}


.container{
    display: grid;
    grid-template-columns: 180px 648px 180px;
    grid-template-rows: 400px 144px auto auto;
  
    grid-gap: 5px;
    margin-left: auto;
    margin-right: auto;
    width: 1016px; 
    margin-top: 30px;
    border: 2px ridge #fbfcfc;
    
    padding: 10px;
    height: 1000px;
    
    /* background-color:rgba(109, 131, 227, 0.3) ;
   background-blend-mode: hard-light; */
    
   background-color: black; 
}

.resources {
    display: flex;
    flex-direction: column;
    
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    width: 900px; 
    margin-top: 30px;
    border: 2px ridge #fbfcfc;
    
    padding: 10px;
    height: 1000px;
    
    /* background-color:rgba(109, 131, 227, 0.3) ;
   background-blend-mode: hard-light; */
    
   background-color: black; 
}


.invisiblewrapper{
    display:flex;
    flex-direction: column;
    align-items:center;
    width: 700px;
}



/* contents of container---------------------------*/

#stupidbox {
    
    margin-left: auto;
    margin-right: auto;
    border: 4px ridge #a2b1fb;
    border-radius: 5px;
    display: grid;
    grid-column: 2/3;
    grid-row: 1/2;

}
.leftcontainer {
    /*float: left; */
    
    height: 100%;
   
   
     
     /* added this to test out */
     width: 180px;
    display: block;
     grid-column: 1; 
     grid-row: 1/3;
     border: 4px ridge #a2b1fb;
     box-sizing: border-box;
     background-image: url(citylights.gif);
     background-position: bottom;
  background-repeat:repeat-x;
   background-size: 65%;


}

.box1 {
    /*margin-right: 2%; */
  /*  margin-left: 2%; */
    padding: 10px;
    border: 2px ridge #a2b1fb;
    width: 175px;
    height: fit-content;
    background-image: url(darkwebcoreoverlay.png);
    background-size: contain;
    display: block;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}


.box3 {
    margin-right: auto;
    margin-left: auto;
   
    padding: 10px;
    border: 2px ridge #a2b1fb;
    width: 175px;
    height: fit-content;
    background-image: url(darkwebcoreoverlay.png);
    background-size: contain;
    display: block;
    box-sizing: border-box;
  
   
}
               
.rightcontainer{
    /*float:right; */ 
    display: block;
    width: 180px;
    height: 100%;
   /* margin-left: 1020px; */ 
   /* position: absolute; */
    grid-column: 3/4;
    grid-row: 1/3;
    border: 4px ridge #a2b1fb;
    box-sizing: border-box;
    background-image: url(citylights.gif);
    background-position: bottom;
   background-repeat:repeat-x;
   background-size: 65%;




}

.box2 {
    display: block;
    padding: 10px;
    border: 2px ridge #a2b1fb;
    width: 175;
    height: fit-content;
    margin-left: auto;
    margin-right: auto;
    background-image: url(darkwebcoreoverlay.png);
   
    box-sizing: border-box;
    
}

.box4 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    
    padding: 10px;
    border: 2px ridge #a2b1fb;
    width: 175px ;
    height: fit-content;
    background-image: url(darkwebcoreoverlay.png);
    background-size: contain;
    box-sizing: border-box;

}

.disclaimer {
  
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    


}



.boxcenter { 
    width: 1016px;
    height: 300px;
    border: 4px ridge #a2b1fb;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    display: flex;

    grid-column-start: 1;
    grid-row-start: 3;

   
 
}




.aboutbox {
   
    padding: 20px;
    display: block;
    border: 10px ridge #a2b1fb;
    width: 30%;
    height: 100%;
    justify-content: center;
    flex-direction: column;
    box-sizing: border-box;
    float: right;

}

.aboutbox h2 {
    display: block;
    margin-left:auto;
    margin-right: auto;
    
    padding: 5px;
}

.aboutbox img {
    float: left;
    padding: 5px;

}

.gridbox {
   
    
    display: grid;
    border: 10px ridge #a2b1fb;
    width: 70%;
    height: 100%;
    box-sizing: border-box;
    grid-template-columns: 33% 33% 33%;
   

}
/* contents of container END---------------------------*/


.slideshow {
    position: absolute;
    max-width: 800px;
    width: 800px;
    height: 583px;
    max-height: 583px;
    border:  thick double #fe5151;
}

.slideshow .myslides img {
    margin-left: auto;
    margin-right: auto;
     max-height: 583px;
   max-width: 800px;
   
}

.slideshow .myslides {
  display:none;
  max-height: 583px;
  max-width: 800px;
}

.slideshow button {
    position: absolute;
    top: 50%;
    
}


    
  

/* blog css */



.container2 {
  margin-top: 50px;
  margin-left:auto;
  margin-right: auto;
  display: flex;
  
  width: 900px;
   height: fit-content;
  z-index: 3;
  border-radius: 5px;
     background-image: url(ww\ copy\ 2.jpg), url(windows.jpg), url(windows\ copy.jpg);
    background-size: 100% auto , 100% 96% , 100% 4% ; 
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: top, top, bottom;
   
  
}
.bloggif {
    background-image: url(blog.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13%;
    display: flex;
    justify-content: center;
    height: 18%;
    margin-top: 2%;
    transform: rotate(-4deg);
    margin-right: auto;
    margin-left: auto;
}

.blog {
   
    border:  #586291 ;
    width: 700px;
    height: fit-content;
    padding: 30px;
    padding-bottom: 60px;
    margin-left: auto;
    margin-right: auto;
    height: 90%;
    margin-top: 60px;
    

    
}

.blog h2 {
    
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-smooth: none;
}
.blog p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin-block-start: auto;
    
}



ul {
    padding-left: 0% ;
    list-style: none;
}

a:link {
    color: white;
}

a:visited {
    color: white;
}

a:hover {
    color: #f73b3b;
}