:root {
  --accent: #ff3cac;
  --grey: #111;
  --ltgrey: #222;

  --cursor1: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path fill="%23FF3CAC" stroke="%23111" stroke-width="2" d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.35Z"></path></svg>'), auto;
  --cursor2: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path fill="%23111" stroke="%23111" stroke-width="2" d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.35Z"></path></svg>'), auto;
  --cursor3: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path fill="%23111" stroke="%23FF3CAC" stroke-width="2" d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.35Z"></path></svg>'), auto;
  --cursor4: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path fill="%23FF3CAC" stroke="%23FF3CAC" stroke-width="2" d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.35Z"></path></svg>'), auto;
}
::-moz-selection {
  color: var(--accent);
  background: var(--grey);
}
::selection {
  color: var(--accent);
  background: var(--grey);
}
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: none;
}
#ccenter::-webkit-scrollbar-thumb {
  background: var(--grey);
}
* {
  font-family: "Roboto", sans-serif;
}
html {
  overflow: hidden;
}
body {
  margin: 0;
}
#intro {
  height: 100dvh;
  width: 100dvw;
  position: fixed;
  top: 0;
  left: 0;
  clip-path: inset(0 0 0 0);
  transition: clip-path .2s;
  cursor: var(--cursor2);
  z-index: 1;
}
#intro.hidden {
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
  touch-action: none;
}
#popup {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 30dvmin;
  font-weight: 900;
  color: var(--accent);
  background: var(--grey);
  text-align: center;
  line-height: 100dvh;
  clip-path: inset(0 0 0 0);
  transition: clip-path .2s;
}
#popup.hidden {
  clip-path: inset(0 100% 0 0);
}
#convo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--accent);
  text-align: center;
}
#ccenter {
  display: inline-block;
  width: min(800px, 100dvw);
  text-align: left;
  padding-top: 40px;
  overflow-y: scroll;
  height: 100%;
  box-sizing: border-box;
}
.mspeech {
  font-size: 30px;
  font-weight: 900;
  color: var(--grey);
  margin: 25px 37px 12px 37px;
  transition: transform .4s;
}
.mspeech.offscreen{
  transform: translateX(-100dvw);
}
.bubble {
  display: inline-block;
  font-size: 30px;
  font-weight: 900;
  color: var(--grey);
  margin: 12px;
  padding: 5px 25px;
  border: 5px solid var(--grey);
  border-radius: 20px;
  cursor: var(--cursor1);
  position: relative;
  transition: transform .4s, border .4s, margin .4s;
}
.bubble:hover {
  background: var(--grey);
  color: var(--accent);
}
.bubble.clicked {
  background: var(--grey);
  color: var(--accent);
  transform: scale(1.1);
  z-index: 3;
}
.bubble.hide {
  transform: translateY(-600px) !important;
  z-index: 2;
}
.bubble:after {
  content: "";
  z-index: 2;
  position: absolute;
  bottom: -12px;
  left: 25px;
  transform: rotate(45deg);
  height: 12px;
  width: 12px;
  background: var(--accent);
  border-right: 5px solid var(--grey);
  border-bottom: 5px solid var(--grey);
}
.bubble:hover:after {
  background: var(--grey);
}
.bubble.clicked:after {
  background: var(--grey);
}
#repliesclip {
  text-wrap: wrap;
  overflow: hidden;
  padding-bottom: 40px;
}
#replies {
  transition: transform .2s;
  padding-left: 25px;
  padding-right: 25px;
}
#replies.hide {
  transform: translateY(-600px);
}
#landing {
  background: var(--grey);
  height: 100vh;
  cursor: var(--cursor4);
  overflow: hidden;
  overflow-y: scroll;
  position: relative;

  ::-moz-selection {
    color: var(--grey);
    background: var(--accent);
  }
  ::selection {
    color: var(--grey);
    background: var(--accent);
  }
}
#landing::-webkit-scrollbar-thumb {
  background: var(--accent);
}
#scrollingbg {
  height: calc(100dvh);
  width: 100dvw;
}
#title {
  position: absolute;
  top: 50dvh;
  left: 0;
  transform: translateY(-50%);
  color: var(--accent);
  font-family: "Playfair Display";
  font-size: 18dvmin;
  font-weight: 900;
  overflow: hidden;
}
#bmenu{
  display: flex;
  width: 100%;
  transform: translateY(-100%);
  /* background: var(--grey); */
}
.bbutton {
  flex-grow: 1;
  font-family: "Playfair Display";
  font-size: 30px;
  color: var(--accent);
  text-align: center;
  padding: 20px;
  cursor: var(--cursor3);
}
.bbutton.selected {
  transform: scale(1.5);
}
.bbutton > span {
  font-family: "Playfair Display";
}
.bbutton:hover > span {
  background: var(--accent);
  color: var(--grey);
}
.paragraph {
  color: var(--accent);
  font-size: 20px;
}
#spinner {
	position: relative;
	height: max(300px, 30dvmin);
	width: max(300px, 30dvmin);
  margin-bottom: 5dvmin;
  display: inline-block;
}
#outer {
	position: absolute;
	top: 50%;
	left: 50%;
}
#outer.lock {
	transition: transform .2s;
}
#outerring {
	position: absolute;
	top: min(-150px, -15dvmin);
	left: min(-150px, -15dvmin);
	height: max(300px, 30dvmin);
	width: max(300px, 30dvmin);
	border: 2px solid var(--accent);
	border-radius: 100%;
	box-sizing: border-box;
}
#inner {
	position: absolute;
	top: 50%;
	left: 50%;
}
#innerring {
	position: absolute;
	top: min(-130px, -13dvmin);
	left: min(-130px, -13dvmin);
	height: max(260px, 26dvmin);
	width: max(260px, 26dvmin);
	border: 2px solid var(--accent);
	border-radius: 100%;
	box-sizing: border-box;
}
#centerring {
	position: absolute;
	top: min(-110px, -11dvmin);
	left: min(-110px, -11dvmin);
	height: max(220px, 22dvmin);
	width: max(220px, 22dvmin);
	border: 2px solid var(--accent);
	border-radius: 100%;
	box-sizing: border-box;
  overflow: hidden;
}
#ringtex {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.char {
	position: absolute;
	transform-origin: bottom;
	bottom: 0;
	left: min(-15px, -1.5dvmin);
	font-family: "Overpass Mono";
  color: var(--accent);
	text-align: center;
	width: max(30px, 3dvmin);
	font-size: max(18px, 1.8dvmin);
	font-weight: 900;
	line-height: max(26px, 2.6vmin);
}
.char.outer {
	height: max(150px, 15dvmin);
}
.char.inner {
	height: max(130px, 13dvmin);
}
.encoded {
	font-family: "Overpass Mono";
}
.encoded.match, .encoded.match > a {
  color: var(--accent);
  font-family: "Overpass Mono";
}
.encoded.match > a {
  cursor: var(--cursor3);
  /* font-weight: 900; */
}
.links {
  flex: 1;
  font-family: "Overpass Mono";
  color: var(--ltgrey);
  font-size: 2dvmin;
  word-break: break-all;
}
#maincols {
  min-height: 50dvmin;
  display: flex;
  gap: 5vmin;
  padding: 5vmin;
  margin-bottom: 80px;
}
.keys {
  text-align: left;
  display: inline-block;
}
.key {
  font-family: "Overpass Mono";
  color: var(--accent);
  font-size: 2dvmin;
}
#spinnercolumn {
  text-align: center;
}
#bio {
  position: absolute;
  top: 0;
  right: 0;
  width: 500px;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--grey);
  color: var(--accent);
  padding: 16px;
  font: 2dvmin "Overpass Mono";
  border-left: 10px solid var(--ltgrey);
}
a {
  color: var(--accent);
  cursor: var(--cursor3);
}
#pfp {
  width: 100%;
}
@media (width <= 1000px) {
  #maincols{
    flex-direction: column-reverse;
  }
  .links, .key, #bio {
    font-size: 20px;
  }

  #bio {
    position: initial;
    width: 100%;
    border: none;
  }
}