@charset "UTF-8";
/* CSS Document */

*{
	padding: 0;
	margin: 0;
}

html, body {
    height: 100%;
	overflow: hidden;
}

body{
	font-family: "Roboto Mono", monospace;
	background-color: #f7f8fa;
}

#txt{
	display: flex;
	justify-content: center;
	color: #000;
	margin: 0;
	margin-top: 0;
	background: #fdf024;
	padding: 3px;
	box-shadow: 0 0 0 0.02vw #000;
	font-size: clamp(12px, 1vw, 100px);
	font-weight: 200;
	font-family: "Roboto Mono", monospace;
	align-self: flex-start;
}

.BGVIDEO{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100vw;
	height: 100vh;
	justify-content: center;
	z-index: -1;
	overflow: hidden;
	object-fit: cover;
	pointer-events: none;
	user-select: none;
}

.crt{
	content: "";
	display: block;
	position: fixed;
	height: 100%;
	width: 100%;
	min-height: 100%;
	min-width: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 1000;
    background-size: 100% 2px, 5px 100%;
    pointer-events: none;
	
}

.border{
	border-image: url("border2.png") 40 fill / clamp(24px, 2.0vw, 300px);
    border-style: solid;
	height: 100%;
	width: 100%;
	min-height: 100%;
	min-width: 100%;
	position: fixed;
	z-index: 2000;
	pointer-events: none;
	box-sizing: border-box;
}


.container{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	width: 100%;
    box-sizing: border-box;
	padding: clamp(26px, 2.2vw, 570px);
	padding-bottom: 0;
	
}

.flicker{
	position: fixed;
    background-color:rgba(0,0,0,0.08);
	max-width: 100%;
	min-width: 100%;
	top: 0px;right: 0px;bottom: 0px;left: 0px;
	pointer-events: none;
	z-index: 999;
}


@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

.flicker  {
   -webkit-animation: flickerAnimation .08s infinite;
   -moz-animation: flickerAnimation .08s infinite;
   -o-animation: flickerAnimation .08s infinite;
    animation: flickerAnimation .08s infinite;
}

.FadeInsquare{
	position: fixed;
	background-color: #000;
	max-width: 100vw;
	min-width: 100vw;
	max-height: 100vh;
	min-height: 100vh;
	top: 0px;right: 0px;bottom: 0px;left: 0px;
	pointer-events: none;
	z-index: 1111;
	opacity: 0;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 3s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

nav{
	position: fixed;
	left: 0;
	right: 0;
	display: flex;
	width: 100%;
    background: linear-gradient(180deg, #84c8fb, #3d7297);
	height: 4vw;
	min-height: 56px;
	align-content: center;
	color: #FFF;
	font-size: clamp(16px, 1.2vw, 80px);
}

.nav{
	display: flex;
	width: 80%;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
}

.backbtn{
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(180deg, #76afd9, #2d5872);
	border-top: clamp(1px, 0.1vw, 10px) solid #4b7a9a;
	border-left: clamp(1px, 0.1vw, 10px) solid #4b7a9a;
	border-bottom: clamp(1px, 0.1vw, 10px) solid #FFF;
	border-right: clamp(1px, 0.1vw, 10px) solid #4b7a9a;
	outline: clamp(1px, 0.1vw, 2px) inset #457598;
	outline-offset: clamp(-4px, -0.1vw, -2px);
	border-radius: clamp(6px, 0.4vw, 30px);
	padding: clamp(10px, 1vw, 100px);
	font-size: clamp(12px, 1vw, 100px);
	height: 1vw;
	min-height: 30px;
	user-select: none;
	color: #FFF;
	text-decoration: none;
	box-sizing: border-box;
}

nav::after{
	content: "";
	display: flex;
	position: absolute;
	width: 100%;
	height: 50%;
	background: #2d5872;
	opacity: 46%;
	bottom: 0;
	left: 0;
	right: 0;
	filter: blur(3.4px);
	mix-blend-mode: overlay;
	pointer-events: none;
	user-select: none;
	
}

.contentcontainer{
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	background: #FFF;
	align-items: center;
	padding: clamp(18px, 2vw, 80px);
	border: clamp(2px, 0.1vw, 6px) solid #dee6ec;
	margin-top: clamp(70px, 5vw, 300px);
	margin-bottom: clamp(70px, 5vw, 300px);
	overflow-y: scroll;
	overflow-x: hidden;
	width: 32vw;
	min-width: 300px;
}

.profile{
	display: flex;
	gap: 10px;
}

.profile img{
	width: clamp(40px, 3vw, 80px);
	height: clamp(40px, 3vw, 80px); 
}

.username{
	display: flex;
	flex-direction: column;
	font-size: clamp(16px, 1vw, 50px);
}

.description{
	margin: 14px 0px;
	width: 100%;
	font-size: clamp(13px, 1vw, 30px )
}

.media{
	display: flex;
	width: 23vw;
	min-width: 280px;
	margin: 0 auto;
}

.info{
	display: flex;
	flex-direction: column;
	color: #9facb6;
	margin: clamp(10px, 0.4vw, 26px) 0px;
	font-size: clamp(10px, 0.9vw, 20px);
}

.date{
	display: flex;
	flex-direction: column;
	color: #9facb6;
	margin: clamp(14px, 0.5vw, 30px) 0px;
	font-size: clamp(10px, 0.9vw, 20px);
}

.interactions{
	display: flex;
	gap: 30px;
	margin: clamp(14px, 0.5vw, 30px) 0px;
}

.interactions img{
	width: clamp(16px, 0.8vw, 50px);
}

.reply{
	display: flex;
	align-items: center;
	color: #9facb6;
	background: #f2f9fb;
	padding: 10px;
	gap: 10px;
	border-bottom: clamp(2px, 0.1vw, 6px) solid #dee6ec;
	
}

.reply a{
	width: 100%;
	display: flex;
	text-decoration: none;
	color: #9facb6;
}

.reply img{
	width: clamp(30px, 2.6vw, 70px);
	height: clamp(30px, 2.6vw, 70px); 
}

.replybtn{
	display: flex;
	align-items: center;
	width: 100%;
	background: #FFF;
	padding: clamp(8px, 0.4vw, 20px);
	border: clamp(2px, 0.1vw, 6px) solid #dee6ec;
	font-size: clamp(10px, 0.9vw, 20px);
}

.replybtn img{
	display: flex;
	width: clamp(18px, 2.2vw, 40px);
	height: auto;
	margin-left: auto;
}

.repliescontainer{
	display: flex;
	gap: clamp(14px, 1vw, 40px);
	margin: clamp(14px, 0.5vw, 30px) 0px;
	border-bottom: clamp(2px, 0.1vw, 6px) solid #dee6ec;
}

.repliescontainer:hover{
	background: #f6f8fa;
}

.replies{
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 0.8vw, 24px);
	font-size: clamp(10px, 0.9vw, 20px);
}

.replies .description{
	margin: 0px;
	font-size: clamp(12px, 1vw, 30px )
}

.mediareply{
	display: flex;
	width: 22vw;
	min-width: 240px;
}

.profilepicture{
	
	width: clamp(30px, 3vw, 80px);
	height: clamp(30px, 3vw, 80px); 
}


hr{
	display: flex;
	margin: 0 auto;
	border: none;
	background: #dee6ec;
	height: clamp(2px, 0.1vw, 6px);
}

.placeholder{
	display: flex;
	justify-content: center;
	align-items: center;
	background:rgba(255,255,255,0.00);
	padding: clamp(10px, 1vw, 100px);
	font-size: clamp(12px, 1vw, 100px);
	height: 1vw;
	min-height: 30px;
	user-select: none;
	text-decoration: none;
	box-sizing: border-box;
	pointer-events: none;
	color: rgba(255,255,255,0.00);
	
}

.medialink{
	cursor: zoom-in;
	text-decoration: none;
}

@media(max-width: 500px){
	body{
		background: #FFF;
	}
	
	.border{
		border-image: url("border2.png") 40 fill / clamp(24px, 2vw, 300px);
	}
	
	.contentcontainer{
		width: 88%;
	    display: flex;
		border: none;
		margin: 0 auto;
		margin-top: clamp(50px, 5vw, 300px);
	    margin-bottom: clamp(30px, 5vw, 300px);
	}
	
	.nav{
		width: 74%;
	}
}

@media(max-width: 480px){
	.contentcontainer{
		min-width: 290px;
	}
	
	.media{
		min-width: 220px
	}
	
	.mediareply{
		min-width: 180px;
	}
	
	.repliescontainer .interactions{
		margin: clamp(10px, 0.3vw, 30px) 0px;
	}
}

@media(max-width: 420px){
	.contentcontainer{
		min-width: 260px;
	}
	
	.media{
		min-width: 210px
	}
	
	.mediareply{
		min-width: 180px;
	}
	
	.repliescontainer .interactions{
		margin: clamp(10px, 0.3vw, 30px) 0px;
	}
}

@media(max-width: 370px){
	
	.contentcontainer{
		min-width: 220px;
	}
	
	.border{
	border-image: url("border2.png") 40 fill / clamp(20px, 2.8vw, 300px);
    border-style: solid;
	}
}