/*

FREON LEARN MORE PAGE CSS

*/


:root{

    --brandsprimarycolor: rgb(0, 0, 0); 
    --primaryfade: #f5cfff; ;
    --secondarycolor: #1b0101;
    --accentcolor:#f5f5f5;
    --words:#ffffff; 
    --backgroundcolor:background: linear-gradient(112.1deg, rgba(29, 23, 38, 0.95) 11.4%, rgba(65, 48, 87, 0.95) 70.2%) center center;
    
    --shadowacent:#fb0000;
    --shadowcolors: 0 0 5px #fff, 0 0 5px #fff, 0 0 10px var(--shadowacent), 0 0 15px var(--shadowacent), 0 0 20px var(--shadowacent), 0 0 27px var(--shadowacent), 0 0 37pxvar(--shadowacent);
    
    
    --boxshadowaccent:#8c00ff;
    --boxshadowcolors:0 0 3px #fff, 0 0 5px #fff, 0 0 5px var(--boxshadowaccent), 0 0 7px var(--boxshadowaccent), 0 0 10px var(--boxshadowaccent), 0 0 15px var(--boxshadowaccent), 0 0 20px var(--boxshadowaccent);
    

}


* {

    margin: 0px;
    padding: 0px;
    text-decoration: none;
    color: white;
    background-color: black;

    }

.disapear{
    display: none;
    visibility: none;
    }


nav {

    height: 10vh;
    width: 100vw;
    position: relative;
    display: inline-block;
    
    background:transparent;

    
    color: #fff;
    /* box-shadow:var(--boxshadowcolors); */
    z-index: 3;
    
    /* background-color: black; */
    }

nav > h1 {

position: relative;
display: inline-block;

height: 10vh;
font-size: 3rem;
line-height: 10vh;
padding-left: 2.5vh;
padding-right: 1vh;
text-align: center;
vertical-align: top;
/* background:var(--brandsprimarycolor); */
background-color: transparent;

color: #fff;
text-shadow: var(--shadowcolors) !important;


}


nav > img {

display: inline-block;
box-sizing: border-box;
padding-left: 0vh;
padding: 2.5vh 0px 0px 0px;
/* background-color: var(--brandsprimarycolor); */
background-color: transparent;


}

nav > ul {

display: inline-flex;
list-style: none;


height: 10vh !important;
float: right;
padding-right: 2.5vw;
background-color: transparent;
}

nav > ul > li {

font-size: 2.5rem;
position: relative;

line-height: 10vh !important;
text-align: center;
margin: 0px 10px 0px 10px;

color: #fff;
text-shadow: var(--shadowcolors);
background-color: transparent;


}


nav > ul > li > i {

    background-color: transparent;
}


nav > span > ul  {

list-style: none;
width: 100vw;
font: 1.5rem;
height: 5vh;
line-height: 5vh;
position: absolute;
background-color: transparent;



}


nav > span > ul > li  {

height: 5vh;
line-height: 5vh;
width: 100vw;
/* background-color: #9d00ffe2; */
border-bottom: 3px rgb(76, 0, 101) solid;
outline:3px rgb(76, 0, 101) solid;;
padding-left: 20px;
background: linear-gradient(to right, #2200FF 0%, #FF00F7 10%, #cfcfcf00 20%);


}

nav > span > ul > li > a > h3, nav > span > ul > li > h3{

    /* background-color: #9d00ffe2; */
    /* background-color: transparent; */
    background: linear-gradient(to right, #2200FF 0%, #FF00F7 10%, #cfcfcf00 20%);

}



/* Nav stuff above */





.page{

width: 100vw;
height:500vh;
    

}





#pproblem{
position: relative;
display: block;

width: 90vw;
min-height: fit-content;
left: 5vw;

outline: solid 3px red;


}


#pproblem > p {

position: relative;
display: block;
width: 800px;

left: 150px;

font-size: 1.5rem;
text-indent: 50px;
margin-top: 50px;



}






/* Graph below */

#lost {

   position: relative;
   display: inline;

}

#lost > h2 {

    position: relative;
    top: 150px;
    font-size: 6rem;
    margin-top: 170px;
    margin-left: 150px;
    background: linear-gradient(to top, #CF0000 0%, #C917CF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

#bargraphdiv {

    position: relative;
    left: 150px;
}
  

#lost > ul {
    list-style: none;


}

#lost > ul > li {

position: relative;
display: block;
font-size: 1.5rem;
line-height: 35px;
top: 175px;
padding-top: 30px;



}

  
  .bar-graph-horizontal > div {
display: block;
    margin-bottom: 8px;
    width: 100%;

  
  }
  

  
  .bar-graph-horizontal .bar {
    border-radius: 3px;
    height: 55px;
    display: block;
    overflow: hidden;
    position: relative;
    width: 0;

  }
  
  .bar-graph-one .bar::after {
    -webkit-animation: fade-in-text 2.2s 0.1s forwards;
    -moz-animation: fade-in-text 2.2s 0.1s forwards;
    animation: fade-in-text 2.2s 0.1s forwards;
    color: #fff;
    content: attr(data-percentage);
    font-weight: 900;

    position: absolute;
    right: 16px;
    top: 17px;
    
  }
  
  .bar-graph-one .bar-one .bar {
    background-color: #ff006a;
    -webkit-animation: show-bar-one 1.2s 0.1s forwards;
    -moz-animation: show-bar-one 1.2s 0.1s forwards;
    animation: show-bar-one 2.2s 0.1s forwards;
  }
  
  .bar-graph-one .bar-two .bar {
    background-color: #ff0099;
    -webkit-animation: show-bar-two 1.2s 0.2s forwards;
    -moz-animation: show-bar-two 1.2s 0.2s forwards;
    animation: show-bar-two 2.2s 0.2s forwards;
  }
  
  .bar-graph-one .bar-three .bar {
    background-color: #ff12d8;
    -webkit-animation: show-bar-three 1.2s 0.3s forwards;
    -moz-animation: show-bar-three 1.2s 0.3s forwards;
    animation: show-bar-three 2.2s 0.3s forwards;
  }
  

  
  /* Bar Graph Horizontal Animations */
  @-webkit-keyframes show-bar-one {
    0% {
      width: 0;
    }
    100% {
      width: 12.5%;
    }
  }
  
  @-webkit-keyframes show-bar-two {
    0% {
      width: 0;
    }
    100% {
      width: 29.2%;
    }
  }
  
  @-webkit-keyframes show-bar-three {
    0% {
      width: 0;
    }
    100% {
      width: 71%;
    }
  }
  

  
  @-webkit-keyframes fade-in-text {

    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  

  #piracyinfo {

    display: inline-flex;
    width: 800px;
    padding-top: 50px;
    

}

.fa-book-skull {

background: linear-gradient(to top, #CF00C1 0%, #CF1512 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding-top: 5px;

display: inherit;
font-size: 6rem;


}

#piracyinfo > p {


padding-left: 60px;
font-size: 1.5rem;
color: white;
text-indent: 25px;

}
  




/* Graph Above */







#morelost {


  position: relative;
  display: block;
  
  width: 90vw;
 height: 100vh;
  left: 5vw;
  
  outline: solid 3px red;



}


#morelost > h2 {

  top: 75px;
  position: relative;
  font-size: 6rem;
  margin-left: 150px;
  background: linear-gradient(to top, #CF0000 0%, #C917CF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;



}













.backgroundpt1 {

width: 100%;
width: 100%;
position: absolute;
top: -150px;
transform: rotate(180deg);
background-size: contain;

}

#para1 {

color: white;

}


#Piracyproblem{


    font-family: Inter, sans-serif;
    font-size: 8em;
    font-weight: bold;
    text-align: center;
  
    position: relative;
    margin-top: 60vh;
    outline: 3px red solid;
     
    background: linear-gradient(to right, #2200FF 0%, #ff00a6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  
  }


#fingerprintingpage {

    position: relative;
    width: 80vw;
    min-height: 90vh;
    left: 10vw;
    color: white;

}

#fingerprintingpage > h2 {

font-size: 6rem;

background: linear-gradient(to left, #ee05ff 0%, #00fffb 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

position: relative;
display: block;
width: 100vw;
margin-top: 30vh;
right: 25%;
text-align: center;

}




#fingerprintingpage > span  {

position: relative;
display: inline-flex;


}

#fingerprintingpage > span > img{

    width: 500px;
    height: 800px;
    object-fit: cover;
    position: relative;
    
}


#fpd2 {

position: relative;


}

#fpd2 > td > h3 {

font-size: 1.5rem;
font-weight: lighter;
text-align: left;
min-height: 100px;
width: 35vw;
padding-left: 20px;
text-indent: 40px;


}

#fpd2 > td > h2 {

    font-size: 3rem;
    padding: 20px;

}



.fpd {

position: relative;
display: flex;

padding: 25px;

width: 40vw;

}








#Fprinttable > tbody > tr > td > div {

position: relative;
display: inline-flex;

    
}

#Fprinttable > tbody > tr > td > div > h3  {

    font-size: 3rem;
padding-right: 30px;


}


#Fprinttable > tbody > tr > td > div > i  {

    background: linear-gradient(to left, #ee05ff 0%, #00fffb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    font-size: 3rem;
    line-height: 3rem !important;
    padding-right: 20px;

    

}



#Fprinttable > tbody > tr > td > p  {

    font-size: 1.15rem;
    width: 15vw;
    padding-left: 50px;
    padding-top: 15px;


}




#tryfreondiv {

    display: flex;
    justify-content: center;
    padding: 50px;
}





.trydemo {

position: relative;
display: flex;
width: 50vw;

justify-content: center;


height: 100px;
line-height: 100px;
color: #fff;
font-size: 4rem;
font-weight: bolder;
font-family: Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
text-transform: uppercase;
text-decoration: none;
box-sizing: border-box;

background: linear-gradient( to right , #ad3bff, #03ccf4);
background-size: 400%;
border-radius: 30px;
animation: animatee 16s linear infinite;

}


.trydemo {
 
  }


@keyframes animatee {
0% {
    background-position: 0%;
}
100% {
    background-position: 400%;
}
}



.trydemo:hover:before {
filter: blur(20px);
opacity: 1;
animation: animate 8s linear infinite;
}



hr { 

    background: linear-gradient(to left, #ee05ff 0%, #00fffb 100%);
    border-radius: 20px;
        height: 5px;
        width: 90vw;
        position: relative;
        left: 5vw;
    
    
    }



section > div > span {
  
    position: relative;
    top: 20px;
    padding-left:20px;
   
    
  }