/* @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); */

@font-face {
	font-display: swap;
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	src: url(/fonts/Poppins/Poppins-Regular.ttf) format('ttf');
}

/* ::-webkit-scrollbar {
  width: 0.8lvw;
} */

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #858484;
}

::-webkit-scrollbar-thumb:hover {
  background: #666565;
}

/* ::-webkit-scrollbar {
width: 0.75rem;
}
::-webkit-scrollbar-track {
background-color: #edf2f7;
}
::-webkit-scrollbar-thumb {
background-color: #718096;
} */

:root {
  --color-scheme: 'light';
  --theme-bg-color: #ffffff;
  --sz1: 16px;
  --sz2: 0;
  --sz3: 1;
  --sz4: calc((var(--sz1) + var(--sz2)) * var(--sz3));
  --pw: 100lvw;
}

* {
  margin: 0;
  padding: 0;
}

html {
  overflow: hidden auto;
  touch-action: pan-x pan-y;
  -ms-touch-action: pan-x pan-y;
  -webkit-tap-highlight-color: transparent;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: fit-content;
  font-size: 16px;
  font-size: var(--sz1, 16px);
  /* overscroll-behavior: contain;
	  overscroll-behavior-block: contain;
	  overscroll-behavior-inline: contain;
	*/
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  position: relative;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  /* min-width: var(--vw-min, unset); */
  height: 100%;
  min-height: 100vh;
  background-color: #f1f2f3;
  font-family: 'Reddit Sans', sans-serif;
  font-size: 16px;
  font-size: var(--sz4, 16px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* scrollbar-width: thin;
	scrollbar-color: #718096 #edf2f7; */
}

article,
aside,
footer,
header,
nav,
section,
figcaption,
figure,
main {
  display: block;
}

hr {
  box-sizing: initial;
  height: 0;
  overflow: visible;
}

a {
  -webkit-text-decoration-skip: objects;
  text-decoration-skip: objects;
  background-color: initial;
  display: inline-block;
}

audio,
img,
video {
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
  user-select: none;
}

img {
  border-style: none;
}

audio,
img,
video {
  max-width: 100%;
  vertical-align: middle;
}

li,
ul {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-block: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

progress {
  display: inline-block;
  vertical-align: initial;
}

textarea {
  overflow: auto;
}

/* div, main {
  box-sizing: border-box;
} */

[type='checkbox'],
[type='radio'] {
  box-sizing: border-box;
  padding: 0;
}

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}

[type='reset'],
[type='submit'],
button,
html [type='button'] {
  -webkit-appearance: button;
  appearance: button;
}

[type='search']::-webkit-search-cancel-button,
[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  appearance: button;
  font: inherit;
}

#root {
  position: relative;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
	background-image: linear-gradient(-225deg, #5D9FFF 0%, #B8DCFF 48%, #6BBBFF 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
	background-blend-mode: multiply, multiply;

	background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);

	background: linear-gradient(to bottom, #323232 0%, #3F3F3F 40%, #1C1C1C 150%), linear-gradient(to top, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.25) 200%);
	background-blend-mode: multiply;

	background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%); */
}

[no-select] {
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
  user-select: none;
}

[no-pointer] {
  pointer-events: none;
}

.ps {
  display: block;
  width: 100%;
  height: fit-content;
  transition: width 0.3s;
}

.rb {
  display: block;
  width: 100%;
  height: fit-content;
  /* box-shadow: 2px 0 2px 0 rgba(0, 0, 0, .1), -2px 0 2px 0 rgba(0, 0, 0, .1); */

}


/* .ps-landscape:has(> .pi-portrait) {
  width: 70%;
} */

.ps .pi-landscape video {
  aspect-ratio: var(--r, unset);
}

.ps-landscape > .pi-portrait video {
  aspect-ratio: 5 / 3;
}

.ps-portrait .pi-portrait video {
  max-height: calc(100lvh - 10rem);
}

/* .ps-landscape:has(> .pi-portrait) + .rb {
} */

.ps-portrait + .rb {
  margin-top: .5rem;
}

.rb .rl {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@media screen and (width <= 120vh) {
  .rb .rl {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
  }
}

/* @media screen and (width <= 130vh) {
  .rl .rc {
    width: 49%;
  }
} */

.rc .rc-thumb, .rc .rc-title {
  width: 100%;
  position: relative;
}

.rc .rc-thumb {
  > img {
    width: 100%;
    aspect-ratio: 16 / 9;
    transition: transform .1s ease-in;
    z-index: 1;
  }
  > .rc-detail, > img {
    border-radius: min(0.3rem, 0.5lvw);
  }
  /* img:hover {
    transform: scale(1.05);
  } */
}

.rc-thumb .rc-detail {
  width: 94%;
  display: flex;
  height: fit-content;
  position: absolute;
  bottom: 0;
  padding: 3%;
  padding-top: 8%;
  font-size: calc(10% * var(--rc-cs, 10) - 10%);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0.6) 90%);
  pointer-events: none;
  
  > [data-views], > [data-likes] {
    --p: calc(var(--sz4) / 8 * var(--rc-cs, 7));
    position: relative;
    padding-left: var(--p);
    padding-right: 3%;
    font-size: 94%;
    color: hsla(0, 0%, 100%, 0.8);
    align-content: end;
  }
  > [data-views]::before {
    left: 0;
    content: url('/svg/icon/view.svg');
  }
  > [data-views]::after {
    left: var(--p);
    content: attr(data-views);
  }
  > [data-likes]::before {
    left: 0;
    content: url('/svg/icon/heart.svg');
  }
  > [data-likes]::after {
    left: var(--p);
    content: attr(data-likes);
  }
  > [data-views]::before, [data-views]::after, > [data-likes]::before, [data-likes]::after {
    position: absolute;
    height: 94%;
    aspect-ratio: 1;
    opacity: .8;
  }

  > span:nth-child(3) {
    color: #ffffff;
    flex-grow: 1;
    direction: rtl;
  }
}

.rc .rc-title {
  height: auto;
  text-align: start;
}



#ps-title > h1 {
  display: block;
  text-align: start;
  font-size: 100%;
  line-height: 1.1;
  margin-top: .5rem;
  width: 100%;
}

.rc-title > span {
  font-size: calc(10% * var(--rc-cs, 10));
  display: block;
  overflow: hidden;
  padding: .2rem 0 .1rem 0;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
}

.rc {
  a {
    display: block;
    cursor: pointer;
    text-decoration: none;
    font-weight: 400;
    width: 100%;
    color: #1b1b1b;
  }
  a:hover {
    color: #4747e7;
  }
}

.rb .rc {
  position: relative;
  margin-bottom: 1rem;
  width: 100%;
  height: fit-content;
  justify-content: space-between;
  color: #4a5764;
  /* box-shadow: 0px 0px 0px 2px #888888; */
}

@media screen {
  @media (width > 84vh) and (width <= 120vh) {
    .rl .rc {
      font-size: 2lvw;
      width: 31%;
      margin: 0 1%;
    }
  }

  @media (width > 44vh) and (width <= 84vh) {
    .rl .rc {
      font-size: 2.6lvw;
      width: 48%;
      margin: 0 1%;
    }
  }

  @media (width <= 44vh) {
    .rl .rc {
      font-size: 3.8lvw;
    }
  }
}

/*  */
@media screen {
  @media (width <= 400px) {
    :root { --sz1: 12px; }
  }

  @media (width > 400px) and (width <= 700px) {
    :root { --sz1: 13px; }
  }

  @media (width > 700px) and (width <= 1000px) {
    :root { --sz1: 14px; }
  }
  @media (width > 1000px) and (width <= 1300px) {
    :root { --sz1: 15px; }
  }

  @media (width > 1600px) and (width <= 1900px) {
    :root { --sz1: 17px; }
  }

  @media (width > 1900px) and (width <= 2200px) {
    :root { --sz1: 18px; }
  }

  @media (width > 2200px) and (width <= 2500px) {
    :root { --sz1: 20px; }
  }

  @media (width > 2500px) and (width <= 2800px) {
    :root { --sz1: 22px; }
  }

  @media (width > 2800px) {
    :root { --sz1: 25px; }
  }
}

/* responesive ratio: --sz2 */
@media screen {
  @media (width <= 40vh) {
    :root { --sz2: calc(1.5 / 100 * var(--pw)); };
  }
  @media (width > 40vh) and (width <= 50vh) {
    :root { --sz2: calc(1.4 / 100 * var(--pw)); }
  }
  @media (width > 50vh) and (width <= 60vh) {
    :root { --sz2: calc(1.3 / 100 * var(--pw)); }
  }
  @media (width > 60vh) and (width <= 70vh) {
    :root { --sz2: calc(1.2 / 100 * var(--pw)); }
  }
  @media (width > 70vh) and (width <= 80vh) {
    :root { --sz2: calc(var(--pw) / 100); }
  }
  @media (width > 80vh) and (width <= 90vh) {
    :root { --sz2: min(1.1vh, calc(var(--vw-min, 80lvw) * 0.011)); }
  }
  @media (width > 90vh) {
    :root { --sz2: min(1vh, calc(var(--vw-min, 80lvw) / 100)); }
  }
}

/*  */
@media screen  and (width <= 120vh) {
  @media (width > 500px) and (width <= 900px) {
    :root { --sz3: 1.1; }
  }

  @media (width > 900px) and (width <= 1100px) {
    :root { --sz3: 1.2; }
  }

  @media (width > 1100px) and (width <= 1400px) {
    :root { --sz3: 1.3; }
  }

  @media (width > 1400px) and (width <= 1800px) {
    :root { --sz3: 1.4; }
  }

  @media (width > 1800px) {
    :root { --sz3: 1.5; }
  }
}

/*  */
@media screen and (width > 120vh) {
  @media (width <= 500px) {
    :root { --sz3: 0.8; }
  }
  @media (width > 500px) and (width <= 900px) {
    :root { --sz3: 0.85; }
  }
  @media (width > 900px) and (width <= 1100px) {
    :root { --sz3: 0.9; }
  }
  @media (width > 1100px) and (width <= 1400px) {
    :root { --sz3: 0.95; }
  }
  @media (width > 1800px) {
    :root { --sz3: 1.05; }
  }
}

/* @media screen and (orientation: portrait) and (width <= 170vh) {
  main:has(> .ps-landscape > .pi-portrait) {
    flex-direction: row;
  }
} */

/* @media screen and (orientation: landscape) {
  main:has(.ps:not([orientation])) {
    flex-direction: row;
  }

  .ps:not([orientation]) {
    width: 78%;
    padding-right: 1%;
  }

  .ps:not([orientation]) + .rb {
    width: 22%;
    padding-left: 1%;
  }

  .ps:not([orientation])+.rb .rc .rc-title span {
    font-size: min(1lvw, 1.3rem);
  }
} */

/* 
@keyframes loading-in-up {
  0% {
    -webkit-transform: translateY(-1200px) scale(.7);
    transform: translateY(-1200px) scale(.7);
    opacity: .7
  }

  80% {
    -webkit-transform: translateY(0) scale(.7);
    transform: translateY(0) scale(.7);
    opacity: .7
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
  }
}

@keyframes loading-out-down {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
  }

  20% {
    -webkit-transform: translateY(0) scale(.7);
    transform: translateY(0) scale(.7);
    opacity: .7
  }

  to {
    -webkit-transform: translateY(700px) scale(.7);
    transform: translateY(700px) scale(.7);
    opacity: .7
  }
}

@keyframes loading-out-up {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
  }

  20% {
    -webkit-transform: translate(0) scale(.7);
    transform: translate(0) scale(.7);
    opacity: .7
  }

  to {
    -webkit-transform: translate(0, -700px) scale(.7);
    transform: translate(0, -700px) scale(.7);
    opacity: .7
  }
} */
/* 
.loader {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.loader::before,
.loader::after {
  content: "";
  position: absolute;
  border-radius: inherit;
}

.loader::before {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(0deg, #ff00cc 0%, #333399 100%);
  animation: load012323 .5s infinite linear;
}

.loader::after {
  width: 85%;
  height: 85%;
  background-color: #222;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes load012323 {
  to {
    transform: rotate(360deg);
  }
} */