.material-symbols-outlined {
font-variation-settings:'FILL' 0, 'wght' 800, 'GRAD' 0, 'opsz' 24;
border-radius:100%; 
}

.loader {
width: 50px;
aspect-ratio: 1;
border-radius: 50%;
border: 2px solid #666666;
border-right-color: #CCCCCC;
animation: l2 1s infinite linear;
}
@keyframes l2 {to{transform: rotate(1turn)}}

.cloader {
width: 20px;
aspect-ratio: 1;
border-radius: 50%;
border: 1px solid #666666;
border-right-color: #CCCCCC;
animation: l2 1s infinite linear;
}
@keyframes l2{to{transform: rotate(1turn)}}

.profileloader {
width: 50px;
aspect-ratio: 1;
border-radius: 50%;
border: 2px solid #666666;
border-right-color: #CCCCCC;
animation: l2 1s infinite linear;
}
@keyframes l2{to{transform: rotate(1turn)}}

select{

padding-top:5px;
}

textarea{

scrollbar-width:none;
}

input{

font-weight:normal;
outline: none;
background-color:#FFFFFF;
}

input:focus{
background-color:#FFFFFF;
outline: none;
}

button{

font-weight:normal;
color:#FFFFFF;
background:linear-gradient(#0d98ba,#0072bb);
}

.icon{
border-radius:100%; 
background:rgba(102,102,102,0.75);
cursor:pointer;
margin-bottom:2.5px;
width:30px;
height:30px;
padding:10px;
}

.div1{
width:20%; 
display:flex; 
float:left}
    
.div3{
width:20%; 
float:right;
display:block;
}

.videochilddiv{
z-index:1;
width:content-fit;
max-width:450px;
min-width:340px;
height:97.5%;
border-radius:15px;
background:#FFFFFF;
scroll-snap-align:start;
scroll-snap-stop: always;
}

#nextprev{
display:block;
}

#div1cancel, #div3cancel{
display:none;
}

#commentdiv{
width:375px; 
height:100%; 
right:0px;
position:relative;
}
    
#commentdvx, #commentdvy{
width:375px; 
}

#logindv{
width:500px; 
}

#postdiv{
width:500px; 
height:95%;
border-radius:10px;
}

#result, #postresult{
width:250px; 
}

#viewpost{
display:none;
}

.textdiv{
padding-right:20px;
padding-left:20px;
box-sizing:border-box;
border-radius:0 0 15px 15px; 
}

#fontdiv{
width:85%; 
}

#font1{
font-size:120pt; 
letter-spacing:-22.5px;
}

#font2, #font3{
font-weight:800;
font-size:35pt; 
}

#fscreen{
display:none;
}

.pfdiv1{
width:fit-content;
text-align:left;
}
    
.pfdv1{
width:fit-content;
justify-content:left;
}

.pfspan{
font-size:15pt; 
}

.pfspan1, .pfspan2{
font-size:11pt; 
display:inline-block;
}

.searchvid{
width:20%;  
height:200px; 
border-radius:15px; 
border:3px #FFFFFF solid;
box-sizing: border-box;
}
    

.prvid{
border-radius:10px;
}

.prspan{
color:white; 
padding:15px; 
box-sizing:border-box; 
background:linear-gradient(transparent,#000000); 
border-radius:10px;
text-align:left;
}

.spancount{
color:#000000;
}

progress{
width:95%; 
background-color:rgba(102,102,102,0.5); 
}
progress::-moz-progress-bar {
background-color: rgba(102,102,102,0.5);
}
    
progress::-webkit-progress-bar {
background-color: rgba(255,255,255,0.2);
}
    
.navmenu{
width:object-fit; 
min-height:100px; 
position:absolute; 
right:-70; 
z-index:100; 
bottom:10px; 
line-height:1.0
}

.pfdv{
display:flex; 
justify-content:start;
}
    
.playvid{
display:none;
}

#profilecancel {
margin:0px;
}

#editprofiledv{
width:500px; height:90%; 
}

.cmdiv{
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
background:linear-gradient(transparent, rgba(0,0,0,0.5));
}
    
#followdv{
width:350px; height:90%; 
}

#moredv{
width:500px; 
height:200px;     
}
    
#sharedv{
width:500px; 
min-height:100px;   
padding:20px;
box-sizing:border-box;
}
 
#divload{
display:block;  
}   

#sfont{
font-size:25pt;
height:60px; 
}
  
#searchinput{
font-size:12pt;
height:40px; 
}
   
#messagediv{
width:400px; 
height:100%; 
right:0px;
position:relative;
} 
#messagedvx, #messagedvy{
width:400px; 
}

#divload{
width:350px; 
height:95%;
background:#CCCCCC; 
}

@media only screen and (max-width: 700px){
.pfdv{
}
}

@media only screen and (max-width: 700px){
#divload{
width:100%; 
height:100%;
background:#000000; 
}
}

@media only screen and (max-width: 700px){
#messagediv{
width:100%; 
height:100%; 
right:0px;
}
}
@media only screen and (max-width: 700px){
#messagedvx, #messagedvy{
width:100%; 
}
}
    
@media only screen and (max-width: 700px){
#searchinput{
font-size:10pt;
height:25px; 
}
}
    
@media only screen and (max-width: 700px){
#sfont{
font-size:13pt;
height:35px; 
}
}
    
@media only screen and (max-width: 700px){
#divload{
display:none;  
}
}
    
@media only screen and (max-width: 700px){
#sharedv{
width:100%; 
}
}
    
@media only screen and (max-width: 700px){
#moredv{
width:100%; 
height:200px;     
}
}
    
@media only screen and (max-width: 700px){
#followdv{
width:90%; height:90%; 
}
}
    
@media only screen and (max-width: 700px){
.cmdiv{
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
}
}  
    
@media only screen and (max-width: 700px){
body{
background:#000000 !important;
}
}

@media only screen and (max-width: 700px){
.icon{
width:25px;
height:25px;
padding:10px;
}
}

@media only screen and (max-width: 700px){
.navmenu{
right:10; 
bottom:30px;
}
}

@media only screen and (max-width: 700px){
progress{
width:100%; 
}
}
    
@media only screen and (max-width: 700px){
.icon{
background:rgba(102,102,102,0.5);
}
}

@media only screen and (max-width: 700px){
.spancount{
color:#FFFFFF;
}
}

@media only screen and (max-width: 700px){
.prspan{
border-radius:0px;
}
}
    
@media only screen and (max-width: 700px){
.prvid{
border-radius:0px;
}
}

@media only screen and (max-width: 700px){
.profileloader{
}
}

@media only screen and (max-width: 700px){
.pfspan{
font-size:13pt; 
}
}

@media only screen and (max-width: 700px){
.pfspan1, .pfspan2{
font-size:10pt; 
}
}

@media only screen and (max-width: 700px){
.pfdiv1{
width:90%; 
}
}

@media only screen and (max-width: 700px){
#fscreen{
display:inline-block;
}
}

@media only screen and (max-width: 700px){
#viewpost{
display:inline-block;
}
}

@media only screen and (max-width: 700px){
#font1{
font-size:150pt; 
letter-spacing:-15px;
}
}

@media only screen and (max-width: 700px){
#font2{
font-weight:800;
font-size:85pt; 
letter-spacing:-10px;
}
}

@media only screen and (max-width: 700px){
#font3{
font-size:90pt; 
letter-spacing:-10px;
}
}



@media only screen and (max-width: 700px){
#postdiv{
width:100%; 
height:100%;
border-radius:0px;
}
}

@media only screen and (max-width: 1200px){
#commentdvx, #commentdvy{
width:100%; 
}
}

@media only screen and (max-width: 1200px){
#passworddv, #logindv{
width:90%; 
}
}

@media only screen and (max-width: 700px){
.div1{
display:none;
width:100%;
position:fixed;
}
}

@media only screen and (max-width: 1200px){
#div1cancel{
display:block;
}
}

@media only screen and (max-width: 700px){
.div3{
display:none;
width:100%;
position:fixed;
}
}

@media only screen and (max-width: 700px){
#nextprev{
display:none;
}
}

progress::-webkit-progress-value {background-color: #FFFFFF;}
progress::-moz-progress-bar {background-color:#FFFFFF}