/* Fullscreen video layer */

 html {
   filter: saturate(165%);
 }
 
.video-foreground {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: calc(var(--vh) * 100);
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}
                                                          /*NOTE! RESEARCH USING SVG FILTERS TO ADD MORE COMPLEX FILTER AND FX TO THE CSS AND HTML, THEN SEE IF THERE ARE ANY OTHER THINGS SIMILAR*/
                                                          /*NEARLY READY, MAIN THING IS POSITIONING SHERIFF THEN MAKING SURE LOOKS GOOD ENOUGH*/
.video-foreground video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100vw;
    min-height: calc(var(--vh) * 100);
    width: auto;
    height: auto;
    object-fit: cover;
    filter: blur(3px);
    transform: translate(-50%, -50%);
    z-index: 0;
}



.overlay-text {
  position:fixed;
}


.paragraph1 {
   
   position:relative;
   z-index:10;
   font-size:20px;
   background-size:contain;
   color: rgba(248,248,255,1);
   padding:40px;
   max-width:600px;
   font-family: 'hartingplain', Arial, sans-serif;
   background-color: rgba(55,15,20,0.2);
   filter:blur (2px);
   background-color: rgba(55,15,20,0.2); 
   text-shadow: 20px 30px rgba(100,100,100,0.5);
   text-shadow: 30px 39px rgba(108,102,104,0.2);
   text-shadow: 45px 11px rgba(109,115,170,0.25);
   text-shadow: 50px 70px rgba(108,90,70,0.3);
   -webkit-text-stroke: 3px rgba(20,16,22,0.1);
   -webkit-text-stroke: 10px rgba(10,16,20,0.2);
}


 
/* Text overlay */
/*.paragraph1 {
 /*   position: relative;*/
 /*   z-index: 10;*/
 /*   font-size:20px;*/
  /*  color: red; */
  /*  padding: 40px;*/
 /*   max-width: 600px;*/
   /* font-family: 'hartingplain', Arial, sans-serif;*/
/*    background-color: rgba(7,8,40,0.21);*/
 /*   text-shadow: 2.5px 2.1px rgba(5,12,9,0.8);*/
 /*   filter: blur(1px);*/
  /*  filter: contrast(80%);*/
  /*  filter: saturation(200%);*/
 /*   text-shadow: 4px 4px rgba(80,15,60,1);*/
/*    text-shadow: 2px 2px rgba(250,240,213,0.25);*/


/*} */


/* Text overlay  heavily effects applie to this twin text*/
.paragraph2 {
    position: relative;
    z-index: 8;
    font-size:14px;
    color: rgba(239,250,243,0.15); 
    padding: 40px;
    max-width: 600px;
    font-family: 'hartingplain', Arial, sans-serif;
    background-color: rgba(77,8,40,0.11);
    text-shadow: 2.5px 2.1px white;
    filter: contrast(75%);
    filter: saturation(60%);
    text-shadow: 4px 4px rgba(80,15,60,0.15);
    filter:blur(1px);
   

}



   .triggerwarninglocation {
     background-image: url("https://welcometoregret.neocities.org/him1mod.png");
    /* backdrop-filter: opacity(43%); */
    /* backdrop-filter: blur(1px); try and identify if any portion of this controls only the background image opacity*/
     background-size:contain;
    /* filter:opacity(90%); */
     color: rgba(255,42,88,.8);
     font-size:14px;
    /* color: rgba(234, 243, 204, .73); appears that the -webkit-text-stroke was what was giving the actual color for the font for trigger warning */
     font-family: 'hartingplain', Arial, sans-serif;
     font-weight:bold;
     text-shadow: 1px 6px rgba(190,10,95,0.4);
      -webkit-text-stroke: 1px rgba(190,120,20,0.4);
     position: absolute;
     top: 95%;
     right:75%;
     z-index:12;

   }
   

  
 




@font-face {
    font-family: 'hartingplain';
    src: url('/Font%20Folder/harting_plain_macroman/Harting_plain-webfont.woff2') format('woff2'),
         url('/Font%20Folder/harting_plain_macroman/Harting_plain-webfont.woff') format('woff'),
         url('/Font%20Folder/harting_plain_macroman/Harting_plain-webfont.ttf') format('truetype');
}





 .overlay-text h1 {
   background-size:contain;
   color: rgba(248,248,255,0.9);
   background-color: rgba(55,15,20,0.2);
   height:2px;
   filter:blur (2px);
   background-color: rgba(55,15,20,0.2);
   text-shadow: 20px 30px rgba(100,100,100,0.07);
   text-shadow: 30px 39px rgba(94,102,104,0.14);
   text-shadow: 45px 11px rgba(100,115,170,0.08);
   text-shadow: 50px 70px rgba(88,90,70,0.2);
   -webkit-text-stroke: 3px rgba(20,16,30,0.41);
   -webkit-text-stroke: 11px rgba(10,16,2,0.44);
   margin-left:630px;
   margin-top: 2px;
 }
   
   .Websiteviewing {
     background-size:contain;
     background-color:rgba(0,15,25,0.5);
     position:relative;
     font-family: 'hartingplain', Arial, sans-serif;
     color: rgba(227,192,221,1);
     font-size: 15px;
     text-shadow: 20px 30px rgba(190,85,70,0.22);
     text-shadow: 30px 39px rgba(198,102,104,0.14);
     text-shadow: 45px 11px rgba(209,115,170,0.37);
     filter: blur (1px);
     text-shadow: 50px 70px rgba(208,90,70,0.33);
     -webkit-text-stroke: 3px rgba(208,16,22,0.16);
     -webkit-text-stroke: 11px rgba(100,16,20,0.3);
     -webkit-text-stroke: 20px rbga(0,0,0,1);
     margin-left:1250px;
     margin-top:10px;
     margin-bottom:5px;
     z-index: 13;
   }
     
     .boxblendlefttext {
       position:absolute;
       background-size:contain;
       height:100px;
       width:200px;
       background-color: rgba(12,12,120,1);
       margin-top:5px;
       margin-left:850px;
       color: rgba(240,240,240,0);
       z-index:12;
       
     }
     
     
     .pic1 {
      background-size: cover;
      position:absolute;
      margin-top: 525px;
      margin-left: 1250px;
      z-index:15;
     }
     
     .SHH  {
       position:absolute;
       background-size:contain;
       height:3px;
       width:300px;
       font-size:24px;
       margin-left:1300px;
       margin-bottom:5px;
       background-color:(0,0,0,1);
       color:rgba(235,235,235,1);
       -webkit-text-stroke: 7px rgba(0,0,0,.5);
       text-shadow: 3px 5px rgba(140,100,160,.22);
       z-index:13;
     }
     
     .SH {
       position:relative;
       background-color: rgba(220,220,220,0.15);
       background-size:contain;
       font-family: 'hartingplain', Arial, sans-serif;
       background-color: rgba(150,0,0,0.25);
       display:inline-block;
       height:250px;
       width:400px;
       font-size:22px;
       margin-top:50px;
       margin-left:1250px;
       color:rgba(235,205,205,1);
       -webkit-text-stroke: 6px rgba(41,15,10,.5);
       text-shadow: 3px 5px rgba(140,100,160,.22);
       filter: blur 2px;
       z-index:13;
     }
     
     
       
   /* wrong area this is h1 rather than the paragraph under, adjust accordingly*/
   
   
   
   
   
 /* background-size:contain;*/
 /* color: rgb(240 240 232); */         /*if color change is not what i want then reactivate these lines of code*/
 /* font-size:50px; */
 /* filter: blur(0px);
 /* text-shadow: 15px 12px black;*/
 /* -webkit-text-stroke: 10px rgba(3, 2, 0,.3);*/
 /* background-color: rgba(6,11,7, .5);*/
 /* filter: contrast(125%);*/
/*  filter:blur(3px);*/
 /* text-shadow:30px 50px rgba(175,199,210,0.56);*/
/*  margin-left:630px;*/
 /* margin-top: 15px;*/
 /* -webkit-text-stroke:1px rgba(235,241,230,.35); */
 
  /*USE THE MARGIN BUTTONS TO SET FINAL POSITION TO SIMPLIFY, ADD SMALL HEADER ABOUT THE WELCOME TO REGRET ABOUT SPOT, THEN REPOSITION OTHER ELEMENTS TO TASTE*/
  
  /* paragraph2 seems to be the cause of the issue with h2 header in paragraph1 */
 
  


/*.overlay-text .paragraph1 h2 { */
  /*position:relative; */
  /*font-size:30px; */
  /*color: rgba(15,10,9,0.92); */
  /*background-size:contain; */
  /*filter:saturation(150%); */
  
  
  
  
  
  
  
  
  /*make similar but slightly less visible than the main texts unless the vibe fits more. also consider keeping less in the foreground*/


/* OTHER NOTE,DO NOT NECESSARILY HAVE TO RELY ON FANCIER METHODS FOR PLACEMENT OF DIFFERENT THINGS, CAN DO IT MANUALLY WITH PADDING AND MARGIN INSTEAD SINCE THE GOAL IS MORE RAW CREATIONS TO CHANNEL THE HORROR VIBES */