/*@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Outfit:wght@100..900&display=swap');*/

@font-face {
    font-family: 'Bebas Neue';
    src: url('fonts/bebasneue-regular-webfont.woff2') format('woff2'),
         url('fonts/bebasneue-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
	
@font-face {
    font-family: 'DM Mono';
    src: url('fonts/dmmono-regular-webfont.woff2') format('woff2'),
         url('fonts/dmmono-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Outfit';
    src: url('fonts/Outfit-Regular.woff2') format('woff2'),
        url('fonts/Outfit-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


    

    @font-face {
    font-family: 'gg sans Normal Regular';
    font-style: normal;
    font-weight: normal;
    src: local('gg sans Normal Regular'), url('fonts/gg sans Regular.woff') format('woff');
    }
    

    @font-face {
    font-family: 'gg sans Medium Regular';
    font-style: normal;
    font-weight: normal;
    src: local('gg sans Medium Regular'), url('fonts/gg sans Medium.woff') format('woff');
    }
    
/* wheee */
body {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family:'Outfit';
	background:#262222;
}

[data-ir-role="container"][data-ir-active="true"] {
	display: flex;
	flex-flow: column;
	position: relative;
	height: 100%;
	width: 75ch;
	padding: 1rem;
	overflow-y: scroll;
	scroll-behavior: smooth;
}

[data-ir-role="choicebox"] {
	display: flex;
	flex-flow: column;
	gap: 0.5rem;
	font-family:"Outfit";
	text-align:center;
	font-weight:bold;
	text-align:center;
	color:#c20c30;
	padding-top:1rem;
}


#themeDarkInner.lightoverride [data-ir-role="choicebox"] > a:hover {
	color:#262222;
}

[data-ir-role="choicebox"] > a:hover {
	color:#fff;
}

[data-ir-role="continue"] {
	background-color: white;
	clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 0% 0%);
	margin-left: auto;
	height: calc(0.866 * 1rem);
	width: 1rem;
}

#themeDarkInner.lightoverride [data-ir-role="continue"], #themeDarkInner.lightoverridedelayed [data-ir-role="continue"] {
	background-color: #262222;
}

/* menu */
.credits {
	text-align:center; 
	font-size: 1.2rem;
	margin: 0.5rem 0;
	color:#fff;
}

.credits:first-child, .cw:first-child {
	margin-top:7rem;
}

.cw {
	text-align:center; 
	font-size: 1.2rem;
	margin: 0.2rem 0;
	color:#fff;
}

/* container */
#menu {
	z-index:10;
	position: absolute;
	inset: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	background-color: #262222;
}

#themeDark {
	z-index:8;
	position: absolute;
	inset: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
}

#themeDark > img {
    position: fixed;
    inset: 0;
    object-fit: cover;
    width:100%;
    height:100%;
	pointer-events: none;
}

#themeDark > img.appear {
	animation: 1s linear fade forwards;
}
#themeDark > img.appearHalf {
	animation: 0.5s linear fade forwards;
}
#themeDark > img.appearSwap {
	animation: 2s linear fade forwards;
}

#themeDark > img.clear {
	animation: 1s linear fadeout forwards;
}
#themeDark > img.clearHalf {
	animation: 0.5s linear fadeout forwards;
}
#themeDark > img.clearSwap {
	animation: 1s linear fadeout forwards;
}


#themeDark {
	background-color: #262222;
}

#themeDark.lightoverride {
	background-color: #fff;
}

#themeDark.lightoverridedelayed {
	background-color: #262222;
	animation-name: lightdelayed;
	animation-duration: 0.02s;
	animation-delay: 0.84s;
	animation-fill-mode: forwards;
}

#img-flat_toilet_L.hidden {
	opacity:0;
}

#img-flat_toilet_D.lightoverridedelayed {
	animation-name: lightdelayedDisappear;
}

#img-flat_toilet_L.lightoverridedelayed {
	animation-name: lightdelayedAppear;
}

#themeDarkInner.lightoverridedelayed {
	animation-name: lightdelayed;
}

#themeDarkInner.lightoverridedelayed, #img-flat_toilet_D.lightoverridedelayed, #img-flat_toilet_L.lightoverridedelayed  {
	background-color: #262222;
	color:#fff;
	animation-duration: 0.02s;
	animation-delay: 0.84s;
	animation-fill-mode: forwards;
}

@keyframes lightdelayed {
	from {background-color: #262222; color:#fff;}
	to {background-color: #fff; color:#262222;}
  }

  @keyframes lightdelayedDisappear {
	  from {opacity:1}
	  to {opacity:0;}
	}

	@keyframes lightdelayedAppear {
		from {opacity:0}
		to {opacity:1;}
	  }

.smooth {
	transition:2s;
}

.smoothhalf {
	transition:0.5s;
}


#themeDarkInner {
	z-index:9;
	display: flex;
	flex-flow: column;
	position: relative;
	height: 100%;
	width: 50vw;
	padding: 2rem;
	overflow-y: scroll;
	scroll-behavior: smooth;
	font-size:1.2rem;
}

@media screen and (max-width: 1300px) {
	#themeDarkInner {
		width: 60vw !important;
	}
	#themeDarkInner , .cw {
		font-size:1rem !important;
	}
	.tumblrpost-header, .tumblrpost-post {
		font-size:0.8rem !important;
	}
  }

  @media screen and (max-width: 800px) {
	  #themeDarkInner {
		  width: 70vw !important;
	  }
	}


#themeDarkInner {
	background-color: #262222;
	color:#fff;
}

#themeDarkInner.lightoverride {
	background-color: #fff;
	color:#262222;
}

#themeDarkInner > p:first-child {
	margin-top:0;
}

#themeDarkInner > p {
	margin:0.6rem 0;
}

#themeDarkInner [data-ir-role="choicebox"] {
	color:#c20c30;
}

#themeDarkInner.lightoverride [data-ir-role="choicebox"] {
	color:#18186b;
}

/* titles */
.bebasTitle, .bebasTitle-big, .bebasTitle-ending {
	font-family: 'Bebas Neue';
	font-size:3.75vw;
	color:#fff;
	text-align:center;
	margin:0;
}

.bebasTitle-big {
	font-size:12vw;
	margin-top:-2vw !important;
}

.bebasTitle-ending {
	font-size:7vw;
	line-height:1;
	margin-top:4vw !important;
}

#themeDarkInner.lightoverride .bebasTitle-big, #themeDarkInner.lightoverride .bebasTitle-ending {
	color:#262222;
}

.bebasTitle:first-child {
	margin-top:1.5rem;
}

.actTitle-big + [data-ir-role="continue"], .bebasTitle-ending + [data-ir-role="continue"], .warning-final + [data-ir-role="continue"] {
	display:none;
}

.actTitle, .actTitle-big, .actTitle-ending {
	font-family: 'DM Mono';
	font-size:1vw;
	color:#c20c30;
	text-align:center;
	margin:0;
	margin-top:-0.3vw;
	font-weight:bold;
}

.actTitle-ending {
	margin: 0.5vw 0 !important
}

#themeDarkInner.lightoverride .actTitle-big, #themeDarkInner.lightoverride .actTitle-ending {
	color:#18186b;
}

.actTitle-big {
	font-size:1.5vw;
	margin-top:5vw !important;
}

.choices {
	font-size: 1.4vw;
	position: absolute;
	bottom: 0;
	margin: auto;
	width: 100vw;
	margin-bottom: 5vh;
}

.title-back {
	margin-bottom:3rem;
	font-size: 1.4vw;
}

.choices-padding {
	margin-top:5rem;
}

.warning {
	text-align:center;
	margin:0 !important;
}

.warning:first-child {
	margin-top:30vh !important;
}

.warning-final {
	text-align:center;
	font-style: italic;
}

/* text formatting */
.thinking {
	font-family: "DM Mono";
	text-align:right;
	opacity:0.8;
	margin:1rem 0;
}

.buzz {
	padding-left:6rem;
	font-weight:bold;
	color:#24d149;
}

/* whatsapp */
.whatsapp-grey, .whatsapp-green {
	font-family: Helvetica, sans-serif;
	width: max-content;
	max-width: 40%;
	word-break: break-word;
	padding: 0.8rem;
	margin-bottom:0 !important;
}


@media screen and (max-width: 1000px) {
	.whatsapp-grey, .whatsapp-green {
		max-width:50%;
	}
	  }
	  @media screen and (max-width: 600px) {
		.whatsapp-grey, .whatsapp-green {
		  max-width:60%;
	  }
		}

.whatsapp-grey {
	border-radius: 0 0.5rem 0.5rem 0.5rem;
	background: rgb(205, 205, 205);
	color:#000;
	margin-left:10% !important;
}

.whatsapp-green {
	border-radius: 0.5rem 0 0.5rem 0.5rem;
	background: rgb(121, 227, 125);
	color:#000;
	align-self: end;
	margin-right:10% !important;
}

.texting-mid {
	text-align:center;
	font-style: italic;
	margin:0.8rem 10% !important;
	opacity:0.8;
}

/* discord */
.discord {
	font-family: "gg sans Normal Regular";
	color:#DBDEE1;
	width:70%;
	margin:0 auto !important;
	background:#383A40;
	padding:0 1.5rem 1.5rem;
	text-decoration:none;
}


@media screen and (max-width: 1300px) {
	.discord {
		width:80%;
	}
	  }
	  @media screen and (max-width: 800px) {
	  .discord {
		  width:90%;
	  }
		}

.discord.blocked {
	color:#f15757;
}

.discord a {
	color:#00A8FC;
}

.discord .photo {
	margin-top:1rem;
	display:block;
	background-size:cover; 
	background-size: contain;
	border-radius: 0.5rem;
	color:rgba(0,0,0,0);
}

.discord .photo.heycutie {
	background-image:url("../images/hicutie.png");
	width:20vw;
	height: 26vw;
}
@media screen and (max-width: 1300px) {
	.discord .photo.heycutie {  
		width: 25vw;
		height: 33vw;
	}
}
@media screen and (max-width: 800px) {
	.discord .photo.heycutie {    
		width: 35vw;
		height: 46vw;
	}
}

.discord .photo.changeurls {
	background-image:url("../images/changeurls.png");
	width: 20vw;
	height: 25.5vw;
}
@media screen and (max-width: 800px) {
	.discord .photo.changeurls {
		width: 30vw;
		height: 38vw;
	}
}

.discord .photo.thumbsup {
	background-image:url("../images/thumbsup.png");
	width: 14vw;
	height: 13.6vw;
}

.discord .quote {
	display:block;
}

.discord .mid-text {
	opacity:0.8;
	font-style:italic;
	text-align:center;
}

.discord .at {
	font-family: "gg sans Medium Regular";
	color:#C9CDFB;
	background:#3D4270;
	border-radius: 0.3rem;
	padding: 0 0.2rem;
}

.discord.first {
	padding:1.5rem;
}

.discord.L::before {
	content:"L (he/they)";
	display:block;
	font-family: "gg sans Medium Regular";
	color:#e6cd30;
}

.discord.G::before {
	content:"Gestirn | They/Them";
	display:block;
	font-family: "gg sans Medium Regular";
	color:#24d149;
}

.discord.T::before {
	content:"🍃🍃 thistle! (she/it)";
	display:block;
	font-family: "gg sans Medium Regular";
	color:#a8f7ab;
}

.discord.TF::before {
	content:"TF141";
	display:block;
	font-family: "gg sans Medium Regular";
}

.discord.D::before {
	content:"danipead (any)";
	display:block;
	font-family: "gg sans Medium Regular";
	color:#ad53e6;
}

.discord.M::before {
	content:"Mech (they/she)";
	display:block;
	font-family: "gg sans Medium Regular";
	color:#1e7fd9;
}

.discord.C::before {
	content:"CrysterImpt 🌠 she/her";
	display:block;
	font-family: "gg sans Medium Regular";
	color:#75e4f1;
}

.discord.DM-L::before {
	content:"L";
	display:block;
	color:#DBDEE1;
	font-family: "gg sans Medium Regular";
}
.discord.DM-G::before {
	content:"Gestirn";
	display:block;
	font-family: "gg sans Medium Regular";
}
.discord.DM-M::before {
	content:"MechanicalMech";
	display:block;
	font-family: "gg sans Medium Regular";
}
.discord.DM-T::before {
	content:"thistle!";
	display:block;
	font-family: "gg sans Medium Regular";
}
.discord.DM-D::before {
	content:"danipead";
	display:block;
	font-family: "gg sans Medium Regular";
}
.discord.Bot::before {
	content:"Clyde";
	display:block;
	font-family: "gg sans Medium Regular";
}

.discord.text {
	padding:0 1.5rem 1.5rem;
	margin-top:-1.2rem !important;
}

/* tumblr */
.tumblrpost-container {
	background:#fff;
	font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
	color:#000;
	margin:1.5rem auto;
	border-radius:0.5rem;
	width:60%;
	outline:0.2rem #001935 solid;
}

@media screen and (max-width: 1300px) {
.tumblrpost-container {
	width:80%;
}
  }
  @media screen and (max-width: 800px) {
  .tumblrpost-container {
	  width:90%;
  }
	}

.tumblrpost-container.cutoff {
	border-radius:0.5rem 0.5rem 0 0;
}

.tumblrpost-container.cutoff > .tumblrpost-post > p:last-child {
	padding-bottom:0;
}

.tumblrpost-header {
	border-bottom: 1px solid #dedede;
  padding: 1.2rem;
  font-size:1rem;
}

.tumblrpost-footer {
	height:1.5rem;
	/*border-top: 1px solid #dedede;*/
	display:none;
}

.tumblrpost-post {
	font-size: 1rem;
}

.tumblrpost-post > p {
	line-height: 1.5;
	padding: 1.2rem 1.2rem 0;
	margin:0;
}

.tumblrpost-post .image {
	height: 20rem;
	width: 100%;
	background: linear-gradient(45deg, rgba(222,164,152,1) 0%, rgba(4,28,56,1) 100%); 
}

.tumblrpost-post.reblog {
	border-top: 1px solid #dedede;
}

.tumblrpost-post > p:last-child {
	padding-bottom:1.2rem;
}

.tumblrpost-post:last-child > p:last-child {
	padding-bottom:1.6rem;
}

.tumblrpost-user {
	padding: 1.2rem 1.2rem 0;
	line-height:1.2;
}

.follow {
	color:rgb(51, 198, 255);
}

.tumblrpost-user b, .tumblrpost-header .timestamp {
	display: block;
}

.tumblrpost-user::before {
	height: 2.6rem;
	width: 2.6rem;
	background: linear-gradient(45deg, rgba(4,28,56,1) 0%, rgba(233,194,153,1) 100%);
	content: " ";
	display: block;
	float: left;
	border-radius: 0.2rem;
	margin-right: 1rem;
}

.tumblrpost-tags {
	color:rgba(0,0,0,0.65);
}

/* saving */
#themeSave {
	position: absolute;
	font-family: "DM Mono";
	font-size: 1.4em;
	left: calc(25vw - 50vh);
	background:#262222;
	color:#c20c30;
	width: 100vh;
	height: auto;
	z-index: 10;
	transform: rotate(-90deg);
	padding: 0.4em 0.4em 1em;
	opacity:0;
}

#themeSave.lightoverride {
	background:#fff;
	color:#18186b;
}

#themeSave::before {
	content:"saving...";
}
 
/* tools */
.invisible {
	font-size:0;
	color:rgba(0,0,0,0);
}
.blankgap {
	color:rgba(0,0,0,0);
}