:root {
--white_text: rgba(255, 255, 255, .8);
--black_background: rgba(0, 0, 0, .9);
--black_supa: rgb(0, 0, 0);
--black_redish: rgb(84, 0, 0);
--gold_yellow: rgba(202, 152, 0, 0.9);
--red_outline: rgb(112, 0, 0);
--green_rare: rgb(0, 169, 40);
}
* {
margin: 0;
padding: 0;
text-decoration: none;
font-family: metropolis, Arial, Helvetica, sans-serif;
transition: .2s ease;
}
body {
height: 100%;
background-image: url(background/purple.png);
background-size: cover;
display: flex;
justify-content: center;
flex-direction: column;
width: 100%;
}
body.modal-open {
overflow: hidden;
}
aw {
color: var(--gold_yellow);
}
reders {
color: rgba(255, 0, 0, .8);
}
imp {
color: rgba(255, 0, 0, .8);
cursor: pointer;
transition: .3s ease-in-out;
}
imp:hover {
letter-spacing: 4px;
}
imp:active {
color: var(--gold_yellow);
}
textdissapear{
display: flex;
}
.errormessages h2 {
color: rgb(255, 0, 0);
font-size: 30px;
padding: 10px;
border-radius: 20px;
font-weight: lighter;
background: var(--white_text);
}
.No_more_Posts {
display: none;
}
.custom-dropdown {
position: relative;
width: 100%;
max-width: 300px;
margin: 15px 0;
}
.dropdown-selected {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 15px;
background-color: #f8f9fa;
border: 1px solid #ced4da;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
.dropdown-selected:hover {
background-color: #e9ecef;
}
.dropdown-arrow {
font-size: 12px;
transition: transform 0.3s ease;
}
.dropdown-selected.active .dropdown-arrow {
transform: rotate(180deg);
}
.dropdown-options {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: white;
border: 1px solid #ced4da;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
z-index: 100;
display: none;
max-height: 200px;
overflow-y: auto;
}
.dropdown-options.show {
display: block;
}
.dropdown-option {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
cursor: pointer;
transition: background-color 0.2s;
}
.dropdown-option:hover {
background-color: #f1f3f5;
}
.option-text {
font-weight: 500;
}
.option-stars {
color: #ffc107;
font-size: 14px;
}
.mobile_toprightnava{
padding: 5px;
gap: 10px;
display: flex;
flex-direction: row;
width: 50%;
justify-content: space-between;
}
.mobile_toprightnav,.mobile_bottom_navbar,.marketnavicon{
display: none;
}
.mobile-dropdown-container {
display: none;
}
.desktop-select {
display: block;
}
.mobile-sort-dropdown {
display: none;
}
.mobile-location-dropdown {
display: none;
}
.PlatformLinksTemplate{
display: none;
}
.PlatformMSGsTemplate{
display: none;
}
.PlatformNEWsTemplate{
display: none;
}
.payment_meh_pics .setmystufftextp{
display: none;
}
.buyer_login_main{
display: flex;
flex-direction: column;
gap: 30px;
}
.extra_icons{
width: 50px;
height: 50px;
}
.extra_icons:hover{
width: 60px;
height: 60px;
cursor: pointer;
}
.firstguydivision{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 20px
}
.extra_icons_container{
display: flex;
flex-direction: row;
gap: 20px;
}
.extra_icons_container_report{
display: flex;
flex-direction: row;
gap: 20px;
margin-top: 20px;
}
.extra_aicons_container{
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
width: 70px;
height: 70px;
border-radius: 50px;
background: rgba(183, 0, 255, 0.1);
}
.extra_aicons_container:hover{
background: rgba(255, 255, 255, .4);
border: 1px solid var(--white_text);
}
.newsplatform_pc ,.notiifplatform_pc{
position: absolute;
border: 2px solid linen;
border-radius: 20px;
background: rgba(0, 0, 0, .4);
backdrop-filter: blur(5px);
width: 600px;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transform: translateX(-4000px);
}
.newsplatform_pc.after,.notiifplatform_pc.after{
transform: translateX(-100px);
}
.PlatformLinks_pc1{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 20px;
}
.PlatformLinks_pc2{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
.No_more_Postspc{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
}
.No_more_Postspc h1{
font-size: 15px;
color: var(--white_text);
letter-spacing: 3px;
font-weight: lighter;
}
.Exit_myG,.Exit_myG2{
color: var(--white_text);
font-size: 20px;
font-weight: normal;
}
.Exit_myG:hover,.Exit_myG2:hover{
color: rgba(255, 0, 0, 0.9);
cursor: pointer;
}
.report_heading{
margin-top: 20px;
color: var(--white_text);
}
.report_p{
color: var(--white_text);
font-size: 16px;
margin-top: 20px;
margin-bottom: 20px;
}
.google-login-btn-frame {
margin-top: 0px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.google-login-btn {
display: flex;
align-items: center;
justify-content: center;
width: 80%;
max-width: 300px;
padding: 12px 20px;
background-color: rgba(79, 79, 79, 0.8);
color: white;
text-decoration: none;
border-radius: 50px;
border: 2px solid white;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 1rem;
font-weight: 500;
transition: all 0.2s ease-in-out;
box-shadow: 0 0px 8px rgba(255, 255, 255,1);
}
.google-login-btn:hover {
background-color: rgba(0, 255, 255, .8);
text-decoration: none;
color: white;
transform: translateY(-1px);
box-shadow: 0 0px 8px rgba(255, 255, 255,1);
}
.google-logo {
width: 18px;
height: 18px;
margin-right: 10px;
}
header{
display: flex;
width: 100%;
justify-content: center;
align-items: center;
}
.navbar {
top: 0;
display: flex;
width: fit-content;
flex-direction: row;
align-items: center;
padding: 40px;
position: fixed;
padding-top: 5px;
padding-bottom: 5px;
backdrop-filter: blur(5px);
z-index: 100;
height: 50px;
gap: 100px;
border-bottom-left-radius:100px ;
border-bottom-right-radius:100px ;
border-bottom: 1px solid var(--white_text);
background: rgba(0, 0, 0, .4);
}
.navbar:hover {
backdrop-filter: blur(10px);
transition: .6s;
}
.navlogostuff {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 5px;
text-shadow: 5px 10px 20px;
cursor: pointer;
}
.navlogostuff anjizo:active{
color: var(--gold_yellow);
transition: .3s ease-in-out;
}
.navlogostuff trades:active{
color: var(--gold_yellow);
transition: .3s ease-in-out;
}
.navlogo {
width: 30px;
height: 30px;
transition: .2s ease;
background: var(--white_text);
border-radius: 40px;
padding: 5px;
}
.navlogostuff anjizo {
color: var(--white_text);
font-size: 20px;
font-weight: lighter;
}
.navlogostuff trades {
color: rgba(255, 0, 0, 0.9);
font-size: 20px;
font-weight: lighter;
}
.navsection {
width: fit-content;
display: flex;
gap: 20px;
flex-direction: row;
justify-content: center;
align-items: center;
}
.navsection ul {
padding: 10px;
}
.pages {
display: flex;
gap: 40px;
list-style: none;
}
.pages .implink {
color: rgb(61, 126, 0);
list-style: none;
}
.pagelink {
list-style: none;
font-size: 15px;
text-decoration: none;
}
.pagelink a {
color: var(--white_text);
font-size: 18px;
letter-spacing: 1px;
text-shadow: 5px 10px 20px;
transition: .3s;
font-weight: normal;
}
.pagelink a:hover {
color: var(--gold_yellow);
text-shadow: 5px 10px 10px;
}
.pagelink a:active {
font-size: 18px;
transition: .3s;
}
.selectedpg a {
color: var(--gold_yellow);
font-size: 18px;
letter-spacing: 1px;
text-shadow: 5px 10px 20px;
font-weight: normal;
}
.user_profileview_over {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
border-radius: 25px;
}
.user_profileview {
width: 50px;
height: 50px;
border: 2px solid var(--gold_yellow);
border-radius: 50px;
cursor: pointer;
}
.user_profileview_dropdown {
border: 1px solid white;
background: rgba(0, 0, 0, .9);
border-radius: 20px;
width: 300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
position: fixed;
margin-top: 100px;
margin-right: 200px;
padding: 10px;
transform: translateX(4000px);
transition: .4s ease-in-out;
backdrop-filter: blur(3px);
}
.user_profileview_over .moveoutapage {
transform: translateX(-100px);
}
.user_profileview_dropdown h2 {
font-size: 20px;
font-weight: normal;
letter-spacing: 4px;
}
.user_profileview_dropdown .logoutstaffa {
color: rgba(255, 0, 0, .8);
font-weight: bold;
font-size: 25px;
transition: .4s ease;
padding: 5px;
border: red 2px solid;
background: transparent;
border-radius: 10px;
}
.biast{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-bottom: 50px;
}
.user_profileview_dropdown .logoutstaffa:hover {
letter-spacing: 8px;
}
.user_profileview_accset {
color: var(--white_text);
transition: .3s ease;
}
.user_profileview_accset:hover {
color: var(--gold_yellow);
}
.dropdownexit {
color: white;
font-weight: bolder;
backdrop-filter: blur(5px);
cursor: pointer;
transition: .3s ease;
}
.dropdownexit:hover {
color: red;
}
.fix01 {
display: flex;
justify-content: center;
width: 100%;
}
.page01 {
margin-top: 220px;
padding: 20px;
}
.fstbigwords {
padding: 20px;
padding-top: 100px;
padding-bottom: 100px;
width: 650px;
display: flex;
flex-direction: column;
justify-content: center;
}
.fstbigwords h2 hrotxt {
font-size: 40px;
font-weight: bold;
color: var(--white_text);
letter-spacing: 1px;
transition: .4s;
font-weight: lighter;
}
.fstbigwords h2 hrotxtf anjizo {
color: var(--white_text);
}
.fstbigwords h2 hrotxt trades {
color: rgba(255, 0, 0, .8);
}
.fstbigwords p {
padding-top: 20px;
color: var(--white_text);
font-size: 16px;
letter-spacing: 2px;
font-weight: lighter;
}
.fontgrow01:hover {
letter-spacing: 2px;
cursor: pointer;
transition: .4s ease-in-out;
}
.imagespage1 {
margin-top: 270px;
border: 2px var(--white_text) solid;
border-left: none;
border-right: none;
border-radius: 400px;
background-image: url(background/starsblured.jpg);
background-size: cover;
background-position: center;
padding: 50px;
display: flex;
flex-direction: row;
justify-content: center;
gap: 100px;
}
.guylookrpage1, .guylooklpage1 {
width: 400px;
border: 2px var(--white_text) solid;
border-radius: 2000px;
transition: .3s ease;
}
.guylookrpage1 {
border-left: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.guylooklpage1 {
border-right: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.guylookrpage1:hover, .guylooklpage1:hover {
width: 410px;
border: 4px var(--white_text) solid;
}
.logopage1 {
width: 450px;
border: 2px var(--white_text) solid;
border-top: none;
border-bottom: none;
background-image: url(mages/index_page_images/6.png);
background-size: cover;
background-position: center;
border-radius: 500px;
transition: .3s ease;
}
.logopage1:hover {
width: 460px;
border: 4px var(--white_text) solid;
}
.page2, .page3, .page4 {
padding: 40px;
}
.indexotherstuff{
margin-top: 200px;
}
.intromarketpage02 {
display: flex;
justify-content: center;
gap: 30px;
padding: 40px;
}
.intromarkettalkpage02 {
width: 600px;
padding: 30px;
display: flex;
flex-direction: column;
height: auto;
border-radius: 60px;
height: 300px;
align-items: center ;
gap: 20px;
}
.intromarkettalkpage02 p {
color: var(--white_text);
font-size: 16px;
letter-spacing: 2px;
font-weight: lighter;
}
.intromarkettalkpage02 .viewmarket {
margin-top: 50px;
padding: 20px;
border-radius: 40px;
background: var(--white_text);
width: fit-content;
margin-left: 70px;
transition: .3s ease;
}
.intromarkettalkpage02 .viewmarket:hover {
background-color: transparent;
border: 2px solid var(--white_text);
}
.intromarkettalkpage02 .viewmarket a {
margin: 20px;
color: var(--black_redish);
font-size: 30px;
font-weight: lighter;
font-family: metropolis;
transition: .3s ease;
}
.intromarkettalkpage02 .viewmarket a:hover {
color: var(--gold_yellow);
}
.imgintrotomarket02{
display: flex;
justify-content: center;
align-items: center;
width: 500px;
border: 2px solid var(--white_text);
border-radius: 60px;
height: 300px;
overflow:hidden;
}
.imgintrotomarket02 img {
width: 500px;
height: 300px;
}
.imgintrotomarket02 img:hover {
cursor: pointer;
width: 550px;
height: 325px;
}
.sellerintro03, .buyerintro04 {
display: flex;
justify-content: center;
gap: 30px;
align-items: center;
}
.imgsellerintropage03{
width: 500px;
border: 2px solid var(--white_text);
border-radius: 60px;
height: 300px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.imgbuyerintro04{
width: 500px;
border: 2px solid var(--white_text);
border-radius: 60px;
height: 300px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.sellerimagepage03 {
width: 500px;
height: 300px;
}
.buyerimg04{
width: 500px;
height: 300px;
}
.imgsellerintropage03:hover {
cursor: pointer;
}
.imgbuyerintro04:hover {
cursor: pointer;
}
.sellerimagepage03:hover{
width: 550px;
height: 325px;
transition: .3s ease-in-out;
}
.buyerimg04:hover{
width: 550px;
height: 325px;
transition: .3s ease-in-out;
}
.sellertalkspage03, .buyerintrotalks04 {
width: 600px;
padding: 30px;
display: flex;
flex-direction: column;
height: auto;
border-radius: 60px;
height: 300px;
align-items: center ;
gap: 20px;
}
.sellertalkspage03 p, .buyerintrotalks04 p {
color: var(--white_text);
font-size: 16px;
letter-spacing: 2px;
font-weight: lighter;
}
.becomeseller, .becomebuyer {
margin-top: 50px;
width: fit-content;
padding: 20px;
border-radius: 40px;
transition: .3s ease;
}
.becomeseller:hover, .becomebuyer:hover {
background-color: transparent;
border: 2px solid var(--white_text);
}
.becomeseller a, .becomebuyer a {
margin: 20px;
color: var(--black_redish);
font-size: 30px;
font-weight: bold;
font-family: metropolis;
transition: .3s ease;
}
.becomeseller a:hover, .becomebuyer a:hover {
color: var(--gold_yellow);
}
.finisher {
padding: 20px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 100px;
background: rgba(225, 225, 225, .05);
border-top: 1px solid rgba(255, 255, 255, .4);
}
.leftsidefinsher, .middlefinsher, .rightsidefinsher {
width: fit-content;
}
.finisher .leftsidefinsher p {
width: fit-content;
color: rgba(255, 0, 0, 0.7);
transition: .3s ease;
}
.finisher .leftsidefinsher p:hover {
text-shadow: 10px 10px 10px;
cursor: pointer;
transition: .3s ease;
}
.finisher .middlefinsher h2 {
color: var(--white_text);
font-size: 20px;
font-weight: lighter;
}
.finisher .middlefinsher li {
color: var(--gold_yellow);
padding-top: 20px;
width: fit-content;
transition: .3s ease;
}
.finisher .middlefinsher li:hover {
text-shadow: 10px 10px 10px;
cursor: pointer;
}
.finisher .rightsidefinsher h2 {
color: var(--white_text);
font-weight: normal;
}
.finishersvg {
padding: 20px;
width: 40px;
transition: .3s;
}
.finishersvg:hover {
width: 45px;
cursor: pointer;
}
.finishersvg:active {
width: 65px;
transition: .2s;
}
.buyer_login {
margin-top: 95px;
display: flex;
flex-direction: column;
height: 650px;
overflow: hidden;
gap: 100px;
padding: 20px;
}
.reg_overall,.login_overall{
display: flex;
flex-direction: row;
justify-content: space-between;
transform: translateY(0px);
}
.reg_overall.moveregup{
transform: translateY(-750px);
}
.login_overall.movelogdown{
transform: translateY(750px);
}
.loginopp {
margin: 50px;
margin-top: 10px;
width: 500px;
height: 550px;
display: flex;
justify-content: center;
align-items: center;
padding: 30px;
border-radius: 100px;
transition: .6s ease;
left: 10px;
overflow: hidden;
}
.logoimg {
width: 80pc;
opacity: .1;
}
.loginmessages {
color: white;
position: absolute;
display: flex;
flex-direction: column;
gap: 20px;
justify-content: center;
align-items: center;
width: 500px;
}
.loginattention {
color: var(--gold_yellow);
font-size: 30px;
font-weight: lighter;
letter-spacing: 2px;
transition: .3s ease;
}
.loginattention:hover {
letter-spacing: 4px;
}
.logmsgp {
font-size: 18px;
font-weight: lighter;
letter-spacing: 2px;
line-height: 25px;
}
.login_stuffo, .regestration_stuffo {
margin: 50px;
margin-top: 10px;
width: 500px;
height: 550px;
color: var(--white_text);
display: flex;
flex-direction: column;
padding: 30px;
border-radius: 100px;
transition: .6s ease;
left: 10px;
}
.login_stuffo, .regestration_stuffo {
background: rgba(183, 0, 255, 0.08);
}
.herologintext {
display: flex;
justify-content: center;
}
.herologintext h2 {
color: var(--white_text);
padding: 15px;
font-size: 25px;
font-weight: lighter;
letter-spacing: 2px;
}
.form_login_style {
display: flex;
flex-direction: column;
justify-content: center;
padding: 15px;
}
.logininputframe {
display: flex;
justify-content: center;
gap: 5px;
padding: 15px;
}
.input_login {
padding: 15px;
border-radius: 25px;
border-top-right-radius: 0;
color: rgba(255, 0, 0, .8);
border: var(--white_text) 1px solid;
border-right: var(--white_text) 5px solid;
background: rgba(255, 255, 255, .05);
width: 290px;
font-size: 16px;
}
.input_login:focus{
border-right: var(--white_text) 10px solid;
}
.logininputframe ::placeholder {
color: var(--white_text);
font-weight: lighter;
}
.svglogin {
padding: 10px;
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
background-color: var(--white_text);
}
.svglogin:hover{
cursor: pointer;
}
.svgloginimage{
width: 20px;
height: 20px;
}
.svgloginimage:hover {
width: 25px;
height: 25px;
}
.svgloginimage:active {
width: 30px;
height: 30px;
}
.robo_validation {
font-size: 18px;
padding: 15px;
letter-spacing: 2px;
font-weight: lighter;
}
.logbtnframe {
display: flex;
justify-content: center;
width: 100%;
padding: 10px;
}
.logbtnframe .loginbtn {
color: var(--black_redish);
font-size: 30px;
font-weight: bold;
padding: 20px;
border-radius: 40px;
width: 300px;
transition: .4s ease;
cursor: pointer;
}
.logbtnframe .loginbtn:hover {
background: transparent;
border: 3px solid var(--white_text);
color: var(--gold_yellow);
}
.alternative {
font-size: 18px;
letter-spacing: 2px;
font-weight: lighter;
padding: 15px;
}
.switch-regestration-to-login{
color: var(--green_rare);
transition: .3s ease;
}
.switch-regestration-to-login:hover {
cursor: pointer;
color: var(--gold_yellow);
}
.switch-regestration-to-login:active {
color: rgba(255, 0, 0, .8);
transition: .1s ease-in;
}
.MarkIntroSec {
height: 400px;
margin-top: 200px;
padding: 40px;
display: flex;
justify-content: center;
}
.MarkIntroSec h2 {
color: var(--white_text);
font-size: 40px;
letter-spacing: 1px;
margin-bottom: 20px;
}
.MarkIntroSec p {
color: var(--white_text);
letter-spacing: 2px;
line-height: 25px;
}
.MarkIntroSecLeft {
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 100px;
width: 700px;
}
.MarkIntroSecLeft mar01 {
color: rgba(255, 0, 0, .8);
}
.MarkIntroSecLeft H2{
font-weight: lighter;
}
.Marketnavbar {
margin-top: 100px;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.Marketnavbarform {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 30px;
border-top: 2px solid var(--white_text);
border-radius: 100px;
background: rgba(183, 0, 255, 0.08);
gap:50px;
}
.Marketnavbarform h3 {
color: var(--white_text);
margin-bottom: 5px;
letter-spacing: 5px;
transition: .3s ease-in-out;
cursor: pointer;
font-size: 18px;
}
.Marketnavbarform h3:hover {
color: rgba(255, 0, 0, .8);
}
.Marketnavbarform h3:active {
font-size: 20px;
transition: .1s;
}
.Marketnavbarform select {
padding: 5px;
font-weight: bold;
border-radius: 10px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
color: var(--black_redish);
width: 200px;
transition: .3s ease-in-out;
cursor: pointer;
background: white;
border: 1px solid var(--white_text);
}
.Marketnavbarform select:hover {
background: rgba(225, 225, 225, .05);
color: var(--gold_yellow);
letter-spacing: 3px;
}
.Marketnavbarform option {
color: var(--gold_yellow);
background: #000000;
}
.search {
display: flex;
align-items: center;
}
.Marketsearchbotton {
padding: 20px;
font-size: 20px;
border-radius: 40px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
letter-spacing: 1px;
cursor: pointer;
transition: .3s ease;
font-weight: bold;
}
.Marketsearchbotton:hover {
letter-spacing: 2px;
}
.Marketsearch {
display: flex;
flex-direction: row;
}
.Marketsearch .Marketsearchy {
border: 2px solid var(--white_text);
padding: 20px;
background: rgba(183, 0, 255, 0.08);
font-size: 18px;
border-radius: 30px;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
color: var(--white_text);
transition: .3s ease;
}
.Marketsearch .Marketsearchy:hover {
letter-spacing: 3px;
border-bottom: 5px solid var(--white_text);
}
.Marketsearch .Marketsearchy:focus {
letter-spacing: 3px;
border-bottom: 5px solid var(--white_text);
}
.Marketsearch .Marketsearchy::placeholder {
color: var(--white_text);
}
.MarketMainNav {
padding: 20px;
height: fit-content;
}
.slideshowframework {
padding: 20px;
color: var(--white_text);
height: fit-content;
}
.statement {
padding: 20px;
display: flex;
justify-content: center;
width: 100%;
}
.statement h3 {
font-size: 40px;
}
.slideshow {
border-radius: 20px;
height: fit-content;
padding: 20px;
padding-top: 40px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, auto));
gap: 20px;
}
.slide01 {
border: 2px solid var(--white_text);
border-radius: 30px;
width: 250px;
height: 360px;
padding: 10px;
display: flex;
flex-direction: column;
gap: 20px;
overflow: hidden;
background: rgba(183, 0, 255, .05);
}
.slide01:hover {
background: rgba(255, 255, 255, 1);
color: rgba(0, 0, 0, 1);
border: 2px solid rgba(0, 0, 0, 1);
}
.imgguy {
overflow: hidden;
border: 2px solid var(--white_text);
border-radius: 30px;
width: 250px;
height: 250px;
background: black;
}
.imgguy h2{
display: none;
}
.imgslide{
width: 250px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
}
.imgslide img {
width: 250px;
height: 250px;
transition: .4s ease;
}
.imgslide img:hover {
width: 300px;
cursor: pointer;
}
.slideinfo {
display: flex;
flex-direction: column;
gap: 10px;
}
.slideinfo h4 {
letter-spacing: 2px;
font-weight: normal;
display: flex;
align-items: center;
gap: 10px;
}
.slideinfo h4 strong{
font-weight: normal;
}
.markme {
font-weight: lighter;
}
.markmename {
color: var(--gold_yellow);
font-weight: bold;
}
.markmeprice {
color: var(--green_rare);
font-weight: bold;
}
cyan{
color: rgba(0, 255, 255, .8);
}
.SettingspageMain {
margin-top: 200px;
padding: 40px;
display: flex;
align-items: center;
flex-direction: column;
gap: 50px;
}
.settingcontainerjar {
border-top: 0.5px solid var(--white_text);
border-bottom: 0.5px solid var(--white_text);
padding: 40px;
border-radius: 20px;
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.myprofile, .myprivacy {
padding: 10px;
display: flex;
gap: 200px;
width: 100%;
justify-content: center;
}
.myprofile input {
border-radius: 10px;
}
.setmystufftext {
height: fit-content;
padding: 10px;
border-radius: 10px;
}
.setmystufftext h2 {
font-size: 40px;
}
.accsettnotice{
display: flex;
justify-content: center;
align-items: center;
border: 2px solid var(--white_text);
flex-direction: column;
gap: 10px;
width: 50%;
border-radius: 20px;
padding: 10px;
height: fit-content;
}
.setmystufftext quotin {
color: rgba(255, 0, 0, .8);
}
.myprofilestuff, .myprivacystuff {
width:50%;
padding: 10px;
border-radius: 20px;
background: rgba(183, 0, 255, 0.05);
display: flex;
flex-direction: column;
}
.privacystuffallocations, .profilestuffsection {
padding: 5px;
margin: 5px;
display: flex;
justify-content: space-between;
padding-top: 20px;
}
.SettingspageMain h2 {
color: var(--white_text);
}
.SettingspageMain p {
color: var(--white_text);
font-size: 16px;
width: fit-content;
border-bottom: 1px solid linen;
padding: 5px;
border-radius: 5px;
height: fit-content;
letter-spacing: 3px;
transition: .5s ease-in-out;
}
.SettingspageMain p:hover {
color: rgba(255, 0, 0, .8);
}
.accsetbtns {
width: 100%;
display: flex;
flex-direction: row;
padding: 20px;
justify-content: space-between;
}
.accsavebtn, .accdisbtn {
padding: 10px;
font-size: 30px;
border: 2px solid black;
border-radius: 30px;
padding-left: 20px;
padding-right: 20px;
transition: .3s ease;
cursor: pointer;
font-weight: bold;
}
.modal-content .accsavebtn{
margin-top: 20px;
}
.accsavebtn {
background: white;
color: var(--black_redish);
}
.accsavebtn:hover {
background: transparent;
color: var(--gold_yellow);
border: 2px solid var(--white_text);
}
.accdisbtn {
background: transparent;
border: 2px solid rgba(255, 0, 0, 0.9);
color: rgba(255, 0, 0, 0.9);
font-weight: bold;
}
.accdisbtn:hover {
background: rgba(255, 0, 0, 0.9);
color: black;
border: none;
}
.deleteaccount {
width: 100%;
display: flex;
justify-content: center;
padding: 20px;
}
.deleteacstaffa {
color: black;
font-size: 20px;
font-weight: bold;
border: 2px solid red;
padding: 10px;
border-radius: 20px;
background: red;
transition: .3s ease;
cursor: pointer;
}
.deleteacstaffa:hover {
background: transparent;
color: red;
}
.acctxt{
background: rgba(255, 255, 255, 1 );
width: 50%;
padding: 5px;
font-size: 15px;
border: 2px solid black;
font-weight: bold;
}
.yo{
border: none;
padding: 10px;
border-radius: 20px;
color: white;
background: rgba(183, 0, 255, 0.05);
border: 2px solid white;
width: 50%;
font-weight: bold;
cursor: pointer;
}
.yo option{
background: black;
font-weight: bold;
cursor: pointer;
}
.txtar{
width: 60%;
font-size: 15px;
padding: 5px;
font-weight: bold;
}
.txtars{
width: 50px;
font-size: 15px;
padding: 5px;
font-weight: bold;
border: solid red 2px;
}
.profile-pic-container {
position: relative;
width: 150px;
height: 150px;
margin: 0 auto;
}
.accsprofimmg {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--white_text);
transition: .3s ease;
}
.accsprofimmg:hover {
border: 4px solid var(--white_text);
}
.camera-icon {
position: absolute;
bottom: 5px;
right: 5px;
width: 40px;
height: 40px;
background-color: rgba(255, 0, 0, .8);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s, transform 0.2s;
}
.camera-icon:hover {
background-color: rgb(65, 0, 91);
transform: scale(1.1);
}
.camera-icon svg {
color: white;
width: 20px;
height: 20px;
}
.userprofpic {
display: none;
}
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(5px);
overflow: auto;
}
.modal-content {
background-color: rgba(0, 0, 0, 0.8);
margin: 5% auto;
padding: 20px;
border: 2px solid var(--white_text);
border-radius: 40px;
width: 80%;
max-width: 800px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.modal-header {
padding: 15px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 10px;
margin-bottom: 20px;
}
.modal-header h3 {
margin: 0;
color: var(--white_text);
}
.close {
color: #aaa;
font-size: 28px;
font-weight: bold;
cursor: pointer;
line-height: 20px;
transition: .3s ease;
}
.close:hover, .close:focus {
color: var(--gold_yellow);
text-decoration: none;
}
.modal-body {
padding: 20px;
display: flex;
flex-wrap: wrap;
max-height: 60vh;
overflow-y: auto;
flex-direction: column;
gap: 10px;
}
.crop-container {
flex: 2;
min-width: 300px;
position: relative;
margin-right: 20px;
}
.preview-container {
flex: 1;
min-width: 150px;
text-align: center;
}
.preview-container h4 {
margin-top: 0;
margin-bottom: 10px;
color: var(--white_text);
}
#imageCanvas {
max-width: 100%;
display: block;
}
#previewCanvas {
width: 150px;
height: 150px;
border: 1px solid rgba(183, 0, 255, 0.5);
border-radius: 50%;
object-fit: cover;
}
#cropBox {
position: absolute !important;
box-sizing: border-box !important;
cursor: move !important;
display: block !important;
border: 2px solid rgba(255, 0, 0, 0.9) !important;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5), 0 0 0 9999px rgba(0, 0, 0, 0.65) !important;
z-index: 999 !important;
}
#cropBox::before, #cropBox::after {
content: '';
position: absolute;
border: 1px solid rgba(255, 255, 255, 0.8);
}
#cropBox::before {
content: "";
position: absolute;
top: 0; left: 33%; right: 33%; bottom: 0;
border-left: 1px solid rgba(255,255,255,0.3);
border-right: 1px solid rgba(255,255,255,0.3);
pointer-events: none;
}
#cropBox::after {
content: "";
position: absolute;
top: 33%; left: 0; right: 0; bottom: 33%;
border-top: 1px solid rgba(255,255,255,0.3);
border-bottom: 1px solid rgba(255,255,255,0.3);
pointer-events: none;
}
.modal-footer {
margin-top: 20px;
text-align: right;
}
.btn {
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-left: 10px;
transition: .3s ease;
}
.btn-primary {
background-color: #4CAF50;
color: white;
}
.btn-secondary {
background-color: rgba(255, 255, 255, 0.2);
color: var(--white_text);
}
.btn:hover {
opacity: 0.9;
}
.wspacebigframe {
color: var(--white_text);
height: fit-content;
display: flex;
align-items: center;
flex-direction: column;
}
.top_container {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
width: 80%;
}
.wspaceintro {
margin-top: 150px;
height: 450px;
padding: 40px;
display: flex;
flex-direction: column;
align-items: center;
gap: 50px;
width: 80%;
}
.wspaceintrobigtext {
height: fit-content;
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
padding: 10px;
}
.sway {
width: 200px;
height: 200px;
border: 2px solid var(--gold_yellow);
border-radius: 100px;
transition: .3s ease;
cursor: pointer;
}
.sway:hover {
border: 5px solid var(--gold_yellow);
}
.wlspaceintroname {
font-size: 30px;
font-weight: lighter;
color: var(--white_text);
letter-spacing: 4px;
}
.wspaceextradetail {
border: 1px solid var(--white_text);
background: rgba(183, 0, 255, 0.08);
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 100px;
padding: 20px;
}
.wspaceextradetail h2 {
font-weight: lighter;
display: flex;
align-items: center;
}
.prosupsupporter {
font-size: 20px;
font-weight: bold;
color: var(--gold_yellow);
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
.prosupsupporting {
font-size: 20px;
font-weight: bold;
color: var(--green_rare);
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
.wrkspace_textsup{
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.wspaceposts {
height: fit-content;
padding: 40px;
margin-top: 80px;
width: 90%;
}
.wspacepostextraoptions {
border-top: 1px solid white;
border-radius: 30px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
background: rgba(183, 0, 255, 0.08);
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 20px;
}
.leftyosa h2 {
font-weight: lighter;
font-size: 25px;
}
.rightyosa {
display: flex;
flex-direction: row;
gap: 10px;
}
.rightyosa h3 {
font-weight: lighter;
font-size: 25px;
}
.wspacecard {
margin-top: 20px;
border-radius: 20px;
padding: 10px;
padding-top: 40px;
display: grid;
height: fit-content;
grid-template-columns: repeat(auto-fit, minmax(240px, auto));
gap: 20px;
background: rgba(183, 0, 255, 0.08);
}
.fpostcards {
border: none;
border-radius: 20px;
padding: 10px;
width: 240px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.workspacenewpost {
width: 200px;
transition: .3s ease-in-out;
cursor: pointer;
}
.workspacenewpost:hover {
width: 210px;
}
.opostcards {
border: 2px solid var(--white_text);
border-radius: 20px;
width: 250px;
height: 320px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.opostcardscont {
border-radius: 20px;
width: 250px;
height: 320px;
display: flex;
flex-direction: column;
overflow: hidden;
align-items: center;
justify-content: center;
}
.opostimg{
width: 330px;
height: 330px;
display: flex;
justify-content: center;
align-items: center;
}
.opostimgpic {
width: 330px;
height: 330px;
cursor: pointer;
}
.opostdescr {
position: absolute;
width: 250px;
height: 320px;
overflow: hidden;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.opostdescr:hover {
backdrop-filter: blur(5px);
background: rgba(0, 0, 0, .4);
}
.opostdescr h3 {
height: 100%;
display: flex;
align-items: center;
color: rgba(0, 0, 0, 0);
font-weight: lighter;
letter-spacing: 2px;
padding: 10px;
transition: .3s ease-in-out;
width: 100%;
justify-content: center;
align-items: center;
}
.opostdescr h3:hover {
color: white;
cursor: pointer;
}
.wspaceuploadpost {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(3px);
overflow-y: auto;
}
.wspaceuploadpost.aftereffects {
display: flex;
justify-content: center;
align-items: flex-start;
padding: 20px 0;
box-sizing: border-box;
}
.wspaceuploadpostcont {
border: 2px solid var(--white_text);
border-radius: 30px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 20px;
color: var(--white_text);
max-width: 90%;
max-height: none;
overflow-y: visible;
background: rgba(0, 0, 0, .1);
backdrop-filter: blur(5px);
box-sizing: border-box;
margin: 20px 0;
}
.wspaceuploadpostleftside {
border: 2px solid red;
border-radius: 30px;
width: 100%;
max-width: 350px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.wspaceuploadpostrightside {
border-radius: 20px;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
}
.wspaceuploadpostrightside h2 {
font-weight: lighter;
font-size: 20px;
margin-bottom: 5px;
}
.exitwspaceuploadpost {
display: flex;
justify-content: center;
padding: 5px;
border-radius: 10px;
transition: .3s ease-in-out;
}
.exitwspaceuploadpost:hover {
color: red;
cursor: pointer;
}
.capupload {
width: 100%;
padding: 6px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.1);
color: var(--white_text);
font-family: inherit;
margin-bottom: 8px;
box-sizing: border-box;
}
.wsuploadbtn {
display: flex;
justify-content: center;
}
.uploadsubmit {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
font-size: 16px;
transition: background-color 0.3s;
margin-top: 10px;
}
.uploadsubmit:hover {
background-color: #45a049;
}
.form-section {
margin-bottom: 15px;
padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
background-color: rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px
}
.section-title {
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
color: var(--white_text);
font-size: 16px;
}
.price-input-container {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.price-input {
flex: 1;
min-width: 150px;
}
.currency-select {
min-width: 120px;
}
.post-meta {
display: flex;
gap: 8px;
margin-top: 5px;
}
.trade-type-badge, .condition-badge {
padding: 3px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: bold;
color: white;
}
.trade-type-badge {
background-color: #4CAF50;
}
.condition-badge {
background-color: #2196F3;
}
select.capupload {
cursor: pointer;
}
.privacycheckbox {
margin-right: 8px;
}
small {
color: rgba(255, 255, 255, 0.7);
font-size: 12px;
display: block;
margin-top: 5px;
}
.postviewarea {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(2px);
overflow-y: auto;
}
.postviewarea.aftereffects {
display: flex;
justify-content: center;
align-items: flex-start;
padding: 20px 0;
box-sizing: border-box;
}
.postviewareainner {
border: 2px solid var(--white_text);
border-radius: 20px;
width: 80%;
overflow-y: visible;
background: rgba(0, 0, 0, 0.8);
padding: 20px;
}
.postviewareatop {
display: flex;
justify-content: flex-end;
padding: 10px;
}
.postviewareaextibtn {
color: var(--white_text);
font-weight: bolder;
cursor: pointer;
font-size: 24px;
background: none;
border: none;
transition: .3s ease;
}
.postviewareaextibtn:hover {
color: red;
}
.postviewareaprev, .postviewareanext {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.arrowleftropfnav, .arrowrightnav {
width: 40px;
height: 40px;
transition: 0.2s;
}
.arrowleftropfnav:active, .arrowrightnav:active {
width: 40px;
height: 40px;
transition: .3s ease;
}
.arrowleftropfnav,.arrowrightnav{
transform: rotateZ(-90deg);
}
.postviewareaprddesc {
flex: 1;
min-width: 250px;
border-radius: 20px;
padding: 20px;
overflow-y: auto;
max-height: 600px;
}
.postdescrtextgang {
color: var(--white_text);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 8px;
margin-bottom: 12px;
font-weight: lighter;
font-size: 16px;
}
.postdescrtextgang span {
color: var(--gold_yellow);
font-weight: normal;
}
.deletepostcont {
margin-top: 20px;
}
.deletepost {
padding: 8px 16px;
background-color: rgba(255, 0, 0, 0.7);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
transition: background-color 0.3s;
}
.deletepost:hover {
background-color: rgba(255, 0, 0, 0.9);
}
.availability-badge {
padding: 4px 8px;
border-radius: 4px;
font-size: 0.8rem;
font-weight: bold;
text-transform: uppercase;
}
.availability-available {
background-color: #d4edda;
color: #155724;
}
.availability-unavailable {
background-color: #f8d7da;
color: #721c24;
}
.availability-reserved {
background-color: #fff3cd;
color: #856404;
}
.availability-control {
margin: 10px 0;
}
.filter-section {
margin: 20px 0;
padding: 15px;
background-color: #f8f9fa;
border-radius: 5px;
}
.availability-filters {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.filter-btn {
padding: 8px 16px;
border: 1px solid #dee2e6;
border-radius: 4px;
text-decoration: none;
color: #495057;
background-color: #fff;
transition: all 0.2s;
}
.filter-btn:hover {
background-color: #e9ecef;
}
.filter-btn.active {
background-color: #007bff;
color: white;
border-color: #007bff;
}
.help-section{
padding: 5px;
display: flex;
flex-direction: column;
color: var(--white_text);
}
.postprdpicture {
max-width: 100%;
height: auto;
max-height: 400px;
object-fit: contain;
}
.postviewareainner{
display: flex;
flex-direction: column;
justify-content: center;
width: 80%;
}
.postviewareatop{
display: flex;
justify-content: center;
align-items: center;
}
.postviewareabottom{
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
gap:20px;
}
.postviewareaprev, .postviewareanext {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.arrowrightnav,.arrowleftropfnav{
width: 30px;
height: 30px;
}
.arrowrightnav:active,.arrowleftropfnav:active{
width: 40px;
height: 40px;
transition: .3s;
}
.postviewareaprdpreview{
border: 1px solid var(--white_text);
width: 300px;
height: 300px;
justify-content: center;
align-items: center;
overflow: hidden;
border-radius: 20px;
}
.postviewareaprdpreview{
display: flex;
align-items: center;
justify-content: center;
}
.postprdpicture{
display: flex;
width: 300px;
height: 300px;
}
.postdescrtextgang{
font-size: 16px;
}
.deletepostcont{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap:20px;
}
.availability-control{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.availability-select{
border: 2px solid var(--white_text);
background: transparent;
color: var(--gold_yellow);
font-size: 14px;
padding: 5px;
border-radius: 10px;
}
.availability-select option{
background: black;
color: var(--white_text);
}
.wspaceintroprof{
display: flex;
flex-direction: column;
gap: 50px;
align-items: center;
justify-content: center;
margin-top: 150px;
width: 90%;
}
.profilemsgframe {
display: flex;
justify-content: space-between;
}
.profmwah {
margin-top: 20px;
}
.wspaceintrobigtextprof {
height: fit-content;
display: flex;
flex-direction: row;
align-items: center;
gap: 30px;
padding: 10px;
width: 100%;
}
.profileseperation {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}
.wlspaceintronamep {
color: var(--white_text);
letter-spacing: 2px;
}
.wlspaceintronamepr {
font-size: 25px;
font-weight: lighter;
}
.prorating {
color: var(--green_rare);
font-weight: bolder;
cursor: pointer;
transition: .3s ease;
}
.prorating:hover {
letter-spacing: 3px;
}
.prosup {
color: red;
font-weight: bolder;
cursor: pointer;
transition: .3s ease;
}
.proups {
color: var(--gold_yellow);
font-weight: bolder;
cursor: pointer;
transition: .3s ease;
}
.proups:hover {
letter-spacing: 3px;
}
.wlspaceintronametypeuser, .wlspaceintronametypeuserL {
color: rgba(0, 255, 255, .8);
font-weight: lighter;
width: fit-content;
transition: .3s ease;
}
.wlspaceintronametypeuserL {
font-size: 20px;
}
.wlspaceintronametypeuser:hover {
letter-spacing: 3px;
}
.profsupport {
height: fit-content;
width: 100%;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
}
.btnsupporta{
padding: 10px;
background: transparent;
font-size: 15px;
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
border: 2px solid var(--white_text);
border-radius: 40px;
font-size: 18px;
color: var(--white_text);
text-decoration: none;
letter-spacing: 3px;
}
.btnsupporta2{
padding: 10px;
background: transparent;
font-size: 15px;
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
border: 2px solid var(--white_text);
border-radius: 40px;
font-size: 18px;
color: var(--white_text);
text-decoration: none;
letter-spacing: 3px;
}
.btnsupporta2:hover{
color:rgba(255, 0, 0, 0.9);
border: 2px solid rgba(255, 0, 0, 0.9);
letter-spacing: 4px;
cursor: pointer;
}
.btnsupporta:hover{
cursor: pointer;
}
.btnsupport{
font-size: 18px;
color: var(--white_text);
text-decoration: none;
letter-spacing: 3px;
}
.btnsupport:hover{
letter-spacing: 4px;
}
.profuserlinks {
padding: 40px;
}
.profuserlinkscont {
padding: 40px;
width: 400px;
display: flex;
flex-direction: column;
gap: 20px;
}
.proflinks {
border: 1px solid var(--white_text);
border-radius: 10px;
padding: 10px;
background: rgba(183, 0, 255, 0.08);
width: 400px;
height: fit-content;
}
.proflinks h3 {
color: rgba(0, 255, 255, .8);
font-weight: lighter;
letter-spacing: 2px;
}
.profuserlinkscont h2 {
color: var(--white_text);
font-weight: lighter;
}
.Searchbody {
height: fit-content;
padding: 40px;
}
.searchspace {
margin-top: 150px;
padding: 20px;
width: fit-content;
display: flex;
align-items: center;
justify-content: space-between;
gap: 50px;
}
.seachcont {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
width: fit-content;
height: fit-content;
flex-direction: row;
}
.Ssearchicon {
width: fit-content;
height: 35px;
padding: 50px;
font-size: 20px;
display: flex;
align-items: center;
border-radius: 50px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
cursor: pointer;
transition: .3s ease;
font-weight: bold;
}
.Ssearchicon:hover {
letter-spacing: 3px;
}
.Ssearch {
padding: 40px;
width: 400px;
border-radius: 50px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
font-size: 20px;
background: rgba(183, 0, 255, 0.08);
color: var(--white_text);
border: 1px solid var(--white_text);
transition: .3s ease;
}
.Ssearch::placeholder {
color: var(--white_text);
}
.Ssearch:hover {
letter-spacing: 3px;
border-bottom: 10px solid var(--white_text);
}
.resultfor {
color: var(--white_text);
font-weight: lighter;
}
.searchrescontainer {
display: block;
padding: 20px;
height: fit-content;
}
.accdisappear {
display: block;
}
.prdctdisappear {
display: grid;
border-radius: 20px;
height: fit-content;
padding: 20px;
padding-top: 40px;
grid-template-columns: repeat(auto-fit, minmax(240px, auto));
gap: 20px;
}
.prdctdisappear.filterout, .accdisappear.filterout {
display: none;
}
.searchdescr {
color: var(--white_text);
}
.Searchresults {
border: 1px solid var(--white_text);
border-radius: 40px;
color: var(--white_text);
display: flex;
flex-direction: row;
height: 150px;
align-items: center;
padding: 10px;
gap: 70px;
letter-spacing: 2px;
background: rgba(183, 0, 255, 0.08);
width: 75%;
overflow: hidden;
}
.searchusericon {
width: 100px;
height: 100px;
}
.srprimgnow, .srprimgnowprd {
border: 3px solid var(--gold_yellow);
height: 100px;
width: 100px;
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: .3s ease;
}
.srprimgnow:hover {
cursor: pointer;
border: 5px solid var(--gold_yellow);
}
.srprimgnowprd:hover {
cursor: pointer;
border: 5px solid var(--white_text);
}
.sdecision {
display: flex;
justify-content: center;
align-items: center;
}
.sdivider {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 75%;
}
.sdivider a.active {
color: rgba(0, 255, 255, .8);
background: transparent;
border: 2px solid rgba(0, 255, 255, .8);
}
.sprdctsy, .sacconts, .sall {
font-weight: bold;
font-size: 20px;
color: var(--black_redish);
background: var(--white_text);
padding: 5px;
border-radius: 20px;
border: 2px solid var(--white_text);
}
.sprdctsy:hover, .sacconts:hover, .sall:hover {
color: var(--white_text);
background: transparent;
border: 2px solid var(--white_text);
cursor: pointer;
letter-spacing: 2px;
}
.pagination-controls{
margin-top: 50px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 20px;
}
.pagination-btn{
font-weight: bold;
font-size: 20px;
color: var(--black_redish);
background: var(--white_text);
padding: 5px;
border-radius: 20px;
border: 2px solid var(--white_text);
}
.pagination-btn:hover{
letter-spacing: 2px;
}
.next_pervious{
color: var(--white_text);
font-weight: lighter;
}
.prextradetails {
display: flex;
flex-direction: column;
gap: 10px;
width: 80%;
}
.srprofileimg{
width: 20%;
}
.prextradetails h2 {
color: var(--white_text);
font-weight: lighter;
}
.prextradetailsbio {
font-weight: lighter;
font-size: 20px;
}
.Searchresults .prdctcolo {
color: var(--green_rare);
}
.Searchresults .unamectcolo {
color: var(--gold_yellow);
}
.prextradetails .cyanguy {
color: rgba(0, 255, 255, .8);
font-size: 18px;
}
.srchopostdescr {
position: absolute;
width: 250px;
height: 320px;
overflow: hidden;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.srchopostdescr:hover{
backdrop-filter: blur(5px);
}
.srchopostdescr h3 {
background: rgba(0, 0, 0, .8);
height: fit-content;
font-weight: lighter;
letter-spacing: 2px;
padding: 5px;
transition: .3s ease-in-out;
width: fit-content;
line-height: 30px;
font-size: 16px;
color: white;
border-radius: 5px;
}
.srchopostdescr h3:hover {
cursor: pointer;
}
.POCmain {
margin-top: 200px;
height: fit-content;
padding: 20px;
display: flex;
flex-direction: column;
}
.POCidentity, .POCvision, .POCextramessage {
height: 300px;
padding: 20px;
display: flex;
justify-content: space-between;
}
.POCcredits {
height: fit-content;
padding: 20px;
display: flex;
flex-direction: column;
gap: 30px;
}
.POCmainimtext {
color: var(--white_text);
font-weight: lighter;
letter-spacing: 3px;
font-size: 25px;
}
.POCmainimtexty {
color: var(--white_text);
font-weight: lighter;
letter-spacing: 3px;
font-size: 20px;
line-height: 30px;
}
.fl1 {
width: 600px;
padding: 10px;
border-radius: 20px;
display: flex;
flex-direction: column;
gap: 10px;
background: rgba(183, 0, 255, 0.05);
}
reddar {
color: rgba(255, 0, 0, .8);
}
cyanara {
color: rgb(0, 255, 255, .8);
transition: .3s ease;
}
cyanara:hover {
letter-spacing: 5px;
}
greenara {
color: var(--gold_yellow);
}
.fl2 {
border: 2px solid var(--white_text);
width: 600px;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.authtext {
display: flex;
flex-direction: column;
gap: 10px;
background: rgba(183, 0, 255, 0.08);
padding: 20px;
border-radius: 20px;
width: 600px;
align-items: center;
}
.authtext p{
color: var(--white_text);
}
.authcont {
width: 100%;
display: flex;
justify-content: space-between;
padding: 10px;
gap: 20px;
}
.authpic {
border: 2px solid var(--white_text);
width: 300px;
border-radius: 150px;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
margin-right: 200px;
overflow: hidden;
}
.testin {
width: 310px;
transition: .3s ease-in-out;
}
.testin:hover {
width: 340px;
cursor: pointer;
}
.testinae {
width: 650px;
height: 330px;
transition: .5s ease-in-out;
}
.testinae:hover {
width: 670px;
height: 350px;
cursor: pointer;
}
.Delegatemsgsection {
margin-top: 150px;
padding: 40px;
}
.TCstuffframe {
margin-top: 200px;
padding: 40px;
height: fit-content;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
gap: 40px;
}
.TCstuffcont {
width: 600px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 20px;
}
.TCheader {
color: var(--white_text);
font-weight: lighter;
letter-spacing: 2px;
font-size: 25px;
}
.TCpar {
color: var(--white_text);
font-weight: lighter;
padding: 20px;
border-radius: 20px;
letter-spacing: 2px;
font-size: 18px;
line-height: 20px;
background: rgba(183, 0, 255, 0.08);
}
.TCBack_btn{
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.tcbackdoorimg{
width: 25px;
}
.tcbackdoorimg:hover{
width: 30px;
}
.rating-container {
display: flex;
align-items: center;
gap: 8px;
justify-content: center;
align-items: center;
}
.rating-label {
font-weight: 600;
color: var(--white_text);
}
.rating-stars {
position: relative;
display: inline-block;
font-size: 24px;
line-height: 1;
}
.stars-background, .stars-fill {
display: flex;
}
.stars-background {
color: transparent;
}
.stars-fill {
position: absolute;
top: 0;
left: 0;
white-space: nowrap;
overflow: hidden;
color: #ffc107;
}
.star {
display: inline-block;
text-align: center;
width: 24px;
}
.rating-number {
font-weight: 600;
color: var(--green_rare);
font-size: 18px;
}
.rating-count {
color: rgba(255, 0, 0, .8);
font-size: 16px;
cursor: pointer;
transition: .3s ease;
}
.rating-count:hover {
letter-spacing: 2px;
}
.rating-stars.interactive .star {
cursor: pointer;
transition: color 0.2s;
}
.rating-stars.interactive .star:hover {
color: #ff9800;
}
.rating-stars.interactive .star.selected, .rating-stars.interactive .star:hover {
color: #ffc107;
}
.supporter-rating {
display: flex;
align-items: center;
justify-content: center;
margin-top: 8px;
gap: 5px;
}
.rating-stars.small {
position: relative;
display: inline-block;
font-size: 14px;
line-height: 1;
}
.rating-number.small {
font-weight: 600;
color: var(--green_rare);
font-size: 14px;
}
.rating-count.small {
color: rgba(255, 0, 0, .8);
font-size: 12px;
}
.no-rating.small {
color: rgba(255, 255, 255, 0.6);
font-size: 12px;
font-style: italic;
}
.supporters-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
padding: 20px 0;
width: 100%;
}
.supporter-card {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 15px;
text-align: center;
transition: transform 0.3s, background-color 0.3s;
}
.supporter-card:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.15);
}
.supporter-image {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--gold_yellow);
margin-bottom: 10px;
}
.supporter-info {
color: var(--white_text);
}
.supporter-name {
font-size: 14px;
margin: 5px 0;
font-weight: bold;
}
.supporter-username p{
font-size: 12px;
margin: 0;
color: #45a049;
}
.no-supporters {
text-align: center;
color: var(--white_text);
font-style: italic;
padding: 20px;
}
.clickable {
cursor: pointer;
transition: color 0.3s;
}
.rate_btn{
padding: 10px;
background: var(--white_text);
font-size: 20px;
letter-spacing: 2px;
border-radius: 20px;
width: fit-content;
height: fit-content;
font-weight: bold;
color: rgba(0, 255, 255, .8);
border: 2px solid rgba(0, 255, 255, .8);
background: transparent;
}
.rate_btn:hover{
cursor: pointer;
background: rgba(0, 255, 255, .8);
color: black;
}
.reviews-container{
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
}
.review_rater_stuff{
border:2px solid var(--white_text);
border-left: 4px solid var(--white_text) ;
border-radius: 20px;
overflow: hidden;
padding: 10px;
width: fit-content;
margin-top:20px;
}
.review_rater_stuff2{
border:1px solid red;
border-left: 4px solid red ;
border-radius: 20px;
overflow: hidden;
padding: 10px;
width: fit-content;
margin-top:20px;
}
.review-item {
padding: 15px 0;
transition: background-color 0.2s;
padding: 10px;
border-radius: 20px;
background: rgba(183, 0, 255, 0.08);
width: 90%;
}
.review-item:last-child {
border-bottom: none;
}
.review-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding: 10px;
}
.review-rater {
font-weight: bold;
color: var(--gold_yellow);
font-size: 20px;
}
.review-rating {
display: flex;
flex-direction: row;
}
.review-date {
display: none;
color: var(--white_text);
font-size: 0.8em;
}
.review-content {
margin-bottom: 10px;
line-height: 1.5;
}
.seller-reply, .rater-reply {
padding: 12px 15px;
border-radius: 5px;
margin-top: 15px;
box-shadow: 5px 5px 10px rgba(255, 255, 255, 0.4);
}
.rater-reply {
background-color: #f9f9f9;
border-left-color: #2196F3;
}
.seller-reply{
border:1px solid var(--white_text);
border-left: 4px solid #4CAF50;
}
.seller-reply p{
color: white;
}
.reply-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
padding-bottom: 5px;
border-bottom: 1px solid #eee;
}
.reply-author {
font-weight: bold;
color: var(--white_text);
font-size: 0.9em;
}
.seller-reply .reply-author {
color: #4CAF50;
}
.rater-reply .reply-author {
color: #2196F3;
}
.reply-date {
color: #777;
font-size: 0.8em;
}
.reply-content {
line-height: 1.5;
color: #444;
margin-top: 5px;
}
.reply-form {
margin-top: 15px;
padding: 10px;
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.reply-form textarea{
border-color: #4CAF50;
outline: none;
width: 80%;
border-radius: 20px;
padding: 10px;
font-size: 16px;
}
.reply-form textarea:focus {
border-color: #4CAF50;
outline: none;
box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}
.reply-btn {
margin-top: 10px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
transition: background-color 0.3s;
}
.reply-btn:hover {
background-color: #45a049;
}
.success-message {
background-color: #dff0d8;
color: #3c763d;
padding: 10px 15px;
border-radius: 4px;
margin-bottom: 15px;
border: 1px solid #d6e9c6;
}
.loading {
text-align: center;
padding: 30px;
color: #666;
font-style: italic;
}
.no-reviews {
text-align: center;
padding: 30px;
color: #666;
font-style: italic;
background-color: #f9f9f9;
border-radius: 5px;
margin: 20px 0;
}
.error-message {
color: #d9534f;
padding: 15px;
background-color: #f9f2f2;
border-radius: 4px;
margin-bottom: 15px;
border: 1px solid #ebccd1;
}
.modal-body {
max-height: 70vh;
overflow-y: auto;
padding-right: 10px;
}
.modal-body::-webkit-scrollbar {
width: 8px;
}
.modal-body::-webkit-scrollbar-track {
background: #505050;
border-radius: 4px;
}
.modal-body::-webkit-scrollbar-thumb {
background: #e6e6e6;
border-radius: 4px;
}
.modal-body::-webkit-scrollbar-thumb:hover {
background: #e6e6e6;
}
.rating-input{
display: flex;
align-items: center;
justify-content: center;
height: 200px;
border: 3px solid lime;
}
.review-rating {
display: inline-flex;
align-items: center;
margin: 0 10px;
}
.review-rating .star {
color: #ddd;
font-size: 16px;
margin-right: 2px;
transition: color 0.2s ease;
}
.review-rating .star.filled {
color: #ffc107;
}
.advanced-filters {
margin: 20px 0;
background-color: #f8f9fa;
border-radius: 8px;
padding: 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.filter-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
}
.filter-header h3 {
margin: 0;
color: #333;
}
.toggle-btn {
background-color: #4CAF50;
color: white;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
}
.toggle-btn:hover {
background-color: #45a049;
}
.filter-content {
display: none;
}
.filter-content.show {
display: block;
}
.filter-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 15px;
}
.filter-group {
flex: 1;
min-width: 200px;
}
.filter-group h3 {
margin-bottom: 10px;
color: #333;
font-size: 16px;
}
#priceSlider {
margin: 15px 0;
height: 8px;
}
.price-display {
display: flex;
justify-content: space-between;
font-size: 14px;
color: #666;
}
.filter-group select {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
background-color: white;
font-size: 14px;
}
.apply-filters-btn, .reset-filters-btn {
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
margin-right: 10px;
transition: background-color 0.3s;
}
.apply-filters-btn {
background-color: #4CAF50;
color: white;
}
.apply-filters-btn:hover {
background-color: #45a049;
}
.reset-filters-btn {
background-color: #f44336;
color: white;
}
.reset-filters-btn:hover {
background-color: #d32f2f;
}
.results-section {
margin-top: 20px;
}
.results-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #ddd;
}
.mofaya{
font-size: 18px;
color: rgba(86, 86, 86, 0.8);
font-weight: bold;
}
.results-header h3 {
margin: 0;
color: rgba(86, 86, 86, 0.8);
font-size: 18px;
}
#resultsCount {
color: #666;
font-size: 14px;
}
.loading-indicator {
text-align: center;
padding: 20px;
color: #666;
}
.loading-indicator.hidden {
display: none;
}
.no-results {
text-align: center;
padding: 30px;
color: #666;
font-style: italic;
background-color: #f9f9f9;
border-radius: 5px;
margin: 20px 0;
}
.ic-modal-overlay {
display: none !important;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(2px);
z-index: 9999;
align-items: center;
justify-content: center;
padding: 20px;
}
.ic-modal-container {
background: rgba(0, 0, 0, .8);
width: 100%;
max-width: 850px;
border-radius: 20px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
border: 2px solid var(--white_text);
}
.ic-modal-header {
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.ic-modal-body {
display: flex;
flex-direction: row;
background: #111;
}
.ic-crop-workspace {
flex: 2;
padding: 30px;
display: flex;
align-items: center;
justify-content: center;
min-height: 400px;
background: rgba(0, 0, 0, 1);
}
.ic-canvas-stage {
position: relative !important;
display: inline-block !important;
line-height: 0;
overflow: hidden !important;
border: 1px solid #444;
}
#imageCanvas {
max-width: 100%;
max-height: 60vh;
border-radius: 4px;
}
.ic-crop-box-ui {
position: absolute;
cursor: move;
border: 2px solid #fff;
box-sizing: border-box;
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
z-index: 10;
}
.ic-crop-box-ui::before, .ic-crop-box-ui::after {
content: '';
position: absolute;
pointer-events: none;
border: 0.5px solid rgba(255,255,255,0.3);
}
.ic-crop-box-ui::before { top: 33.33%; bottom: 33.33%; left: 0; right: 0; border-left: 0; border-right: 0; }
.ic-crop-box-ui::after { left: 33.33%; right: 33.33%; top: 0; bottom: 0; border-top: 0; border-bottom: 0; }
.ic-sidebar {
flex: 1;
background: rgba(0, 0, 0, 1);
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.ic-action-stack{
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 80%;
}
.ic-preview-section{
display: flex;
flex-direction: column;
align-items: center;
}
.ic-label{
color: var(--white_text);
}
.ic-preview-wrapper {
width: 140px;
height: 140px;
border-radius: 50%;
overflow: hidden;
margin: 20px 0;
border: 2px solid rgba(0, 255, 255, .8);
}
#previewCanvas { width: 100%; height: 100%; object-fit: cover; }
.ic-btn-primary {
background: var(--white_text);
color: var(--black_redish);
border: 2px solid black;
letter-spacing: 2px;
font-weight: bolder;
font-size: 12px;
padding: 10px; border-radius: 50px; cursor: pointer; width: 80%;
}
.ic-btn-ghost {
background: rgba(0, 0, 0, 1);
color: rgba(255, 0, 0, 0.9);
border: 2px solid rgba(255, 0, 0, 0.9);
letter-spacing: 2px;
padding: 10px; border-radius: 50px; font-weight: bolder;font-size: 12px; cursor: pointer; width: 80%;
}
.ic-btn-primary:hover{
letter-spacing: 4px;
background: transparent;
color: var(--gold_yellow);
border: 2px solid var(--white_text);
}
.ic-btn-ghost:hover{
letter-spacing: 4px;
color: rgba(0, 0, 0, 1);
background: rgba(255, 0, 0, 0.8);
}
.ic-modal-header h3 {
color: var(--white_text);
}
@media (max-width: 768px) {
.ic-modal-container {
width: 98%;
max-height: 98vh;
margin: 5px;
border-radius: 20px;
}
.ic-modal-body {
flex-direction: column;
background: #111;
}
.ic-crop-workspace {
flex: 1;
padding: 15px;
min-height: 300px;
}
#imageCanvas {
max-height: 50vh;
width: auto;
}
.ic-sidebar {
flex: none;
border-left: none;
padding: 15px;
display: grid;
grid-template-columns: 80px 1fr;
gap: 15px;
align-items: center;
}
.ic-preview-wrapper {
width: 70px;
height: 70px;
margin: 0;
}
.ic-hint {
display: none;
}
.ic-action-stack {
flex-direction: row;
gap: 10px;
}
.ic-btn {
flex: 1;
padding: 10px 5px;
font-size: 0.85rem;
}
.ic-modal-header {
padding: 10px 15px;
}
.ic-modal-header h3 {
font-size: 1rem;
color: var(--white_text);
}
.filter-row {
flex-direction: column;
gap: 15px;
}
.filter-group {
min-width: auto;
}
.price-input-container {
flex-direction: column;
align-items: stretch;
}
.currency-select {
min-width: auto;
}
.post-meta {
flex-direction: column;
gap: 5px;
}
.postviewareaprev, .postviewareanext {
margin-top: 10px;
}
}
.following-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
border: 2px solid red;
width: 100%;
height: fit-content;
}
.following-card {
background-color: #f9f9f9;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.following-card:hover {
transform: translateY(-5px);
}
.following-image {
width: 100%;
height: 200px;
object-fit: cover;
}
.following-info {
padding: 15px;
}
.following-name {
margin: 0 0 5px 0;
font-size: 18px;
font-weight: bold;
}
.following-username {
margin: 0 0 10px 0;
color: #666;
font-size: 14px;
}
.following-rating {
display: flex;
align-items: center;
gap: 5px;
}
.rating-stars.small {
font-size: 14px;
}
.rating-number.small, .rating-count.small, .no-rating.small {
font-size: 12px;
color: #666;
}
.no-following {
text-align: center;
padding: 20px;
color: #666;
font-style: italic;
}
.scroll-down-btn {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 0.8);
border-radius: 50%;
cursor: pointer;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.scroll-down-btn:hover {
background-color: rgba(0, 0, 0, 0.9);
}
.scroll-down-btn.visible {
opacity: 1;
visibility: visible;
}
.scroll-down-btn {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 50px;
cursor: pointer;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.8);
}
.scroll-down-btn:hover {
background-color: transparent;
transform: translateX(-50%) scale(1.1);
}
.scroll-down-btn.visible {
opacity: 1;
visibility: visible;
}
.scroll-down-btn svg {
width: 100%;
height: 100%;
}
.scroll-down-btn circle {
transition: fill 0.2s ease;
}
.scroll-down-btn:hover circle {
fill: rgba(255, 0, 0, 0.9);
}
.scroll-down-btn path {
transition: stroke 0.2s ease;
}
.scroll-down-btn:hover path {
stroke: #ffffff;
stroke-width: 4;
}
.user-badges {
margin-top: 5px;
display: flex;
gap: 10px;
flex-direction: row;
width: fit-content;
height: fit-content;
}
.badge {
display: inline-block;
padding: 4px 10px;
font-size: 0.75em;
font-weight: bold;
border-radius: 12px;
text-transform: uppercase;
}
.following-badge .following_greendot{
width: 20px;
}
.follows_you_badge{
border: 2px sold red;
}
.follows_you_badge .following_Whitedot{
width: 20px;
}
.follows_you_badge .following_Whitedot:hover{
width: 25px;
}
.No_more_Posts{
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
flex-direction: column;
gap: 10px;
}
.No_more_Posts h1{
font-size: 12px;
color: var(--white_text);
font-weight: lighter;
letter-spacing: 5px;
}
.No_more_Posts p{
color: var(--white_text);
font-weight: bold;
letter-spacing: 5px;
font-size: 12px;
}
.no_post_yet_img{
width: 150px;
height: 150px;
}
.subscriptionsMain{
display: flex ;
flex-direction: column;
justify-content: center;
align-items: center;
padding:10px;
gap: 20px;
margin-top: 200px;
}
.payment_meth_header{
font-size: 14px;
color: var(--white_text);
font-weight: lighter;
letter-spacing: 5px;
}
.setmystufftextp {
margin-top: 20px;
font-size: 15px;
color: var(--white_text);
letter-spacing: 2px;
font-weight: lighter;
padding: 10px;
}
.payment_meh_pics{
gap: 20px;
width: 90%;
display: flex;
height: fit-content;
justify-content: space-between;
}
.p_m_main_container{
display: flex;
flex-direction: column;
gap: 30px;
padding-bottom: 50px;
}
.p_m_icon_cover{
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 50px;
overflow: hidden;
background: rgba(255, 255, 255, 1);
padding: 10px;
border-radius: 100px;
box-shadow: 0 0px 10px 2px rgba(0, 255, 255, .8);
}
.p_m_icon_cover:hover{
cursor: pointer;
box-shadow: 0 0px 10px 4px rgba(0, 255, 255, .8);
}
.p_m_icon_cover_a{
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 100px;
overflow: hidden;
background: rgba(255, 255, 255, 1);
padding: 10px;
border-radius: 100px;
box-shadow: 0 0px 10px 2px rgba(0, 255, 255, .8);
}
.p_m_icon_cover_a:hover{
cursor: pointer;
box-shadow: 0 0px 10px 4px rgba(0, 255, 255, .8);
}
.important_text{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 100px;
margin-bottom: 100px;
}
.important_text h2{
color: var(--white_text);
font-weight: bold;
font-size: 20px;
letter-spacing: 3px;
}
.p_m_icon{
width: 45px;
height: 45px;
transition: .3s ease-in-out;
}
.p_m_icon:hover{
width: 100%;
height: 100%;
cursor: pointer;
}
.p_m_tell_em,.p_m_tell_em2{
display: flex;
flex-direction: row;
gap:50px;
}
._m_tellem_img{
width: 300px;
height: 300px;
position: absolute;
}
.tell_em_pic{
border-radius: 500px;
width: 300px;
height: 300px;
overflow: hidden;
justify-content: center;
align-items: center;
box-shadow: 0 0 20px 5px white;
background-color: white;
}
.tell_em_descr{
display: flex;
flex-direction: column;
gap: 20px;
width: 500px;
height: 300px;
align-items: center;
padding: 5px;
}
._m_tellem_text{
color: var(--white_text);
font-size: 28px;
letter-spacing: 3px;
font-weight: lighter;
height: 25%;
}
._m_tellem_texty{
color: var(--white_text);
font-size: 18px;
font-weight: lighter;
letter-spacing: 2px;
height: 75%;
background: rgba(183, 0, 255, 0.1);
padding: 20px;
border-radius: 20px;
}
._m_tellem_textyy{
color: var(--white_text);
font-size: 18px;
font-weight: lighter;
letter-spacing: 2px;
height: 75%;
}
.p_m_modals_container{
position: absolute;
display: none;
justify-content: center;
align-items: center;
height: fit-content;
border: 20px solid red;
margin-top: -600px;
height: 1000px;
width: 1000px;
}
.p_m_modal1{
border: 2px solid var(--white_text);
width: 50%;
border-radius: 20px;
background: rgba(0, 0, 0, .4);
backdrop-filter: blur(3px);
height: 600px;
padding: 10px;
}
.p_m_descr{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
gap: 50px;
}
.wspaceuploadpostcont{
width: 60%;
display: flex;
flex-direction: column;
gap: 20px;
justify-content: center;
align-items: center;
}
.wspaceuploadpostrightside{
display: flex;
flex-direction: column;
gap:50px;
justify-content: center;
align-items: center;
}
.oploadform{
width: 80%;
}
.wspaceuploadpostleftside{
width: 300px;
height: 300px;
border: var(--white_text) solid 2px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.wsuploadpic{
width: 300px;
height: 300px;
}
.form-section h3{
font-size: 18px;
}
.form-section h2{
font-size: 16px;
}
.capupload{
font-size: 14px;
height: 50px;
}
.usrguidemain_pc{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 50px;
margin-top: 100px;
margin-bottom: 100px;
}
.userguideleft_pc{
display:flex ;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 20px;
padding: 10px;
}
.userguidepic_pc{
width: 600px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid var(--white_text);
overflow: hidden;
border-radius: 20px;
}
.ug_images_pc{
width: 600px;
height: auto;
}
.userguidedesc_pc{
width: 400px;
height: 300px;
display: flex;
align-items: center;
flex-direction: column;
gap:20px;
}
.ug_header{
font-size: 20px;
color: var(--white_text);
font-weight: lighter;
letter-spacing: 3px;
}
.ug_p{
font-size: 16px;
color: var(--white_text);
font-weight: lighter;
letter-spacing: 2px;
line-height: 20px;
}
.usrguidemain_mobile{
display: none;
}
.image-viewer-options {
position: absolute;
bottom: 60px;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 10px;
}
.image-viewer-btn {
background-color: rgba(255, 255, 255, 0.2);
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
}
.image-viewer-btn:hover {
background-color: rgba(255, 255, 255, 0.3);
}
.image-viewer-btn.rotate {
background-color: rgba(255, 165, 0, 0.3);
border-color: rgba(255, 165, 0, 0.5);
}
.image-viewer-btn.rotate:hover {
background-color: rgba(255, 165, 0, 0.5);
}
.image-viewer-modal {
display: none;
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
overflow: auto;
}
.image-viewer-content {
position: relative;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 90vh;
}
.close-image-viewer {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
cursor: pointer;
z-index: 10001;
}
.close-image-viewer:hover {
color: #bbb;
text-decoration: none;
}
#image-viewer-img {
max-width: 100%;
max-height: 90vh;
object-fit: contain;
transition: transform 0.3s ease;
}
.error-message {
color: #e74c3c;
font-size: 0.9rem;
margin-top: 5px;
margin-bottom: 10px;
min-height: 1.2em;
display: none;
}
.input_login.error {
border: 1px solid #e74c3c;
}
.contact-form{
display:flex;
flex-direction:column;
gap:20px;
align-items:center;
margin-top: 20px;
}
.form-group{
display: flex;
flex-direction: column;
gap:10px;
align-items: center;
}
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3);
backdrop-filter: blur(5px);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
transform: scale(1);
}
.loader-wrapper {
text-align: center;
}
.loader {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 20px;
}
.dot {
width: 15px;
height: 15px;
border-radius: 50%;
animation: pulse 1.5s infinite ease-in-out;
}
.dot:nth-child(1) { animation-delay: -0.32s;
background-color: var(--white_text); }
.dot:nth-child(2) { animation-delay: -0.16s;
background-color: red; }
.dot:nth-child(3) { animation-delay: 0s;
background-color: rgba(0, 255, 255, .8); }
@keyframes pulse {
0%, 80%, 100% {
transform: scale(0.8);
opacity: 0.5;
}
40% {
transform: scale(1.2);
opacity: 1;
}
}
.loading-text {
color: var(--white_text);
font-family: metropolis,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 1.5rem;
font-weight: 300;
letter-spacing: 2px;
}
#preloader.fade-out {
opacity: 0;
transform: scale(0.8);
}
@media (max-width : 1224px){
.Marketnavbarform h3 {
font-size: 15px;
}
.Marketnavbarform select {
padding: 5px;
font-weight: bold;
border-radius: 10px;
color: var(--black_redish);
width: 150px;
transition: .3s ease-in-out;
}
.Marketsearch .Marketsearchy {
border: 2px solid var(--white_text);
padding: 10px;
background: rgba(183, 0, 255, 0.08);
font-size: 15px;
border-radius: 30px;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.Marketsearch .Marketsearchy:hover {
letter-spacing: 3px;
border-bottom: 5px solid var(--white_text);
}
.Marketsearchbotton {
padding: 12px;
font-size: 15px;
border-radius: 40px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.postviewareainner{
display: flex;
flex-direction: column;
justify-content: center;
width: 80%;
}
.postviewareatop{
display: flex;
justify-content: center;
align-items: center;
}
.postviewareabottom{
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
gap:20px;
}
.postviewareaprev, .postviewareanext {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.arrowrightnav,.arrowleftropfnav{
width: 30px;
height: 30px;
}
.arrowrightnav:active,.arrowleftropfnav:active{
width: 40px;
height: 40px;
transition: .3s;
}
.postviewareaprdpreview{
border: 1px solid var(--white_text);
width: 300px;
height: 300px;
justify-content: center;
align-items: center;
overflow: hidden;
border-radius: 20px;
}
.postviewareaprdpreview{
display: flex;
align-items: center;
justify-content: center;
}
.postprdpicture{
display: flex;
width: 300px;
height: 300px;
}
.postdescrtextgang{
font-size: 16px;
}
.deletepostcont{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap:20px;
}
.availability-control{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.availability-select{
border: 2px solid var(--gold_yellow);
background: transparent;
color: var(--gold_yellow);
font-size: 16px;
}
.availability-select:hover{
border: 2px solid var(--gold_yellow);
background: var(--gold_yellow);
color: black;
}
.p_m_tell_em2,.p_m_tell_em{
gap:20px;
justify-content: center;
align-items: center;
}
.tell_em_descr{
width: 300px;
}
.tell_em_pic,._m_tellem_img{
width: 400px;
height: 250px;
}
._m_tellem_text{
font-size: 18px;
}
._m_tellem_texty{
font-size: 16px;
}
}
@media (max-width : 1150px){
.login_stuffo, .regestration_stuffo {
margin: 50px;
margin-top: 10px;
width: 400px;
height: 500px;
color: var(--white_text);
display: flex;
flex-direction: column;
padding: 30px;
border-radius: 100px;
transition: .6s ease;
left: 10px;
}
.herologintext h2 {
font-size: 20px;
}
.input_login {
padding: 10px;
border-radius: 25px;
border-top-right-radius: 0;
color: rgba(255, 0, 0, .8);
border: var(--white_text) 1px solid;
border-right: var(--white_text) 5px solid;
background: rgba(255, 255, 255, .05);
width: 200px;
font-size: 12px;
}
.robo_validation,.alternative{
font-size: 15px;
}
.logmsgp{
font-size: 12px;
}
.loginattention{
font-size: 16px;
}
.logbtnframe .loginbtn {
color: var(--black_redish);
font-size: 20px;
font-weight: bold;
padding: 20px;
border-radius: 40px;
width: 80%;
transition: .4s ease;
cursor: pointer;
}
.logbtnframe .loginbtn:hover {
background: transparent;
border: 3px solid var(--white_text);
color: var(--gold_yellow);
}
.p_m_icon_cover{
display: flex;
align-items: center;
justify-content: center;
height: 40px;
width: 40px;
overflow: hidden;
background: rgba(255, 255, 255, 1);
padding: 10px;
border-radius: 100px;
box-shadow: 0 0px 10px 2px rgba(0, 255, 255, .8);
}
}
@media (max-width : 1024px) {
.p_m_icon_cover{
display: flex;
align-items: center;
justify-content: center;
height: 30px;
width: 30px;
overflow: hidden;
background: rgba(255, 255, 255, 1);
padding: 10px;
border-radius: 100px;
box-shadow: 0 0px 10px 2px rgba(0, 255, 255, .8);
}
.accsettnotice{
width: 60%;
}
.setmystufftextp {
font-size: 16px;
}
.p_m_tell_em,.p_m_tell_em2{
display: flex;
flex-direction: column;
gap:50px;
align-items: center;
margin-top: 50px;
}
.p_m_tell_em{
flex-direction: column-reverse;
}
.tell_em_descr{
display: flex;
flex-direction: column;
gap: 20px;
width: 60%;
height: 300px;
align-items: center;
padding: 5px;
}
._m_tellem_text{
font-size: 16px;
}
._m_tellem_texty{
font-size: 14px;
letter-spacing: 2px;
}
._m_tellem_img{
width: 500px;
height: 250px;
}
._m_tellem_img{
width: 250px;
width: 250px;
}
.tell_em_pic{
width: 250px;
height: 250px;
border-radius: 250px;
}
.usrguidemain_mobile{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 50px;
margin-top: 100px;
margin-bottom: 100px;
}
.userguideleft_mobile{
display:flex ;
background: rgba(183, 0, 255, 0.08);
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
padding: 10px;
border-radius: 20px;
}
.userguidepic_pc{
width: 250px;
height: fit-content;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid var(--white_text);
overflow: hidden;
border-radius: 20px;
}
.ug_images_pc{
width: 250px;
height: auto;
}
.userguidedesc_pc{
width: 250px;
height: fit-content;
display: flex;
align-items: center;
flex-direction: column;
gap:20px;
}
.ug_header{
font-size: 18px;
color: var(--white_text);
font-weight: lighter;
letter-spacing: 3px;
}
.ug_p{
font-size: 15px;
color: var(--white_text);
font-weight: lighter;
letter-spacing: 2px;
line-height: 20px;
}
.reg_overall.moveregup{
transform: translateY(-700px);
}
.login_overall.movelogdown{
transform: translateY(650px);
}
.extra_icons_container{
display: none;
}
.usrguidemain_pc{
display: none;
}
body{
width: 100%;
}
.loginopp{
display: none;
}
.reg_overall,.login_overall{
justify-content: center;
align-items: center;
}
.PlatformLinksTemplate{
display: flex;
flex-direction: column;
border: 1px solid var(--white_text);
position: fixed;
margin-top: 100px;
padding: 10px;
border-radius: 20px;
background: rgba(0, 0, 0, .4);
backdrop-filter: blur(5px);
transform: translateX(-1000px);
width: 280px;
height: fit-content;
}
.PlatformMSGsTemplate{
display: flex;
flex-direction: column;
border: 1px solid var(--white_text);
position: fixed;
margin-top: 100px;
padding: 10px;
border-radius: 20px;
background: rgba(0, 0, 0, .4);
backdrop-filter: blur(5px);
transform: translateX(-1000px);
width: 280px;
height: fit-content;
}
.PlatformNEWsTemplate{
display: flex;
flex-direction: column;
border: 1px solid var(--white_text);
position: fixed;
margin-top: 100px;
padding: 10px;
border-radius: 20px;
background: rgba(0, 0, 0, .4);
backdrop-filter: blur(5px);
transform: translateX(-1000px);
width: 280px;
height: fit-content;
}
.PlatformLinksTemplate.moveintopage ,.PlatformMSGsTemplate.moveintopage ,.PlatformNEWsTemplate.moveintopage{
transform: translateX(10px);
}
.PlatformLinksTemplate h2,.PlatformMSGsTemplate h2{
color: var(--white_text);
font-size: 15px;
font-weight: lighter;
letter-spacing: 3px;
}
.PlatformLinks1{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 10px;
color: var(--white_text);
}
.PlatformLinks2{
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 10px;
}
.dateme{
color: var(--white_text);
letter-spacing: 2px;
font-size: 14px;
width: 90%;
height: fit-content;
font-weight: lighter;
}
.dateme em{
color: rgba(0, 255, 255, .8);
letter-spacing: 2px;
font-size: 12px;
width: 90%;
height: fit-content;
font-style: italic;
font-weight: bold;
}
.Exit_Img{
width: 15px;
height: 15px;
}
.Exit_Img:hover{
width: 20px;
height: 20px;
cursor: pointer;
}
.Exit_Img2{
width: 15px;
height: 15px;
}
.Exit_Img2:hover{
width: 20px;
height: 20px;
cursor: pointer;
}
.Exit_Img3{
width: 15px;
height: 15px;
}
.Exit_Img3:hover{
width: 20px;
height: 20px;
cursor: pointer;
}
.navbar .navsection{
display: none;
}
.navbar {
top: 0;
display: flex;
width: 100%;
flex-direction: row;
align-items: center;
position: fixed;
padding-top: 3px;
padding-bottom: 3px;
backdrop-filter: blur(5px);
z-index: 100;
height: 60px;
gap: 100px;
border-bottom-left-radius:0px ;
border-bottom-right-radius:0px ;
border-bottom: 1px solid var(--white_text);
justify-content: space-between;
}
.navlogo {
width: 30px;
height: 30px;
transition: .2s ease;
background: var(--white_text);
border-radius: 40px;
padding: 5px;
}
.navlogostuff anjizo{
font-size: 20px;
}
.navlogostuff trades{
font-size: 20px;
}
.mobile_toprightnav{
padding: 5px;
gap: 10px;
display: flex;
flex-direction: row;
width: 50%;
justify-content: space-between;
}
.mobile_navicons_container{
border: 2px solid var(--white_text);
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width: 40px;
padding: 5px;
border-radius: 40px;
overflow: hidden;
background: rgba(0,0,0,0.5);
}
.mobile_navicons{
width: 40px;
}
.mobile_navicons_container:active{
border: 4px solid var(--white_text);
}
.mobile_bottom_navbar {
bottom: 0;
display: flex;
width: 100%;
flex-direction: row;
align-items: center;
position: fixed;
padding-top: 3px;
padding-bottom: 3px;
backdrop-filter: blur(5px);
z-index: 100;
height: 70px;
border-top: 1px solid var(--white_text);
justify-content: space-between;
}
.mobile_bottom_rightnav{
padding: 5px;
gap: 10px;
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
}
.mobile_navicons_about{
width: 30px;
}
.mobile_navicons_profpic{
width: 55px;
}
.mobile_navicons_market{
width: 55px;
}
.mobile_navicons_container_selected{
border: 2px solid rgba(255, 0, 0, 0.9);
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width: 40px;
padding: 5px;
border-radius: 40px;
overflow: hidden;
background: rgba(255, 0, 0, 0.9);
}
.Marketcategory .desktop-select {
display: none;
}
.Marketcategory .mobile-dropdown-container {
display: flex;
align-items: center;
gap: 5px;
position: relative;
}
.mobile-dropdown-button {
padding: 8px 12px;
border: 1px solid var(--white_text);
border-radius: 5px;
background: rgba(183, 0, 255, 0.08);
color: var(--white_text);
font-size: 14px;
cursor: default;
}
.mobile-dropdown-list {
position: absolute;
top: 100%;
left: 0;
width: 200px;
background-color: rgba(0, 0, 0, .4);
backdrop-filter: blur(2px);
border: 1px solid var(--white_text);
border-radius: 5px;
list-style: none;
margin: 5px 0 0 0;
padding: 0;
max-height: 0 !important;
overflow: hidden;
opacity: 0 !important;
visibility: hidden;
transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
z-index: 1000;
}
.mobile-dropdown-container.active .mobile-dropdown-list {
max-height: 250px !important;
opacity: 1 !important;
visibility: visible;
padding: 5px 0;
overflow-y: auto;
}
.mobile-dropdown-list li {
padding: 10px 15px;
cursor: pointer;
color: var(--white_text);
transition: background-color 0.2s ease;
font-size: 12px;
}
.mobile-dropdown-list li:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.Marketnavbarform {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10px;
border-top: 1px solid var(--white_text);
border-radius: 100px;
background: rgba(183, 0, 255, 0.08);
gap:50px
}
.Marketsortby .mobile-dropdown-container {
display: flex !important;
}
.Marketsortby .marketnaviconcontainer {
display: flex !important;
visibility: visible !important;
}
.Marketsortby .marketnaviconcontainer img {
display: block !important;
opacity: 1 !important;
}
.mobile-sort-dropdown {
display: flex;
align-items: center;
gap: 5px;
position: relative;
}
.mobile-sort-list {
position: absolute;
top: 100%;
left: 0;
width: 200px;
background-color: rgba(0, 0, 0, .4);
backdrop-filter: blur(2px);
border: 1px solid var(--white_text);
border-radius: 5px;
list-style: none;
margin: 5px 0 0 0;
padding: 0;
z-index: 1000;
max-height: 0 !important;
overflow: hidden;
opacity: 0 !important;
visibility: hidden;
transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-sort-dropdown.active .mobile-sort-list {
max-height: 200px !important;
opacity: 1 !important;
visibility: visible;
padding: 5px 0;
overflow-y: auto;
}
.mobile-sort-list li {
padding: 10px 15px;
cursor: pointer;
color: var(--white_text);
transition: background-color 0.2s ease;
font-size: 12px;
}
.mobile-sort-list li:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.mobile-location-dropdown {
display: flex;
align-items: center;
gap: 5px;
position: relative;
}
.mobile-location-list {
position: absolute;
top: 100%;
left: 0;
width: 200px;
background-color: rgba(0, 0, 0, .4);
backdrop-filter: blur(2px);
border: 1px solid var(--white_text);
border-radius: 5px;
list-style: none;
margin: 5px 0 0 0;
padding: 0;
z-index: 1000;
max-height: 0 !important;
overflow: hidden;
opacity: 0 !important;
visibility: hidden;
transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-location-dropdown.active .mobile-location-list {
max-height: 250px !important;
opacity: 1 !important;
visibility: visible;
padding: 5px 0;
overflow-y: auto;
}
.mobile-location-list li {
padding: 10px 15px;
cursor: pointer;
color: var(--white_text);
transition: background-color 0.2s ease;
font-size: 12px;
}
.mobile-location-list li:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.wspaceintro{
margin-top: 85px;
padding: 10px;
display: flex;
flex-direction: column;
height: fit-content;
gap:50px;
margin-bottom: 20px;
padding-bottom: 50px;
}
.wspaceintrobigtext{
display: flex;
flex-direction: column;
gap:20px
}
.sway{
width: 100px;
height: 100px;
}
.wlspaceintroname{
font-size: 18px;
}
.wspaceextradetail{
width: 100%;
margin-bottom: 0px;
}
.wrkspace_textsup ,.rating-number ,.rating-container ,.rating-count{
font-size: 12px;
}
.wspaceposts{
margin-top: 0px;
padding: 10px;
;
}
.rightyosa{
display: flex;
justify-content: center;
align-items: center;
}
.leftyosa h2{
font-size: 15px;
}
.rightyosa h3{
font-size: 15px;
}
.rating-stars{
display: none;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 20px;
}
.fpostcards{
width: 70px;
}
.opostcards{
width: 100px;
overflow: hidden;
}
.opostdescr{
width: 100px;
}
.opostdescr h3{
font-size: 10px;
}
.wspacecard {
margin-top: 10px;
border-radius: 20px;
padding: 10px;
padding-top: 40px;
display: grid;
height: fit-content;
grid-template-columns: repeat(auto-fit, minmax(100px, auto));
gap: 20px;
background: rgba(183, 0, 255, 0.08);
}
.middlefinsher ,.rightsidefinsher{
display: none;
}
.finisher{
padding-bottom: 100px;
}
.wspaceintrobigtextprof{
width: 80%;
display: flex;
flex-direction: column;
gap: 20px;
}
.profileseperation{
display: flex;
flex-direction: column;
gap: 5px;
justify-content: center;
align-items: center;
}
.profileseperation h2{
font-size: 12px;
}
.profileseperation p{
font-size: 10px;
}
.profileseperation div{
display: flex;
flex-direction: row;
gap: 5px;
}
.wspaceintroprof{
margin-top: 100px;
margin-bottom: 50px;
}
.btnsupporta{
padding: 5px;
}
.btnsupport{
font-size: 12px;
}
.btnsupporta2{
padding: 5px;
font-size: 12px;
}
.profuserlinks{
display: flex;
justify-content: center;
align-items: center;
}
.rate_btn{
padding: 5px;
background: var(--white_text);
font-size: 10px;
letter-spacing: 2px;
border-radius: 20px;
width: fit-content;
height: fit-content;
font-weight: bold;
color: rgba(0, 255, 255, .8);
border: 2px solid rgba(0, 255, 255, .8);
background: transparent;
}
.rate_btn:hover{
cursor: pointer;
}
.rate_seller_section{
display: flex;
flex-direction: column;
gap: 5px;
}
.rate_seller_section p{
font-size: 12px;
}
.profuserlinkscont{
display: flex;
justify-content: center;
align-items: center;
width: 75%;
}
.proflinks{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: fit-content;
}
.page01{
margin-top: 100px;
}
.fstbigwords h2 hrotxt {
font-size: 30px;
font-weight: bold;
color: var(--white_text);
letter-spacing: 1px;
transition: .4s;
font-weight: lighter;
}
.fstbigwords p {
padding-top: 20px;
color: var(--white_text);
font-size: 15px;
letter-spacing: 2px;
font-weight: lighter;
}
.imgsellerintropage03{
display: none;
}
.imgbuyerintro04{
display: none;
}
.imgintrotomarket02{
display: none;
}
.sellertalkspage03{
border: 2px solid var(--white_text);
background-image: url(background/About/zzz.png);
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.buyerintrotalks04{
border: 2px solid var(--white_text);
background-image: url(background/About/POC_Reference.png);
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.intromarkettalkpage02{
border: 2px solid var(--white_text);
background-image: url(background/About/zzzc.jpg);
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.intromarketpage02{
width: 100%;
}
.page2{
display: flex;
justify-content: center;
align-items: center;
padding: 0;
}
.viewmarket,.becomeseller,.becomebuyer{
padding: 5px;
}
.viewmarket a,.becomeseller a,.becomebuyer a{
font-size: 30px;
font-weight: bold;
}
.indexotherstuff{
margin-top: 100px;
}
.slideshowframework{
width: 95%;
}
.MarkIntrofosho{
margin-top: 100px;
padding:20px;
}
.fstbigwords2 {
padding: 20px;
padding-top: 100px;
padding-bottom: 100px;
width: 80%;
display: flex;
flex-direction: column;
justify-content: center;
}
.fstbigwords2 h2 hrotxt {
font-size: 30px;
font-weight: bold;
color: var(--white_text);
letter-spacing: 1px;
transition: .4s;
font-weight: lighter;
}
.fstbigwords2 p {
padding-top: 20px;
color: var(--white_text);
font-size: 15px;
letter-spacing: 2px;
font-weight: lighter;
}
.Marketsearchy,.Marketsearchbotton ,.Marketsorttxt ,.Marketsortbydrop ,.Marketlocation h3,.Marketlocation select,.Marketsortbydrop ,.Marketcategory h3,.Marketcategory select {
display: none;
}
.marketnavicon{
display: flex;
width: 40px;
height:40px
}
.marketnaviconcontainer{
height: 40px;
width: 40px;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
background: rgba(0, 0, 0, .8);
}
.marketnaviconcontainer:hover{
cursor: pointer;
}
.marketnavicon:hover{
width: 50px;
height:50px
}
.statement {
padding: 20px;
display: flex;
justify-content: center;
width: 100%;
}
.statement h3 {
font-size: 20px;
}
.slideshow {
border-radius: 20px;
height: fit-content;
padding: 5px;
padding-top: 40px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, auto));
}
.slide01 {
border: 2px solid var(--white_text);
border-radius: 30px;
width: 100px;
height: 360px;
padding: 0px;
display: flex;
gap: 20px;
overflow: hidden;
background: rgba(183, 0, 255, .05);
justify-content: center;
align-items: center;
}
.slideinfo1{
display: none;
}
.imgguy {
overflow: hidden;
border: none;
width: 250px;
height: 100%;
background: black;
display: flex;
justify-content: center;
align-items: center;
}
.imgguy h2{
display: flex;
}
.imgslide{
display: none;
}
.imgslide_mobile img {
width: 250px;
height: 360px;
transition: .4s ease;
}
.imgslide_mobile img:hover {
cursor: pointer;
}
.following-badge {
position: absolute;
background-color: transparent;
color: white;
margin-top: -180px;
margin-left: 150px;
}
.following-badge .following_greendot{
width: 30px;
}
.SettingspageMain {
margin-top: 50px;
padding: 5px;
display: flex;
align-items: center;
flex-direction: column;
height: fit-content;
}
.settingcontainerjar {
border-top: 0.5px solid var(--white_text);
border-bottom: 0.5px solid var(--white_text);
padding: 5px;
border-radius: 20px;
height: fit-content;
width: 100%;
overflow: hidden;
}
.myprofile{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
gap: 50px;
}
.setmystufftext {
height: fit-content;
padding: 5px;
border-bottom: 2px solid rgba(255, 0, 0, .8);
border-radius: 10px;
}
.setmystufftext h2 {
font-size: 30px;
}
.setmystufftext quotin {
color: rgba(255, 0, 0, .8);
}
.form_inspect{
width: 100%;
overflow: hidden;
}
.myprofilestuff, .myprivacystuff {
width: 75%;
padding: 10px;
border-radius: 20px;
background: rgba(183, 0, 255, 0.05);
}
.accsetbtns {
width: 100%;
display: flex;
flex-direction: row;
padding: 0px;
justify-content: center;
align-items: center;
gap: 200px
}
.accsavebtn, .accdisbtn {
padding: 10px;
font-size:20px;
border: 2px solid black;
border-radius: 30px;
padding-left: 20px;
padding-right: 20px;
transition: .3s ease;
cursor: pointer;
}
.accsavebtn {
background: white;
color: var(--black_redish);
font-weight: bold;
}
.accsavebtn:hover {
background: transparent;
color: var(--gold_yellow);
border: 2px solid var(--white_text);
}
.accdisbtn {
background: transparent;
border: 2px solid rgba(255, 0, 0, 0.9);
}
.accdisbtn:hover {
background: rgba(255, 0, 0, 0.9);
color: black;
border: none;
}
.discard{
color: rgba(255, 0, 0, 0.9);
font-weight: bold;
}
.discard:hover{
color: black;
font-weight: bold;
}
.deleteaccount {
margin-top: 50px;
margin-bottom: 50px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.deleteacstaffa {
color: black;
font-size: 20px;
font-weight: bold;
border: 2px solid red;
padding: 10px;
border-radius: 20px;
background: red;
transition: .3s ease;
cursor: pointer;
}
.deleteacstaffa:hover {
background: transparent;
color: red;
}
.SettingspageMain p {
color: var(--white_text);
font-size: 15px;
width: fit-content;
border-bottom: 1px solid linen;
padding: 5px;
border-radius: 5px;
height: fit-content;
letter-spacing: 3px;
transition: .5s ease-in-out;
}
.SettingspageMain p:hover {
color: rgba(255, 0, 0, .8);
}
.acctxt{
background: rgba(255, 255, 255, 1 );
width: 50%;
padding: 5px;
font-size: 15px;
border: 2px solid black;
font-weight: bold;
}
.yo{
border: none;
padding: 10px;
border-radius: 20px;
color: white;
background: rgba(183, 0, 255, 0.05);
border: 2px solid white;
width: 50%;
font-weight: bold;
}
.yo option{
background: black;
font-weight: bold;
}
.txtar{
width: 60%;
font-size: 15px;
padding: 5px;
font-weight: bold;
}
.mofaya{
font-size: 15px;
}
.results-header h3 {
margin: 0;
color: #333;
font-size: 15px;
}
.Searchbody {
height: fit-content;
padding: 5px;
}
.seachcont {
width: fit-content;
display: flex;
align-items: center;
gap: 5px;
padding: 5px;
width: fit-content;
height: fit-content;
flex-direction: row;
}
.sprdctsy, .sacconts, .sall {
font-weight: bold;
font-size: 15px;
color: var(--black_redish);
background: var(--white_text);
padding: 5px;
border-radius: 20px;
border: 2px solid var(--white_text);
}
.pagination-btn{
font-size: 15px;
}
.Ssearchicon {
width: fit-content;
height: 60px;
padding: 10px;
display: flex;
align-items: center;
background: rgba(255,255,255);
border-radius: 40px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
cursor: pointer;
transition: .3s ease;
font-size: 20px;
font-weight: bold;
}
.Ssearchicon:hover {
letter-spacing: 3px;
}
.Ssearch {
padding: 10px;
width: 75%;
height: 40px;
border-radius: 50px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
font-size: 20px;
background: rgba(183, 0, 255, 0.08);
color: var(--white_text);
border: 1px solid var(--white_text);
transition: .3s ease;
}
.Ssearch::placeholder {
color: var(--white_text);
}
.Ssearch:hover {
letter-spacing: 3px;
border-bottom: 10px solid var(--white_text);
}
.Searchresults {
border: 1px solid var(--white_text);
border-radius: 40px;
color: var(--white_text);
display: flex;
flex-direction: row;
height: 100px;
align-items: center;
padding: 10px;
gap: 70px;
letter-spacing: 2px;
background: rgba(183, 0, 255, 0.08);
width: 100%;
}
.searchusericon {
width: 75px;
height: 75px;
}
.srprimgnow, .srprimgnowprd {
border: 3px solid var(--gold_yellow);
height: 75px;
width: 75px;
border-radius: 750px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: .3s ease;
}
.prextradetails h2 {
color: var(--white_text);
font-weight: bold;
font-size: 16px;
}
.prextradetailsbio {
font-weight: lighter;
font-size: 16px;
}
.Searchresults .prdctcolo {
color: var(--green_rare);
}
.Searchresults .unamectcolo {
color: var(--gold_yellow);
}
.prextradetails .cyanguy {
color: rgba(0, 255, 255, .8);
font-size: 16px;
width: 100%;
height: 18px;
overflow: hidden;
}
.srchopostdescr {
position: absolute;
width: 100px;
height: 320px;
overflow: hidden;
border-radius: 20px;
display: flex;
flex-direction: column;
}
.srchopostdescr:hover{
backdrop-filter: blur(2px);
background: rgba(0, 0, 0, .4);
}
.prdctdisappear {
display: grid;
border-radius: 20px;
height: fit-content;
padding: 20px;
padding-top: 40px;
grid-template-columns: repeat(auto-fit, minmax(100px, auto));
gap: 20px;
}
whitetextimp,pricetext{
display: none;
}
asds{
font-size: 12px;
}
.authcont {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
gap: 20px;
flex-direction: column-reverse;
}
.authtext {
display: flex;
flex-direction: column;
gap: 10px;
background: rgba(183, 0, 255, 0.08);
padding: 20px;
border-radius: 20px;
width: 100%;
align-items: center;
}
.authpic {
border: 2px solid var(--white_text);
width: 200px;
height: 200px;
border-radius: 150px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 0;
overflow: hidden;
}
.testin {
width: 210px;
transition: .3s ease-in-out;
}
.testin:hover {
width: 340px;
cursor: pointer;
}
.POCmain {
margin-top: 50px;
height: fit-content;
padding: 20px;
display: flex;
flex-direction: column;
}
.POCmainimtext {
letter-spacing: 3px;
font-size: 20px;
}
.POCmainimtexty{
font-size: 16px;
}
.TCstuffframe {
gap: 40px
}
.TCheader{
font-size: 20px;
}
.TCpar{
font-size: 16px;
}
.wspaceuploadpostcont{
width: 80%;
display: flex;
flex-direction: column;
gap: 20px;
justify-content: center;
align-items: center;
}
.wspaceuploadpostrightside{
display: flex;
flex-direction: column;
gap:50px;
justify-content: center;
align-items: center;
}
.oploadform{
width: 80%;
}
.wspaceuploadpostleftside{
width: 300px;
height: 300px;
border: var(--white_text) solid 2px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.wsuploadpic{
width: 300px;
height: 300px;
}
.form-section h3{
font-size: 18px;
}
.form-section h2{
font-size: 16px;
}
.capupload{
font-size: 14px;
height: 50px;
}
}
@media (max-width : 800px) {
.p_m_icon_cover{
align-items: center;
justify-content: center;
height: 20px;
width: 20px;
overflow: hidden;
background: rgba(255, 255, 255, 1);
padding: 10px;
border-radius: 100px;
box-shadow: 0 0px 10px 2px rgba(0, 255, 255, .8);
}
.p_m_icon{
width: 30px;
height: 30px;
transition: .3s ease-in-out;
}
.p_m_icon:hover{
width: 20px;
height: 20px;
cursor: pointer;
}
.payment_meh_pics .setmystufftextp{
display: flex;
}
.payment_meh_pics{
height: fit-content;
width: 90%;
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}
.No_more_Posts h1{
font-size: 12px;
color: var(--white_text);
font-weight: lighter;
letter-spacing: 5px;
}
.No_more_Posts p{
color: var(--white_text);
font-weight: bold;
letter-spacing: 2px;
font-size: 10px;
}
.TCstuffframe {
gap: 40px
}
.TCheader{
font-size: 16px;
}
.TCpar{
font-size: 12px;
}
.TCstuffcont {
width: 380px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 10px;
}
.postviewareainner{
display: flex;
flex-direction: column;
justify-content: center;
width: 60%;
}
.postviewareatop{
display: flex;
justify-content: center;
align-items: center;
}
.postviewareabottom{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap:20px;
}
.postviewareaprev, .postviewareanext {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.arrowrightnav,.arrowleftropfnav{
width: 30px;
height: 30px;
transform: rotateZ(0deg);
}
.arrowrightnav:active,.arrowleftropfnav:active{
width: 40px;
height: 40px;
transition: .3s;
}
.postviewareaprdpreview{
border: 1px solid var(--white_text);
width: 300px;
height: 300px;
justify-content: center;
align-items: center;
overflow: hidden;
border-radius: 20px;
}
.postviewareaprdpreview{
display: flex;
align-items: center;
justify-content: center;
}
.postprdpicture{
display: flex;
width: 300px;
height: 300px;
}
.postdescrtextgang{
font-size: 16px;
}
.deletepostcont{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap:20px;
}
.availability-control{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.availability-select{
border: 2px solid var(--gold_yellow);
background: transparent;
color: var(--gold_yellow);
font-size: 16px;
}
.availability-select:hover{
border: 2px solid var(--gold_yellow);
background: var(--gold_yellow);
color: black;
}
.wspaceuploadpostcont{
width: 60%;
display: flex;
flex-direction: column;
gap: 20px;
justify-content: center;
align-items: center;
}
.wspaceuploadpostleftside{
width: 200px;
height: 200px;
border: var(--white_text) solid 2px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.wsuploadpic{
width: 200px;
height: 200px;
}
.form-section h3{
font-size: 18px;
}
.form-section h2{
font-size: 16px;
}
.capupload{
font-size: 14px;
height: 50px;
}
}
@media (min-width: 601px) {
.image-viewer-controls {
display: none;
}
}
@media (max-width : 600px) {
.google-login-btn {
max-width: 100%;
font-size: 0.9rem;
}
.google-logo {
width: 16px;
height: 16px;
}
.important_text h2{
color: var(--white_text);
font-weight: bold;
font-size: 16px;
letter-spacing: 3px;
}
.image-viewer-content {
width: 95%;
height: 95vh;
}
.close-image-viewer {
top: 10px;
right: 15px;
font-size: 30px;
}
#image-viewer-img.landscape {
transform: rotate(90deg);
max-height: 95vw;
max-width: 95vh;
width: auto;
height: auto;
}
#image-viewer-img.portrait {
max-height: 90vh;
max-width: 100%;
}
.landscape-container {
width: 95vh;
height: 95vw;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.image-viewer-controls {
position: absolute;
bottom: 20px;
left: 0;
right: 0;
text-align: center;
color: #f1f1f1;
font-size: 14px;
opacity: 0.7;
}
.image-viewer-options {
bottom: 80px;
}
.image-viewer-btn {
padding: 6px 12px;
font-size: 12px;
}
.review-rater{
font-size: 14px;
}
.reply-form textarea{
font-size: 12px;
}
.review-content p ,.seller_reply-content p{
color:var(--white_text) !important;
margin: 0;
line-height: 1.5;
font-size: 12px;
}
.accsettnotice{
width: 80%;
}
.setmystufftextp {
font-size: 14px;
}
.No_more_Posts h1{
font-size: 10px;
color: var(--white_text);
font-weight: lighter;
letter-spacing: 5px;
}
.No_more_Posts p{
color: var(--white_text);
font-weight: bold;
letter-spacing: 1px;
font-size: 8px;
}
.tell_em_descr{
width:80%
}
.usrguidemain_mobile{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 50px;
margin-top: 100px;
margin-bottom: 100px;
}
.userguideleft_mobile{
display:flex ;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
padding: 10px;
}
.userguidepic_pc{
width: 250px;
height: fit-content;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid var(--white_text);
overflow: hidden;
border-radius: 20px;
}
.ug_images_pc{
width: 250px;
height: auto;
}
.userguidedesc_pc{
width: 250px;
height: fit-content;
display: flex;
align-items: center;
flex-direction: column;
gap:20px;
}
.ug_header{
font-size: 18px;
color: var(--white_text);
font-weight: lighter;
letter-spacing: 3px;
}
.ug_p{
font-size: 15px;
color: var(--white_text);
font-weight: lighter;
letter-spacing: 2px;
line-height: 20px;
}
body{
width: 100%;
}
.navbar .navsection{
display: none;
}
.navbar {
top: 0;
display: flex;
width: 100%;
flex-direction: row;
align-items: center;
position: fixed;
padding-top: 3px;
padding-bottom: 3px;
backdrop-filter: blur(5px);
z-index: 100;
height: 60px;
gap: 100px;
border-bottom-left-radius:0px ;
border-bottom-right-radius:0px ;
border-bottom: 1px solid var(--white_text);
justify-content: space-between;
}
.navlogo {
width: 30px;
height: 30px;
transition: .2s ease;
background: var(--white_text);
border-radius: 40px;
padding: 2px;
}
.navlogostuff anjizo{
font-size: 20px;
}
.navlogostuff trades{
font-size: 20px;
}
.mobile_toprightnav{
padding: 5px;
gap: 10px;
display: flex;
flex-direction: row;
width: 50%;
justify-content: space-between;
}
.mobile_navicons_container{
border: 2px solid var(--white_text);
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width: 40px;
padding: 5px;
border-radius: 40px;
overflow: hidden;
background: rgba(0,0,0,0.5);
}
.mobile_navicons{
width: 40px;
}
.mobile_navicons_container:active{
border: 4px solid var(--white_text);
}
.mobile_bottom_navbar {
bottom: 0;
display: flex;
width: 100%;
flex-direction: row;
align-items: center;
position: fixed;
padding-top: 3px;
padding-bottom: 3px;
backdrop-filter: blur(5px);
z-index: 100;
height: 70px;
border-top: 1px solid var(--white_text);
justify-content: space-between;
}
.mobile_bottom_rightnav{
padding: 5px;
gap: 10px;
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
}
.mobile-sort-list li,.mobile-location-list li,.mobile-dropdown-list li {
font-size: 12px;
}
.mobile-sort-list,.mobile-location-list,.mobile-dropdown-list {
width: fit-content;
}
.Marketnavbarform {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10px;
border-top: 1px solid var(--white_text);
border-radius: 100px;
background: rgba(183, 0, 255, 0.08);
gap:20px
}
.mobile_navicons_about{
width: 30px;
}
.mobile_navicons_profpic{
width: 55px;
}
.mobile_navicons_market{
width: 55px;
}
.mobile_navicons_container_selected{
border: 2px solid rgba(255, 0, 0, 0.9);
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width: 40px;
padding: 5px;
border-radius: 40px;
overflow: hidden;
background: rgba(255, 0, 0, 0.9);
}
.wspaceintro{
margin-top: 85px;
padding: 10px;
padding-left: 30px;
padding-right:30px ;
display: flex;
flex-direction: column;
height: fit-content;
gap:50px;
margin-bottom: 20px;
padding-bottom: 50px;
}
.wspaceintrobigtext{
display: flex;
flex-direction: column;
gap:20px
}
.sway{
width: 100px;
height: 100px;
}
.wlspaceintroname{
font-size: 18px;
}
.wspaceextradetail{
width: 100%;
margin-bottom: 0px;
}
.wrkspace_textsup ,.rating-number ,.rating-container ,.rating-count{
font-size: 12px;
}
.wspaceposts{
margin-top: 0px;
padding: 10px;
;
}
.rightyosa{
display: flex;
justify-content: center;
align-items: center;
}
.leftyosa h2{
font-size: 15px;
}
.rightyosa h3{
font-size: 15px;
}
.rating-stars{
display: none;
flex-direction: row;
justify-content: center;
align-items: center;
}
.fpostcards{
width: 70px;
}
.opostcards{
width: 100px;
overflow: hidden;
}
.opostdescr{
width: 100px;
}
.opostdescr h3{
font-size: 10px;
}
.wspacecard {
margin-top: 10px;
border-radius: 20px;
padding: 10px;
padding-top: 40px;
display: grid;
height: fit-content;
grid-template-columns: repeat(auto-fit, minmax(100px, auto));
gap: 20px;
background: rgba(183, 0, 255, 0.08);
}
.middlefinsher ,.rightsidefinsher{
display: none;
}
.finisher{
padding-bottom: 100px;
}
.wspaceintrobigtextprof{
width: 75%;
display: flex;
flex-direction: column;
gap: 20px;
}
.profileseperation{
display: flex;
flex-direction: column;
gap: 5px;
justify-content: center;
align-items: center;
}
.profileseperation h2{
font-size: 12px;
}
.profileseperation p{
font-size: 10px;
}
.profileseperation div{
display: flex;
flex-direction: row;
gap: 5px;
}
.wspaceintroprof{
margin-top: 100px;
margin-bottom: 50px;
}
.btnsupporta{
padding: 5px;
}
.btnsupport{
font-size: 12px;
}
.btnsupporta2{
padding: 5px;
font-size: 12px;
}
.profuserlinks{
display: flex;
justify-content: center;
align-items: center;
}
.rate_btn{
padding: 5px;
background: var(--white_text);
font-size: 10px;
letter-spacing: 2px;
border-radius: 20px;
width: fit-content;
height: fit-content;
font-weight: bold;
color: rgba(0, 255, 255, .8);
border: 2px solid rgba(0, 255, 255, .8);
background: transparent;
}
.rate_btn:hover{
cursor: pointer;
}
.rate_seller_section{
display: flex;
flex-direction: column;
gap: 5px;
}
.rate_seller_section p{
font-size: 12px;
}
.profuserlinkscont{
display: flex;
justify-content: center;
align-items: center;
width: 75%;
}
.proflinks{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: fit-content;
}
.page01{
margin-top: 100px;
}
.fstbigwords h2 hrotxt {
font-size: 30px;
font-weight: bold;
color: var(--white_text);
letter-spacing: 1px;
transition: .4s;
font-weight: lighter;
}
.fstbigwords p {
padding-top: 20px;
color: var(--white_text);
font-size: 15px;
letter-spacing: 2px;
font-weight: lighter;
}
.imgsellerintropage03{
display: none;
}
.imgbuyerintro04{
display: none;
}
.imgintrotomarket02{
display: none;
}
.sellertalkspage03{
border: 2px solid var(--white_text);
background-image: url(background/About/zzz.png);
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.buyerintrotalks04{
border: 2px solid var(--white_text);
background-image: url(background/About/POC_Reference.png);
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.intromarkettalkpage02{
border: 2px solid var(--white_text);
background-image: url(background/About/zzzc.jpg);
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.intromarketpage02{
width: 100%;
}
.page2{
display: flex;
justify-content: center;
align-items: center;
padding: 0;
}
.viewmarket,.becomeseller,.becomebuyer{
padding: 5px;
}
.viewmarket a,.becomeseller a,.becomebuyer a{
font-size: 30px;
font-weight: bold;
}
.indexotherstuff{
margin-top: 100px;
}
.slideshowframework{
width: 90%;
}
.MarkIntrofosho{
border: 1px solid red;
margin-top: 100px;
padding:20px;
}
.fstbigwords2 {
padding: 20px;
padding-top: 100px;
padding-bottom: 100px;
width: 80%;
display: flex;
flex-direction: column;
justify-content: center;
}
.fstbigwords2 h2 hrotxt {
font-size: 30px;
font-weight: bold;
color: var(--white_text);
letter-spacing: 1px;
transition: .4s;
font-weight: lighter;
}
.fstbigwords2 p {
padding-top: 20px;
color: var(--white_text);
font-size: 15px;
letter-spacing: 2px;
font-weight: lighter;
}
.Marketsearchy,.Marketsearchbotton ,.Marketsorttxt ,.Marketsortbydrop ,.Marketlocation h3,.Marketlocation select,.Marketsortbydrop ,.Marketcategory h3,.Marketcategory select {
display: none;
}
.marketnavicon{
display: flex;
width: 40px;
height:40px
}
.marketnaviconcontainer{
height: 40px;
width: 40px;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
background: rgba(0, 0, 0, .8);
}
.marketnaviconcontainer:hover{
cursor: pointer;
}
.marketnavicon:hover{
width: 50px;
height:50px
}
.statement {
padding: 20px;
display: flex;
justify-content: center;
width: 100%;
}
.statement h3 {
font-size: 20px;
}
.slideshow {
border-radius: 20px;
height: fit-content;
padding: 5px;
padding-top: 40px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, auto));
}
.slide01 {
border: 2px solid var(--white_text);
border-radius: 30px;
width: 100px;
height: 360px;
padding: 0px;
display: flex;
gap: 20px;
overflow: hidden;
background: rgba(183, 0, 255, .05);
justify-content: center;
align-items: center;
}
.slideinfo1{
display: none;
}
.imgguy {
overflow: hidden;
border: none;
width: 250px;
height: 100%;
background: black;
display: flex;
justify-content: center;
align-items: center;
}
.imgguy h2{
display: flex;
}
.imgslide{
display: none;
}
.imgslide_mobile img {
width: 250px;
height: 360px;
transition: .4s ease;
}
.imgslide_mobile img:hover {
cursor: pointer;
}
.following-badge {
position: absolute;
background-color: transparent;
color: white;
margin-top: -180px;
margin-left: 150px;
}
.following-badge .following_greendot{
width: 30px;
}
.SettingspageMain {
margin-top: 50px;
padding: 5px;
display: flex;
align-items: center;
flex-direction: column;
height: fit-content;
}
.settingcontainerjar {
border-top: 0.5px solid var(--white_text);
border-bottom: 0.5px solid var(--white_text);
padding: 5px;
border-radius: 20px;
height: fit-content;
width: 100%;
overflow: hidden;
}
.myprofile{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
gap: 50px;
}
.setmystufftext {
height: fit-content;
padding: 5px;
border-bottom: 2px solid rgba(255, 0, 0, .8);
border-radius: 10px;
}
.setmystufftext h2 {
font-size: 30px;
}
.setmystufftext quotin {
color: rgba(255, 0, 0, .8);
}
.form_inspect{
width: 100%;
overflow: hidden;
}
.myprofilestuff, .myprivacystuff {
width: 75%;
padding: 10px;
border-radius: 20px;
background: rgba(183, 0, 255, 0.05);
}
.accsetbtns {
width: 100%;
display: flex;
flex-direction: row;
padding: 0px;
justify-content: center;
align-items: center;
gap: 100px
}
.accsavebtn, .accdisbtn {
padding: 10px;
font-size:20px;
border: 2px solid black;
border-radius: 30px;
padding-left: 20px;
padding-right: 20px;
transition: .3s ease;
cursor: pointer;
}
.accsavebtn {
background: white;
color: var(--black_redish);
font-weight: bold;
}
.accsavebtn:hover {
background: transparent;
color: var(--gold_yellow);
border: 2px solid var(--white_text);
}
.accdisbtn {
background: transparent;
border: 2px solid rgba(255, 0, 0, 0.9);
}
.accdisbtn:hover {
background: rgba(255, 0, 0, 0.9);
color: black;
border: none;
}
.discard{
color: rgba(255, 0, 0, 0.9);
font-weight: bold;
}
.discard:hover{
color: black;
font-weight: bold;
}
.deleteaccount {
margin-top: 50px;
margin-bottom: 50px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.deleteacstaffa {
color: black;
font-size: 20px;
font-weight: bold;
border: 2px solid red;
padding: 10px;
border-radius: 20px;
background: red;
transition: .3s ease;
cursor: pointer;
}
.deleteacstaffa:hover {
background: transparent;
color: red;
}
.SettingspageMain p {
color: var(--white_text);
font-size: 12px;
width: fit-content;
border-bottom: 1px solid linen;
padding: 5px;
border-radius: 5px;
height: fit-content;
letter-spacing: 3px;
transition: .5s ease-in-out;
}
.SettingspageMain p:hover {
color: rgba(255, 0, 0, .8);
}
.acctxt{
background: rgba(255, 255, 255, 1 );
width: 50%;
padding: 5px;
font-size: 12px;
border: 2px solid black;
font-weight: bold;
}
.yo{
border: none;
padding: 10px;
border-radius: 20px;
color: white;
background: rgba(183, 0, 255, 0.05);
border: 2px solid white;
width: 50%;
font-weight: bold;
}
.yo option{
background: black;
font-weight: bold;
}
.txtar{
width: 60%;
font-size: 12px;
padding: 5px;
font-weight: bold;
}
.mofaya{
font-size: 15px;
}
.results-header h3 {
margin: 0;
color: #333;
font-size: 15px;
}
.Searchbody {
height: fit-content;
padding: 5px;
}
.seachcont {
width: fit-content;
display: flex;
align-items: center;
gap: 5px;
padding: 5px;
width: fit-content;
height: fit-content;
flex-direction: row;
}
.sprdctsy, .sacconts, .sall {
font-weight: bold;
font-size: 15px;
color: var(--black_redish);
background: var(--white_text);
padding: 5px;
border-radius: 20px;
border: 2px solid var(--white_text);
}
.Ssearchicon {
width: fit-content;
height: 60px;
padding: 10px;
display: flex;
align-items: center;
background: rgba(255,255,255);
border-radius: 40px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
cursor: pointer;
transition: .3s ease;
font-size: 20px;
font-weight: bold;
}
.Ssearchicon:hover {
letter-spacing: 3px;
}
.Ssearch {
padding: 10px;
width: 75%;
height: 40px;
border-radius: 50px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
font-size: 20px;
background: rgba(183, 0, 255, 0.08);
color: var(--white_text);
border: 1px solid var(--white_text);
transition: .3s ease;
}
.Ssearch::placeholder {
color: var(--white_text);
}
.Ssearch:hover {
letter-spacing: 3px;
border-bottom: 10px solid var(--white_text);
}
.Searchresults {
border: 1px solid var(--white_text);
border-radius: 40px;
color: var(--white_text);
display: flex;
flex-direction: row;
height: 100px;
align-items: center;
padding: 10px;
gap: 70px;
letter-spacing: 2px;
background: rgba(183, 0, 255, 0.08);
width: 100%;
}
.searchusericon {
width: 75px;
height: 75px;
}
.srprimgnow, .srprimgnowprd {
border: 3px solid var(--gold_yellow);
height: 75px;
width: 75px;
border-radius: 750px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: .3s ease;
}
.prextradetails h2 {
color: var(--white_text);
font-weight: bold;
font-size: 16px;
}
.prextradetailsbio {
font-weight: lighter;
font-size: 16px;
}
.Searchresults .prdctcolo {
color: var(--green_rare);
}
.Searchresults .unamectcolo {
color: var(--gold_yellow);
}
.prextradetails .cyanguy {
color: rgba(0, 255, 255, .8);
font-size: 16px;
width: 100%;
height: 18px;
overflow: hidden;
}
.srchopostdescr {
position: absolute;
width: 100px;
height: 320px;
overflow: hidden;
border-radius: 20px;
display: flex;
flex-direction: column;
}
.srchopostdescr:hover{
backdrop-filter: blur(2px);
background: rgba(0, 0, 0, .4);
}
.srchopostdescr h3 {
font-size: 14px;
}
.prdctdisappear {
display: grid;
border-radius: 20px;
height: fit-content;
padding: 20px;
padding-top: 40px;
grid-template-columns: repeat(auto-fit, minmax(100px, auto));
gap: 20px;
}
whitetextimp,pricetext{
display: none;
}
asds{
font-size: 12px;
}
.authcont {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
gap: 20px;
flex-direction: column-reverse;
}
.authtext {
display: flex;
flex-direction: column;
gap: 10px;
background: rgba(183, 0, 255, 0.08);
padding: 20px;
border-radius: 20px;
width: 100%;
align-items: center;
}
.authpic {
border: 2px solid var(--white_text);
width: 200px;
height: 200px;
border-radius: 150px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 0;
overflow: hidden;
}
.testin {
width: 210px;
transition: .3s ease-in-out;
}
.testin:hover {
width: 340px;
cursor: pointer;
}
.POCmain {
margin-top: 50px;
height: fit-content;
padding: 20px;
display: flex;
flex-direction: column;
}
.POCmainimtext {
letter-spacing: 3px;
font-size: 20px;
}
.POCmainimtexty{
font-size: 16px;
}
.postviewareainner{
display: flex;
flex-direction: column;
justify-content: center;
width: 80%;
}
.postviewareatop{
display: flex;
justify-content: center;
align-items: center;
}
.postviewareabottom{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap:20px;
}
.postviewareaprev, .postviewareanext {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.arrowrightnav,.arrowleftropfnav{
width: 30px;
height: 30px;
}
.arrowrightnav:active,.arrowleftropfnav:active{
width: 40px;
height: 40px;
transition: .3s;
}
.postviewareaprdpreview{
border: 1px solid var(--white_text);
width: 250px;
height: 250px;
justify-content: center;
align-items: center;
overflow: hidden;
border-radius: 20px;
}
.postviewareaprdpreview{
display: flex;
align-items: center;
justify-content: center;
}
.postprdpicture{
display: flex;
width: 250px;
height: 250px;
}
.postdescrtextgang{
font-size: 12px;
}
.deletepostcont{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap:20px;
}
.availability-control{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.availability-select{
border: 2px solid var(--gold_yellow);
background: transparent;
color: var(--gold_yellow);
font-size: 16px;
}
.availability-select:hover{
border: 2px solid var(--gold_yellow);
background: var(--gold_yellow);
color: black;
}
.wspaceuploadpostcont{
width: 80%;
display: flex;
flex-direction: column;
gap: 20px;
justify-content: center;
align-items: center;
}
.wspaceuploadpostleftside{
width: 180px;
height: 180px;
border: var(--white_text) solid 2px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.wsuploadpic{
width: 180px;
height: 180px;
}
.form-section h3{
font-size: 18px;
}
.form-section h2{
font-size: 16px;
}
.capupload{
font-size: 14px;
height: 50px;
}
}
@media (max-width : 500px) {
.wspacecard {
margin-top: 10px;
border-radius: 20px;
padding: 10px;
padding-top: 40px;
display: grid;
height: fit-content;
grid-template-columns: repeat(auto-fit, minmax(100px, auto));
gap: 20px;
background: rgba(183, 0, 255, 0.08);
}
.No_more_Posts{
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
flex-direction: column;
gap: 10px;
}
.No_more_Posts h1{
font-size: 10px;
color: var(--white_text);
font-weight: lighter;
letter-spacing: 5px;
}
.No_more_Posts p{
color: var(--white_text);
font-weight: bold;
letter-spacing: 5px;
font-size: 8px;
line-height: 10px;
}
.no_post_yet_img{
width: 150px;
height: 150px;
}
.TCstuffcont {
width: 360px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 10px;
}
.login_stuffo, .regestration_stuffo {
margin: 50px;
margin-top: 10px;
width: 85%;
height: 500px;
color: var(--white_text);
display: flex;
flex-direction: column;
padding: 10px;
border-radius: 50px;
transition: .6s ease;
left: 10px;
}
.mobile_toprightnav{
padding: 0px;
gap: 5px;
display: flex;
flex-direction: row;
width: 50%;
justify-content: space-between;
}
.mobile_navicons_container{
border: 2px solid var(--white_text);
display: flex;
justify-content: center;
align-items: center;
height: 25px;
width: 25px;
padding: 5px;
border-radius: 40px;
overflow: hidden;
background: rgba(0,0,0,0.5);
}
.mobile_navicons{
width: 20px;
}
.mobile_navicons_container:active{
border: 4px solid var(--white_text);
}
.mobile_bottom_navbar {
bottom: 0;
display: flex;
width: 100%;
flex-direction: row;
align-items: center;
position: fixed;
padding-top: 3px;
padding-bottom: 3px;
backdrop-filter: blur(5px);
z-index: 100;
height: 70px;
border-top: 1px solid var(--white_text);
justify-content: space-between;
}
.mobile_bottom_rightnav{
padding: 5px;
gap: 10px;
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
}
.mobile_navicons_about{
width: 20px;
}
.mobile_navicons_profpic{
width: 40px;
}
.mobile_navicons_market{
width: 55px;
}
.mobile_navicons_container_selected{
border: 2px solid rgba(255, 0, 0, 0.9);
display: flex;
justify-content: center;
align-items: center;
height: 20px;
width: 20px;
padding: 5px;
border-radius: 40px;
overflow: hidden;
background: rgba(255, 0, 0, 0.9);
}
.leftsidefinsher p{
font-size: 12px;
}
}
@media (max-width : 450px) {
textdissapear{
display: none;
}
}
@media (max-width : 400px) {
.important_text h2{
color: var(--white_text);
font-weight: bold;
font-size: 14px;
letter-spacing: 3px;
}
.leftsidefinsher p{
font-size:10px;
}
.accsettnotice{
width: 90%;
}
.setmystufftextp {
font-size: 12px;
}
.robo_validation{
font-size: 12px;
padding: 0px;
}
.alternative{
font-size: 12px;
}
.svglogin {
padding: 5px;
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
background-color: var(--white_text);
}
.svglogin:hover{
cursor: pointer;
}
.svgloginimage{
width: 20px;
height: 20px;
}
.svgloginimage:hover {
width: 25px;
height: 25px;
}
.login_stuffo, .regestration_stuffo {
margin: 50px;
margin-top: 10px;
width: 90%;
height: fit-content;
color: var(--white_text);
display: flex;
flex-direction: column;
padding: 10px;
border-radius: 50px;
transition: .6s ease;
left: 10px;
padding-bottom: 20px;
}
.reg_overall.moveregup{
transform: translateY(-580px);
}
.login_overall.movelogdown{
transform: translateY(650px);
}
.buyer_login {
margin-top: 95px;
display: flex;
flex-direction: column;
height: 500px;
overflow: hidden;
gap: 100px;
padding: 5px;
}
.tcbackdoorimg{
width: 20px;
}
.tell_em_descr{
width: 90%;
}
.usrguidemain_mobile{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 50px;
margin-top: 100px;
margin-bottom: 100px;
}
.userguideleft_mobile{
display:flex ;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
padding: 10px;
}
.userguidepic_pc{
width: 250px;
height: fit-content;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid var(--white_text);
overflow: hidden;
border-radius: 20px;
}
.ug_images_pc{
width: 250px;
height: auto;
}
.userguidedesc_pc{
width: 250px;
height: fit-content;
display: flex;
align-items: center;
flex-direction: column;
gap:20px;
}
.ug_header{
font-size: 15px;
color: var(--white_text);
font-weight: lighter;
letter-spacing: 3px;
}
.ug_p{
font-size: 12px;
color: var(--white_text);
font-weight: lighter;
letter-spacing: 2px;
line-height: 20px;
}
body{
width: 100%;
padding: 0px;
}
main{
overflow: hidden;
}
.navbar .navsection{
display: none;
}
.navbar {
top: 0;
display: flex;
width: 100%;
flex-direction: row;
align-items: center;
position: fixed;
padding-top: 3px;
padding-bottom: 3px;
backdrop-filter: blur(5px);
z-index: 100;
height: 60px;
gap: 20px;
border-bottom-left-radius:0px ;
border-bottom-right-radius:0px ;
border-bottom: 1px solid var(--white_text);
justify-content: space-between;
}
.navlogostuff anjizo{
font-size: 16px;
}
.navlogostuff trades{
font-size: 16px;
}
.navlogo {
width: 30px;
height: 30px;
transition: .2s ease;
background: var(--white_text);
border-radius: 40px;
padding: 2px;
}
.mobile_toprightnav{
padding: 0px;
gap: 5px;
display: flex;
flex-direction: row;
width: 50%;
justify-content: space-between;
}
.mobile_navicons_container{
border: 2px solid var(--white_text);
display: flex;
justify-content: center;
align-items: center;
height: 25px;
width: 25px;
padding: 5px;
border-radius: 40px;
overflow: hidden;
background: rgba(0,0,0,0.5);
}
.mobile_navicons{
width: 20px;
}
.mobile_navicons_container:active{
border: 4px solid var(--white_text);
}
.mobile_bottom_navbar {
bottom: 0;
display: flex;
width: 100%;
flex-direction: row;
align-items: center;
position: fixed;
padding-top: 3px;
padding-bottom: 3px;
backdrop-filter: blur(5px);
z-index: 100;
height: 70px;
border-top: 1px solid var(--white_text);
justify-content: space-between;
}
.mobile_bottom_rightnav{
padding: 5px;
gap: 10px;
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
}
.mobile_navicons_about{
width: 20px;
}
.mobile_navicons_profpic{
width: 40px;
}
.mobile_navicons_market{
width: 55px;
}
.mobile_navicons_container_selected{
border: 2px solid rgba(255, 0, 0, 0.9);
display: flex;
justify-content: center;
align-items: center;
height: 20px;
width: 20px;
padding: 5px;
border-radius: 40px;
overflow: hidden;
background: rgba(255, 0, 0, 0.9);
}
.wspaceintro{
margin-top: 85px;
padding: 10px;
padding-left: 30px;
padding-right:30px ;
display: flex;
flex-direction: column;
height: fit-content;
gap:50px;
margin-bottom: 20px;
padding-bottom: 50px;
}
.wspaceintrobigtext{
display: flex;
flex-direction: column;
gap:20px
}
.sway{
width: 100px;
height: 100px;
}
.wlspaceintroname{
font-size: 18px;
}
.wspaceextradetail{
width: 100%;
margin-bottom: 0px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
}
.wrkspace_textsup ,.rating-number ,.rating-container ,.rating-count{
font-size: 10px;
}
.wspaceposts{
margin-top: 0px;
padding: 10px;
;
}
.rightyosa{
display: flex;
justify-content: center;
align-items: center;
}
.leftyosa h2{
font-size: 12px;
}
.rightyosa h3{
font-size: 12px;
}
.rating-stars{
display: none;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.fpostcards{
width: 70px;
}
.opostcards{
width: 100px;
overflow: hidden;
}
.opostdescr {
position: absolute;
width: 100px;
height: 320px;
overflow: hidden;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.opostdescr h3 {
height: fit-content;
display: flex;
align-items: center;
color: rgba(255,255,255);
font-weight: lighter;
letter-spacing: 2px;
padding: 10px;
transition: .3s ease-in-out;
width: fit-content;
font-size: 10px;
backdrop-filter: blur(.5px);
background: rgba(0, 0, 0, .8);
border-radius: 5px;
}
.opostdescr h3:hover {
background: transparent;
}
.wspacecard {
margin-top: 10px;
border-radius: 20px;
padding: 10px;
padding-top: 40px;
display: grid;
height: fit-content;
grid-template-columns: repeat(auto-fit, minmax(100px, auto));
gap: 20px;
background: rgba(183, 0, 255, 0.08);
}
.middlefinsher ,.rightsidefinsher{
display: none;
}
.finisher{
padding-bottom: 100px;
}
.No_more_Posts{
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
flex-direction: column;
gap: 10px;
}
.No_more_Posts h1{
font-size: 10px;
color: var(--white_text);
font-weight: lighter;
letter-spacing: 2px;
}
.No_more_Posts p{
color: var(--white_text);
font-weight: bold;
letter-spacing: 1px;
font-size: 8px;
line-height: 10px;
}
.no_post_yet_img{
width: 150px;
height: 150px;
}
.wspaceintrobigtextprof{
width: 100%;
display: flex;
flex-direction: column;
gap: 20px;
}
.profileseperation{
display: flex;
flex-direction: column;
gap: 5px;
justify-content: center;
align-items: center;
}
.profileseperation h2{
font-size: 12px;
}
.profileseperation p{
font-size: 10px;
}
.profileseperation div{
display: flex;
flex-direction: row;
gap: 5px;
}
.wspaceintroprof{
margin-top: 100px;
margin-bottom: 50px;
width: 90%;
}
.btnsupporta{
padding: 5px;
}
.btnsupport{
font-size: 12px;
}
.btnsupporta2{
padding: 5px;
font-size: 12px;
}
.profuserlinks{
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.rate_btn{
padding: 5px;
background: var(--white_text);
font-size: 10px;
letter-spacing: 2px;
border-radius: 20px;
width: fit-content;
height: fit-content;
font-weight: bold;
color: rgba(0, 255, 255, .8);
border: 2px solid rgba(0, 255, 255, .8);
background: transparent;
}
.rate_btn:hover{
cursor: pointer;
}
.rate_seller_section{
display: flex;
flex-direction: column;
gap: 5px;
}
.rate_seller_section p{
font-size: 12px;
}
.profuserlinkscont{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 10px;
}
.profuserlinkscont h2{
font-size: 12px;
letter-spacing: 2px;
}
.prosupsupporter {
font-size: 12px;
font-weight: bold;
color: black;
background: var(--gold_yellow);
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
padding: 5px;
height: fit-content;
width: fit-content;
border-radius: 10px;
}
.prosupsupporting {
font-size: 12px;
font-weight: bold;
color: black;
background: var(--green_rare);
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
height: fit-content;
width: fit-content;
border-radius: 10px;
}
.prosupsupporter:hover,.prosupsupporting:hover{
padding: 10px;
transition: .3s;
}
.prosupsupporter {
font-size: 12px;
}
.prosupsupporting {
font-size: 12px;
}
textdissapear{
display: none;
}
.proflinks{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: fit-content;
}
.proflinks h3{
font-size: 12px;
height: fit-content;
}
.page01{
margin-top: 100px;
}
.fstbigwords{
padding-left: 0px;
}
.fstbigwords h2 hrotxt {
font-size: 25px;
font-weight: bold;
color: var(--white_text);
letter-spacing: 1px;
transition: .4s;
font-weight: lighter;
}
.fstbigwords p {
padding-top: 20px;
color: var(--white_text);
font-size: 14px;
letter-spacing: 2px;
font-weight: lighter;
line-height: 15px;
}
.imgsellerintropage03{
display: none;
}
.imgbuyerintro04{
display: none;
}
.imgintrotomarket02{
display: none;
}
.buyerintrotalks04,.sellertalkspage03{
border: 2px solid var(--white_text);
background-image: url(background/About/zzz.png);
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.sellertalkspage03 p, .buyerintrotalks04 p {
color: var(--white_text);
font-size: 14px;
letter-spacing: 2px;
font-weight: lighter;
line-height: 15px;
}
.intromarkettalkpage02{
border: 2px solid var(--white_text);
background-image: url(background/About/zzzc.jpg);
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.intromarketpage02{
width: 100%;
}
.page2{
display: flex;
justify-content: center;
align-items: center;
padding: 0;
}
.viewmarket,.becomeseller,.becomebuyer{
padding: 5px;
}
.viewmarket a,.becomeseller a,.becomebuyer a{
font-size: 16px;
font-weight: bold;
width: 100%;
}
.indexotherstuff{
margin-top: 100px;
}
.page2, .page3, .page4 {
padding: 10px;
}
.MarkIntrofosho{
border: 1px solid red;
margin-top: 100px;
padding:5px;
}
.fstbigwords2 {
padding: 20px;
padding-top: 100px;
padding-bottom: 100px;
width: 80%;
display: flex;
flex-direction: column;
justify-content: center;
}
.fstbigwords2 h2 hrotxt {
font-size: 25px;
font-weight: bold;
color: var(--white_text);
letter-spacing: 1px;
transition: .4s;
font-weight: lighter;
}
.fstbigwords2 p {
padding-top: 20px;
color: var(--white_text);
font-size: 12px;
letter-spacing: 2px;
font-weight: lighter;
}
.Marketsearchy,.Marketsearchbotton ,.Marketsorttxt ,.Marketsortbydrop ,.Marketlocation h3,.Marketlocation select,.Marketsortbydrop ,.Marketcategory h3,.Marketcategory select {
display: none;
}
.marketnavicon{
display: flex;
width: 20px;
height:20px
}
.marketnaviconcontainer{
height: 20px;
width: 20px;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
background: rgba(0, 0, 0, .8);
overflow: hidden;
}
.marketnaviconcontainer:hover{
cursor: pointer;
}
.marketnavicon:hover{
width: 30px;
height:30px
}
.Marketnavbarform {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10px;
border-top: 1px solid var(--white_text);
border-radius: 100px;
background: rgba(183, 0, 255, 0.08);
gap:20px
}
.statement {
padding: 5px;
display: flex;
justify-content: center;
width: 100%;
}
.statement h3 {
font-size: 15px;
}
.slideshow {
border-radius: 20px;
height: fit-content;
padding: 5px;
padding-top: 40px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, auto));
width: 100%;
}
.MarketMainNav {
padding: 10px;
}
.slideshowframework {
padding: 10px;
}
.slide01 {
border: 2px solid var(--white_text);
border-radius: 30px;
width: 100px;
height: 360px;
padding: 0px;
display: flex;
gap: 20px;
overflow: hidden;
background: rgba(183, 0, 255, .05);
justify-content: center;
align-items: center;
}
.slideinfo1{
display: none;
}
.imgguy {
overflow: hidden;
border: none;
width: 250px;
height: 100%;
background: black;
display: flex;
justify-content: center;
align-items: center;
}
.imgguy h2{
display: flex;
}
.imgslide{
display: none;
}
.imgslide_mobile img {
width: 250px;
height: 360px;
transition: .4s ease;
}
.imgslide_mobile img:hover {
cursor: pointer;
}
.following-badge {
position: absolute;
background-color: transparent;
color: white;
margin-top: -180px;
margin-left: 150px;
}
.following-badge .following_greendot{
width: 30px;
}
.SettingspageMain {
margin-top: 50px;
padding: 5px;
display: flex;
align-items: center;
flex-direction: column;
height: fit-content;
}
.settingcontainerjar {
border-top: 0.5px solid var(--white_text);
border-bottom: 0.5px solid var(--white_text);
padding: 5px;
border-radius: 20px;
height: fit-content;
width: 100%;
overflow: hidden;
}
.myprofile{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
gap: 50px;
}
.setmystufftext {
height: fit-content;
padding: 5px;
border-bottom: 2px solid rgba(255, 0, 0, .8);
border-radius: 10px;
}
.setmystufftext h2 {
font-size: 20px;
}
.setmystufftext quotin {
color: rgba(255, 0, 0, .8);
}
.form_inspect{
width: 100%;
overflow: hidden;
}
.myprofilestuff, .myprivacystuff {
width: 90%;
padding: 10px;
border-radius: 20px;
background: rgba(183, 0, 255, 0.05);
}
.accsetbtns {
width: 100%;
display: flex;
flex-direction: row;
padding: 0px;
justify-content: center;
align-items: center;
gap: 40px
}
.accsavebtn, .accdisbtn {
padding: 10px;
font-size:15px;
border: 2px solid black;
border-radius: 30px;
padding-left: 20px;
padding-right: 20px;
transition: .3s ease;
cursor: pointer;
}
.accsavebtn {
background: white;
color: var(--black_redish);
font-weight: bold;
}
.accsavebtn:hover {
background: transparent;
color: var(--gold_yellow);
border: 2px solid var(--white_text);
}
.accdisbtn {
background: transparent;
border: 2px solid rgba(255, 0, 0, 0.9);
}
.accdisbtn:hover {
background: rgba(255, 0, 0, 0.9);
color: black;
border: none;
}
.discard{
color: rgba(255, 0, 0, 0.9);
font-weight: bold;
}
.discard:hover{
color: black;
font-weight: bold;
}
.deleteaccount {
margin-top: 50px;
margin-bottom: 50px;
width: 80%;
display: flex;
justify-content: center;
align-items: center;
}
.deleteacstaffa {
color: black;
font-size: 15px;
font-weight: bold;
border: 2px solid red;
padding: 10px;
border-radius: 20px;
background: red;
transition: .3s ease;
cursor: pointer;
}
.deleteacstaffa:hover {
background: transparent;
color: red;
}
.SettingspageMain p {
color: var(--white_text);
font-size: 8px;
width: 40%;
border-bottom: 1px solid linen;
padding: 5px;
border-radius: 5px;
height: fit-content;
letter-spacing: 3px;
transition: .5s ease-in-out;
}
.SettingspageMain p:hover {
color: rgba(255, 0, 0, .8);
}
.privacystuffallocations, .profilestuffsection {
padding: 0px;
margin: 0px;
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: 20px;
}
.acctxt{
background: rgba(255, 255, 255, 1 );
width: 50%;
padding: 5px;
font-size: 12px;
border: 2px solid black;
font-weight: bold;
}
.yo{
border: none;
padding: 10px;
border-radius: 20px;
color: white;
background: rgba(183, 0, 255, 0.05);
border: 2px solid white;
width: 50%;
font-weight: bold;
}
.yo option{
background: black;
font-weight: bold;
}
.txtar{
width: 60%;
font-size: 12px;
padding: 5px;
font-weight: bold;
}
.mofaya{
font-size: 10px;
}
.results-header h3 {
margin: 0;
color: #333;
font-size: 12px;
}
.Searchbody {
height: fit-content;
padding: 5px;
}
.seachcont {
width: fit-content;
display: flex;
align-items: center;
gap: 5px;
padding: 5px;
width: fit-content;
height: fit-content;
flex-direction: row;
}
.Ssearchicon {
width: fit-content;
height: 50px;
padding: 5px;
display: flex;
align-items: center;
background: rgba(255,255,255);
border-radius: 40px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
cursor: pointer;
transition: .3s ease;
font-size: 15px;
font-weight: bold;
}
.Ssearchicon:hover {
letter-spacing: 3px;
}
.Ssearch {
padding: 5px;
width: 75%;
height: 35px;
border-radius: 50px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
font-size: 15px;
background: rgba(183, 0, 255, 0.08);
color: var(--white_text);
border: 1px solid var(--white_text);
transition: .3s ease;
}
.Ssearch::placeholder {
color: var(--white_text);
}
.Ssearch:hover {
letter-spacing: 3px;
border-bottom: 10px solid var(--white_text);
}
.Searchresults {
border: 1px solid var(--white_text);
border-radius: 40px;
color: var(--white_text);
display: flex;
flex-direction: row;
height: 100px;
align-items: center;
padding: 10px;
gap: 70px;
letter-spacing: 2px;
background: rgba(183, 0, 255, 0.08);
width: 100%;
}
.srprofileimg{
width: 25%;
}
.searchusericon {
width: 75px;
height: 75px;
}
.srprimgnow, .srprimgnowprd {
border: 3px solid var(--gold_yellow);
height: 75px;
width: 75px;
border-radius: 750px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: .3s ease;
}
.prextradetails h2 {
color: var(--white_text);
font-weight: bold;
font-size: 16px;
}
.prextradetailsbio {
font-weight: lighter;
font-size: 12px;
}
.Searchresults .prdctcolo {
color: var(--green_rare);
}
.Searchresults .unamectcolo {
color: var(--gold_yellow);
width: 80%;
height: fit-content;
}
.prextradetails .cyanguy {
color: rgba(0, 255, 255, .8);
font-size: 16px;
width: 100%;
height: 18px;
overflow: hidden;
}
.srchopostdescr {
position: absolute;
width: 100px;
height: 320px;
overflow: hidden;
border-radius: 20px;
display: flex;
flex-direction: column;
}
.srchopostdescr:hover{
backdrop-filter: blur(5px);
background: rgba(0, 0, 0, .8);
}
.srchopostdescr h3 {
font-size: 12px;
}
.sprdctsy, .sacconts, .sall {
font-weight: bold;
font-size: 12px;
}
.pagination-btn{
font-size: 12px;
}
.pagination-btn:hover{
letter-spacing: 1px;
}
.prdctdisappear {
display: grid;
border-radius: 20px;
height: fit-content;
padding: 20px;
padding-top: 40px;
grid-template-columns: repeat(auto-fit, minmax(100px, auto));
gap: 20px;
}
whitetextimp,pricetext{
display: none;
}
asds{
font-size: 12px;
}
.POCmain {
margin-top: 50px;
height: fit-content;
padding: 20px;
display: flex;
flex-direction: column;
}
.authcont {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
gap: 20px;
flex-direction: column-reverse;
margin-top: 50px;
}
.authtext {
display: flex;
flex-direction: column;
gap: 10px;
background: rgba(183, 0, 255, 0.08);
padding: 20px;
border-radius: 20px;
width: 100%;
align-items: center;
}
.authpic {
border: 2px solid var(--white_text);
width: 200px;
height: 200px;
border-radius: 150px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 0;
overflow: hidden;
}
.testin {
width: 210px;
transition: .3s ease-in-out;
}
.testin:hover {
width: 340px;
cursor: pointer;
}
.POCmainimtext {
letter-spacing: 3px;
font-size: 16px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
gap:5px;
}
.POCmainimtexty{
font-size: 14px;
}
.TCstuffcont {
width: 280px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 10px;
}
.postviewareainner{
display: flex;
flex-direction: column;
justify-content: center;
width: 90%;
}
.postviewareatop{
display: flex;
justify-content: center;
align-items: center;
}
.postviewareabottom{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap:20px;
}
.postviewareaprev, .postviewareanext {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.arrowrightnav,.arrowleftropfnav{
width: 30px;
height: 30px;
}
.arrowrightnav:active,.arrowleftropfnav:active{
width: 40px;
height: 40px;
transition: .3s;
}
.postviewareaprdpreview{
border: 1px solid var(--white_text);
width: 250px;
height: 250px;
justify-content: center;
align-items: center;
overflow: hidden;
border-radius: 20px;
}
.postviewareaprdpreview{
display: flex;
align-items: center;
justify-content: center;
}
.postprdpicture{
display: flex;
width: 250px;
height: 250px;
}
.postdescrtextgang{
font-size: 12px;
}
.deletepostcont{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap:20px;
}
.availability-control{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.availability-select{
border: 2px solid var(--gold_yellow);
background: transparent;
color: var(--gold_yellow);
font-size: 16px;
}
.availability-select:hover{
border: 2px solid var(--gold_yellow);
background: var(--gold_yellow);
color: black;
}
.wspaceuploadpostcont{
width: 90%;
display: flex;
flex-direction: column;
gap: 20px;
justify-content: center;
align-items: center;
}
.wspaceuploadpostleftside{
width: 180px;
height: 180px;
border: var(--white_text) solid 2px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.wsuploadpic{
width: 180px;
height: 180px;
}
.form-section h3{
font-size: 16px;
}
.form-section h2{
font-size: 15px;
}
.capupload{
font-size: 12px;
height: 50px;
}
}
@media (max-width : 370px){
.leftsidefinsher{
font-size: 12px;
}
.ic-action-stack {
flex-direction: column;
gap: 10px;
}
}
@media (max-width : 320px){
.No_more_Posts{
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
flex-direction: column;
gap: 10px;
}
.No_more_Posts h1{
font-size: 8px;
color: var(--white_text);
font-weight: lighter;
letter-spacing: 2px;
}
.No_more_Posts p{
color: var(--white_text);
font-weight: bold;
letter-spacing: 1px;
font-size: 8px;
line-height: 12px;
}
.no_post_yet_img{
width: 150px;
height: 150px;
}
.acctxt{
background: rgba(255, 255, 255, 1 );
width: 50%;
padding: 5px;
font-size: 12px;
border: 2px solid black;
font-weight: bold;
}
.yo{
border: none;
padding: 5px;
border-radius: 20px;
color: white;
background: rgba(183, 0, 255, 0.05);
border: 2px solid white;
width: 50%;
font-weight: bold;
cursor: pointer;
font-size: 12px;
}
.yo option{
background: black;
font-weight: bold;
cursor: pointer;
}
.txtar{
width: 60%;
font-size: 12px;
padding: 5px;
font-weight: bold;
}
.rightyosa h3{
font-size: 10px;
}
.TCstuffcont {
width: 250px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 10px;
}
}
.rating-stars {
display: inline-flex;
align-items: center;
}
.rating-stars.small {
font-size: 14px;
}
.rating-stars .star {
color: #ddd;
margin-right: 2px;
transition: color 0.2s ease;
}
.rating-stars .star.filled {
color: #ffc107 !important;
}
.rating-number.small {
font-size: 14px;
margin-left: 5px;
font-weight: bold;
}
.rating-count.small {
font-size: 12px;
color: #777;
margin-left: 3px;
}
.no-rating.small {
font-size: 14px;
color: #777;
}
.availability-badge {
display: inline-block;
padding: 3px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
margin-left: 5px;
}
.availability-badge.available {
background-color: #28a745;
color: white;
}
.availability-badge.unavailable {
background-color: #dc3545;
color: white;
}
.availability-badge.reserved {
background-color: #ffc107;
color: #212529;
}
.post-meta {
margin-top: 5px;
}
.trade-type-badge, .condition-badge {
display: inline-block;
padding: 3px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
margin-right: 5px;
background-color: #6c757d;
color: white;
}
.availability-control {
margin-top: 10px;
margin-bottom: 15px;
}
.availability-select {
padding: 5px 10px;
border-radius: 5px;
border: 1px solid #ddd;
background-color: white;
margin-left: 10px;
}
#detail-availability {
display: inline-block;
padding: 5px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 10px;
}
#detail-availability.available {
background-color: #28a745;
color: white;
}
#detail-availability.unavailable {
background-color: #dc3545;
color: white;
}
#detail-availability.reserved {
background-color: #ffc107;
color: #212529;
}
.messages-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 10000;
max-width: 300px;
}
.alert {
padding: 15px;
margin-bottom: 10px;
border: 1px solid transparent;
border-radius: 4px;
}
.alert-success {
color: #155724;
background-color: #d4edda;
border-color: #c3e6cb;
}
.alert-error {
color: #721c24;
background-color: #f8d7da;
border-color: #f5c6cb;
}
.availability-badge {
display: inline-block;
padding: 5px 10px;
border-radius: 4px;
font-weight: bold;
margin-bottom: 10px;
}
.availability-available {
background-color: #4CAF50;
color: white;
}
.availability-reserved {
background-color: #FF9800;
color: white;
}
.availability-unavailable {
background-color: #F44336;
color: white;
}