body,html{
padding:0px;
margin:0px;
background:#0571ff;
}
#header{
width:90%;
height:auto;
padding:5%;
background:transparent;
position:fixed;
text-align:center;
z-index:999;
transition:0.6s ease-in-out;
color:white;
background-size:cover !important;
}
#background{
width:100%;
height:66vh;
background:linear-gradient(180deg,rgba(0,0,0,0.1),rgb(4,85,191,255)),url('../images/Stage.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') center center fixed;
background-size:cover !important;
background-repeat:no-repeat;
}
#scroll-to{
background:transparent;
padding:10px;
position:relative;
top:-35vh;
}
#social{
padding:8px 20px;
border:3px solid white;
text-align:center;
background:transparent;
color:inherit;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
font-size:18px;
border-radius:50px;
float:left;
}
#search{
display:inline-block;
margin-left:-10%;
}
.search{
position:relative;
right:-12%;
font-size:14px;
color:inherit;
}
#search input{
padding:8px 20px;
border:3px solid white;
text-align:left;
background:transparent;
color:inherit;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
font-size:18px;
border-radius:50px;
padding-left:50px;
}
#links{
right:5%;
font-size:18px;
position:absolute;
margin-top:-2.2%;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
}
#links a{
text-decoration:none;
margin:0px 35px;
color:inherit;
}
#profile{
width:76%;
height:auto;
padding:5% 12%;
color:white;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
position:relative;
top:-20vh;
}
#profile-image{
width:180px;
height:180px;
background-color:white;
background:url('../images/Avatar.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') center center;
background-size:cover;
background-repeat:no-repeat;
border-radius:50%;
}
#userdata{
position:absolute;
top:8vh;
width:56%;
margin-left:18vw;
}
#username{
font-size:30px;
margin:20px 0px;
}
.verify{
font-size:24px;
margin-left:6px;
margin-top:2px;
}
#about{
font-size:18px;
margin:20px 0px;
}
#location{
margin:20px 0px;
}
.location{
font-size:16px;
margin-right:8px;
}
#website{
margin:20px 0px;
}
.website{
font-size:16px;
margin-right:8px;
}
#f-data{
margin:20px 0px;
}
#f-data table{
border:0px;
}
#f-data td{
border:0px;
text-align:left;
padding:5px 0px;
font-size:24px;
width:230px;
}
#f-data td b{
font-size:16px !important;
}
#userdata button{
margin:0px 30px;
padding:8px 50px;
border:3px solid white;
text-align:center;
background:transparent;
color:white;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
font-size:18px;
border-radius:50px;
margin-bottom:10px;
transition:0.4s ease-in-out;
top:-4px;
position:relative;
}
#userdata button:hover{
color:#282828;
cursor:pointer;
background:white;
}
*:focus {
outline: none;
}
.placeW::-webkit-input-placeholder{
color:white;
}
.placeB::-webkit-input-placeholder{
color:#282828;
}
#posts{
width:60%;
margin:0;
text-align:left;
padding:0px 10%;
padding-left:30%;
color:#282828;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
margin-bottom:10vh;
margin-top:-8vh;
}
.p-data{
background:#fff;
width:70%;
border-radius:8px;
margin:30px 0px;
}
.p-data img{
border-radius:8px 8px 0px 0px;
}
.p-top{
width:92%;
padding:10px 3.8%;
font-size:16px;
padding-top:20px;
}
.p-userimg{
width:50px;
height:50px;
background:url('../images/Avatar.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') center center;
background-size:cover;
border-radius:50%;
display:inline-block;
}
.p-username{
display:inline-block;  
position:absolute;
margin-top:1%;
margin-left:1%;
font-size:18px;
}
.p-verify{
font-size:14px;
margin-left:2px;
margin-top:2px;
}
.p-time{
float:right;
margin-top:15px;
color:#525252;
font-size:14px;
}
.p-text{
width:92%;
padding:20px 3.8%;
font-size:18px;
padding-top:10px;
}
.p-bottom{
width:100%;
padding:20px;
padding-bottom:30px;
}
.p-bottom button{
width:50px;
margin-right:30px;
background:transparent;
border:0px;
text-align:left;
font-size:16px;
}
#form{
width:60%;
height:auto;
text-align:center;
margin-top:25vh;
position:absolute;
padding:8vh 0;
background:linear-gradient(0deg,rgba(0,0,0,1),rgb(5,113,255,255)),url('https://images.pexels.com/photos/998641/pexels-photo-998641.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') center center fixed;
background-size:cover !important;
background-repeat:no-repeat;
border-radius:10px;
margin-left:20%;
}
#form h1{
color:#fff;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
}
.error{
color:rgb(253, 105, 105);
font-family: 'Montserrat', sans-serif;
font-weight: bold;
}
#form input{
border:0px;
border-bottom:2px solid rgba(255,255,255,0.6);
background:transparent;
color:#fff;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
padding:12px 30px;
width:50%;
margin:18px 0px;
font-size:18px;
transition:0.4s ease-in-out;
}
#form input:focus{
border-bottom:2px solid rgba(255,255,255,1);
}
#form input::placeholder{
color:#fff;
}
#form button{
border:2px solid #fff;
background:transparent;
color:#fff;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
padding:14px 20px;
width:20%;
margin:15px 0px;
border-radius:50px;
font-size:16px;
transition:0.4s ease-in-out;
}
#form button:hover{
background:#fff;
color:#000;
cursor:pointer;
}
::-webkit-scrollbar{
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track{
background: #f1f1f1;
border-radius: 5px;
}
::-webkit-scrollbar-thumb{
background: #282828;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover{
background: #555;
}