html {
  padding:0px;
  overscroll-behavior: none;
}

/*@font-face {
  font-family: 'Louize';
  src:url('assets/LouizeTrial-Regular.otf') format('opentype');
}*/

body {
/*  font-family: 'Louize';*/
  margin: 0; /* override default margin */
  height: 100%;

}

#device {
  position: fixed;
  background-color:#d0d0d0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100svh; /* total viewheight minus browser chrome */
  width: 100%;
  overscroll-behavior: contain;
  align-items:center;
}

h1 {
font-size: 16px;
text-align: center;
position: sticky;
width: 100%;
margin: 0;
align-content: center;
}

a {
  all:unset;
  cursor: pointer;
}

.chatbot {
  height:100%;
  width: 100%;
  text-align: center;
  align-content: center;
}

.search {
  background-color: orange;
  width:100%;
  height:48px;
}

.friend,.biz {
  display:flex;
  flex-direction:row;
  width:100%;
  height:fit-content;
  background-color:aliceblue;
  align-items:flex-start;
  gap:8px;
}
.friend p,.biz p {
  width:100%;
}


#map {
  height:180px;
  width: 100%;
  background-color: blue;
}
.camera {
  background-color: pink;
  width: 100%;
  height: 100%;
}

.good {
  background-color:limegreen;
  width: 100%;
  height: 530px;
}

#dots {
  display:flex;
  justify-content: center;
  margin:8px;
}

#dot {
 display: inline-block;
 cursor:pointer;
 height: 8px;
 width: 8px;
 margin: 0 2px;
 background-color: #bbb;
 border-radius: 50%;
}

#dot:hover {
  background-color: #717171;
}

/* buttons... */
#bigbutton {
  cursor:pointer;
  width:64px;
  height: 64px;
  background-color:#FF9900;
  border-radius:50%;
  align-content: center;
  text-align:center;
}

.closebutton {
  display:inline-block;
  position:absolute;
  bottom: 30px;
  cursor:pointer;
  width:48px;
  height: 48px;
  background-color:yellow;
  margin: 12px;
  border-radius:50%;
}


#camera {
  width:88%;
}

#card {
  display:flex;
  width:100%;
  height:fit-content;
  background-color:lightgoldenrodyellow;
}
.wsup {
  display:flex;
width: -webkit-fill-available;
height: fit-content;
padding-bottom: 16px;
padding-top: 16px;
padding-left: 8px;
padding-right: 8px;
border-radius: 128px;
}


.thumbnail {
  background-color:mediumaquamarine;
  min-width:48px;
  height:48px;
  margin: 12px;
  border-radius: 6px;
}

#past {
  color:#222;
}

#selected {
  background-color:lightskyblue;
}

#search_submit {
  width: 32px;
  height: 32px;
  margin-right: 16px;
  background-color: blue;
}

#avatar {
  min-width:48px;
  height:48px;
  border-radius:4%;
  margin:12px;
  background-color:hotpink;
}

#badge {
  min-width:48px;
  height:48px;
  border-radius:50%;
  margin:12px;
  background-color:hotpink;
  border: 4px solid red;
}

#profile_photo {
  background-color:blue;
  width:100%;
  height:300px;
}

#verified {
  display:inline-block;
  min-width:20px;
  height:20px;
  background-color:blue;
  margin:8px;
  clip-path: polygon(50% 0,79% 90%,2% 35%,98% 35%,21% 90%);
}

#icon {
  width: 24px;
  height: 24px;
  margin: 12px;
}

#icon img{

}

#wsup icon {
  background-color:lawngreen;
}

.dm {
  width:64px;
  background-color:lawngreen;
  min-width: 24px;
  height: 36px;
  margin: 12px;
  border-radius:50%;
}

.want {
  width:64px;
  background-color:red;
  min-width: 24px;
  height: 36px;
  margin: 12px;
  border-radius:50%;
}

#follow {
  width:96px;
  background-color:orange;
  height: 36px;
  margin: 24px;
  border-radius:60px;
}


.name {
  display: flex;
  width: 100%;
  font-size: 22px;
  align-items: center;
  padding:8px;
}

#audio {
  width: 50%;
  height: fit-content;
  background-color: limegreen;
}
#service {
  width: 50%;
  height: fit-content;
  background-color: lightseagreen;
}

#dongxi {
  display:flex;
  flex-direction:row;
  justify-content:center;
  width:100%;
  height:fit-content;
  flex-wrap: wrap;
  gap: 16px;
}

input {
  font-family:'Louize';
  font-size: 24px;
  border: none;
  width: -webkit-fill-available;
  height: 48px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 16px;
  padding-bottom: 16px;
  border-radius: 20px;
}

textarea {
  all: unset;
  caret-color: red;
  font-size: 18px;
  width:100%;
}

.diary {
  margin:8px;
}

#label {
  font-size:12px;
  text-align:center;
}

#id {
  display:flex;
  flex-direction:column;
  background-color: white;
  width: 100%;
  align-items:center;
  gap:16px;
}

#me {
  display:flex;
  flex-direction:row;
  width: 100%;
  align-items:center;
}

#preview {
  background-color:mediumaquamarine;
  width:-webkit-fill-available;
}

#filters {
  align-items: center;
  background-color:yellow;
  display:flex;
  flex-direction:row;
  gap:16px;
  width:100%;
  height:48px;
}

#details{
  display:flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
  padding:16px;
}

#details p {
  width:100%;
  text-align:left;
}

#details img {
  width:100%;
}

.price {
  font-size:30px;
  margin:12px;
  color:blue;
}
.currency {
  font-size:12px;
}

#seller, #organizer{
  display:flex;
  flex-direction:row;
  align-items:center;
  width:100%;
}


#pdp_preview {
  background-color:mediumaquamarine;
  background-image:url('assets/ginseng.jpg');
  width:100%;
  height:50%;
  margin: 8px;
  border-radius: 6px;
}

.item_details {
  padding:8px;
  margin:0;
}

#page {
  width:100%;
  height:100%;
  overflow-y:scroll;
}
.content { /* create content page! */
  display:none;
  flex-direction:column;
  align-items:center;
  background-color:black;
  width:100%;
  height:100%;
}
.wode {
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.convo {
  flex-direction:column;
  gap:1px;
}
.ai {
  align-items: flex-end;
  flex-direction:column;
}
/*.feed {
  flex-flow: row wrap;
  background-color:green;
  overflow-y: scroll;
}*/
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: masonry;
}

.product, .gathering{
  flex-direction:column;
}
.riji {
  flex-direction:column;
}
.composer {
  background-color: lightskyblue;
  height: -webkit-fill-available;
  margin: 30px;
  width: -webkit-fill-available;
}
.profile {
  flex-direction:column;
}

.item {
  background-color:white;
  margin:6px;
  height: -webkit-fit-content;
}


.hellosnake {
  background-color:white;
  height:100%;
  width:100%;
}

#datepick {
  display: flex;
  flex-direction: row;
  gap: 18px;
  width: 100%;
  font-size: 24px;
  justify-content: space-evenly;
  align-items:center;
  height:96px;
}

#day {

}

#reminders{
  width:100%;
  height:-webkit-fit-content;
}

#month{
font-size: 20px;
padding: 12px;
text-align: center;
background-color: gray;
margin: 0 auto;
color: white;
}

h3 {
  all:unset;
  font-size:18px;

}

#entry {
  all:unset;
  width:100%;
  height:400px;
  background-color:white;
}

#appbar {
  z-index:99;
  display:flex;
  flex-direction:row;
  gap:24px;
  justify-content: space-evenly;
  width: 100%;
  background-color: white;
  align-items:flex-start;
}

#pdpbar {
  z-index:99;
  display:flex;
  position:sticky;
  bottom:0;
  flex-direction:row;
  gap:24px;
  justify-content: space-evenly;
  width: 100%;
  height: 128px;
  background-color: white;
  align-items:flex-start;
}

#navbar {
  display:flex;
  position:sticky;
  flex-direction:row;
  gap:24px;
  align-items: center;
  top: 0px;
  width: 100%;
  background-color: #ffffff00;
}

#wuxing {
  background-color: blue;
  width:32px;
  height:32px;
}
#xiaoxi {
  background-color: yellow;
  width:32px;
  height:32px;
}

#disc {
  display:flex;
  justify-content: center;
  align-items: center;
  background:lightsteelblue;
/*  background: conic-gradient(from 180deg at 50% 50%, #444E5A 0deg, #516983 28.8deg, #818E62 74.61deg, #79A799 108.84deg, #6691BC 140.35deg, #444E5A 179.1deg, #818E62 235deg, #89A380 258.75deg, #6691BC 316.42deg, #516983 340.98deg, #444E5A 359.78deg, #444E5A 360deg);*/
  mix-blend-mode: normal;
  opacity: 0.6;
  transform: rotate(90deg);
  border-radius:50%;
  width:300px;
  height:300px;
  outline: 2px solid white;
  margin-top:30px;
  animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
#disc_hole {
  background-color:#d0d0d0;
  width:50px;
  height:50px;
  border-radius:50%;
  outline: 8px solid white;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

/*big screen style*/
@media (min-width:36em) {
  html {
    padding-left: 16px;
    padding-top: 16px;
    background-color:#555;
  }
  #device {
    height: 812px;
    width: 375px;
    outline: 3px solid #E4CDDD;
    border-radius: 40px;
  }
  #appbar {
    border-radius: 0% 0% 40px 40px;
  }
}