/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{
	line-height:1.15;
	-webkit-text-size-adjust:100%
}
body{
	margin:0
}
main{
	display:block
}
h1{
	font-size:2em
}
hr{
	box-sizing:content-box;
	height:0;
	overflow:visible
}
pre{
	font-family:monospace, monospace;
	font-size:1em
}
a{
	background-color:transparent
}
abbr[title]{
	border-bottom:none;
	text-decoration:underline;
	text-decoration:underline dotted
}
b,strong{
	font-weight:bolder
}
code,kbd,samp{
	font-family:monospace, monospace;
	font-size:1em
}
small{
	font-size:80%
}
sub,sup{
	font-size:75%;
	line-height:0;
	position:relative;
	vertical-align:baseline
}
sub{
	bottom:-0.25em
}
sup{
	top:-0.5em
}
img{
	border-style:none
}
button,input,optgroup,select,textarea{
	font-family:inherit;
	font-size:100%;
	line-height:1.15;
	margin:0
}
button,input{
	overflow:visible
}
button,select{
	text-transform:none
}
button,[type="button"],[type="reset"],[type="submit"]{
	-webkit-appearance:button
}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{
	border-style:none;
	padding:0
}
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{
	outline:1px dotted ButtonText
}
fieldset{
	padding:0.35em 0.75em 0.625em
}
legend{
	box-sizing:border-box;
	color:inherit;
	display:table;
	max-width:100%;
	padding:0;
	white-space:normal
}
progress{
	vertical-align:baseline
}
textarea{
	overflow:auto
}
[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="search"]{
	-webkit-appearance:textfield;
	outline-offset:-2px
}
[type="search"]::-webkit-search-decoration{
	-webkit-appearance:none
}
::-webkit-file-upload-button{
	-webkit-appearance:button;
	font:inherit
}
details{
	display:block
}
summary{
	display:list-item
}
template{
	display:none
}
[hidden]{
	display:none
}
html,body{
	width:100%;
	overflow-x:hidden
}
html{
	box-sizing:border-box
}
*,*::before,*::after{
	box-sizing:inherit
}
body{
	position:relative
}
hr{
	display:block;
	border:0;
	border-top-width:1px;
	border-top-style:solid;
	margin:0;
	margin-bottom:-1px;
	padding:0
}
a{
	text-decoration:none;
	color:inherit
}
a.muted{
	color:inherit
}
a:hover,a:focus{
	text-decoration:underline
}
a:visited{
	color:inherit
}
a,a:hover,a:focus,a:active{
	outline:0
}
img{
	vertical-align:middle
}
.media-responsive{
	max-width:100%
}
.clearfix::after{
	content:"";
	display:table;
	clear:both
}
.text-align\:center{
	text-align:center
}
.text-align\:right{
	text-align:right
}
.text-align\:left{
	text-align:left
}
.margin-top\:0{
	margin-top:0
}
.margin-top\:1{
	margin-top:1rem
}
.margin-top\:2{
	margin-top:2rem
}
.display\:flex{
	display:flex
}
*.hidden{
	display:none !important
}
@media screen and (max-width: 650px){
	.hidden-s{
		display:none
}
}
body{
	min-height:100vh;
	display:flex;
	flex-direction:column
}
body main{
	flex:1;
	padding-bottom:2rem
}
.wrapper{
	max-width:1200px;
	margin-left:auto;
	margin-right:auto;
	padding:0 1rem
}
.wrapper\:wide{
	max-width:1800px
}
.grid{
	--auto-grid-min-size: 12rem;
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(var(--auto-grid-min-size), 1fr));
	grid-gap:1rem
}
.grid\:2{
	--auto-grid-min-size: 18rem
}
.padded{
	padding:0 1rem
}
.with-sidebar>*{
	display:flex;
	flex-wrap:wrap;
	margin:-0.5rem
}
.with-sidebar>*>*{
	margin:0.5rem
}
.sidebar{
	flex-basis:16rem;
	flex-grow:1
}
.not-sidebar{
	flex-basis:0;
	flex-grow:999;
	min-width:calc(50% - 1rem)
}
*{
	margin-top:0;
	margin-bottom:0
}
[class*='stack']>*{
	margin-top:0;
	margin-bottom:0
}
[class*='stack']>*+*{
	margin-top:var(--space)
}
.stack>*{
	--space: 1rem
}
.stack-l>*{
	--space: 2rem
}
[class*='stack']>p+p{
	--space: 1rem
}
html{
	font-size:150%
}
h2{
	font-weight:bold
}
h3{
	font-weight:normal
}
body{
	font-size:.70833333rem;
	line-height:1rem
}
h1{
	font-size:2.83333333rem;
	line-height:2.8rem
}
h2{
	font-size:1.41666667rem;
	line-height:2rem
}
h3{
	font-size:1.13333333rem;
	line-height:1rem
}
h4{
	font-size:.85rem;
	line-height:1rem
}
h5,small{
	font-size:.6375rem;
	line-height:1rem
}
h6{
	font-size:.49583333rem;
	line-height:1rem
}
ul{
	padding-left:1rem
}
ul li{
	list-style-position:outside;
	line-height:1rem;
	padding-left:0.2rem
}
@media screen and (max-width: 650px){
	html{
		font-size:140%
}
}
.top-bar{
	background-color:#fff;
	padding:0.5rem 0;
	position:relative
}
.top-bar .nav-wrapper{
	display:flex;
	justify-content:space-between
}
.top-bar .logo,.top-bar .logo-wrapper{
	max-height:3rem
}
.top-bar .navigation{
	text-align:right;
	align-self:center
}
.top-bar .toggle-button+label{
	fill:currentColor;
	width:1.5rem;
	height:1.5rem;
	line-height:1.5rem;
	text-align:center;
	border-radius:0.25rem;
	display:inline-block;
	user-select:none
}
@media screen and (min-width: 650px){
	.top-bar .toggle-button+label{
		display:none
}
	.top-bar .navigation>*:last-child{
		display:block !important;
		padding:0 !important;
		position:unset !important;
		background-color:transparent !important
}
	.top-bar .navigation>*:last-child ul{
		flex-direction:row !important
}
	.top-bar .navigation>*:last-child ul>*+*{
		margin-top:0
}
}
.top-bar ul{
	list-style:none;
	display:flex;
	flex-direction:column;
	white-space:nowrap;
	padding:0;
	margin:0
}
.top-bar ul>*+*{
	margin-top:0.5em
}
.top-bar ul li{
	padding:0;
	display:block
}
.top-bar ul li a{
	padding:0 1.5ch;
	line-height:1.5rem;
	display:block;
	border-radius:0.25rem;
	text-decoration:none;
	color:inherit;
	fill:currentColor;
	transition:transform 0.15s;
	transition-timing-function:cubic-bezier(0.02, 0.92, 0.5, 1.45)
}
.top-bar ul li a svg{
	height:1.1em;
	display:inline-block;
	vertical-align:baseline;
	margin-bottom:-0.2em
}
.top-bar ul li a:hover{
	background-color:#CA224C;
	box-shadow:0 0.1rem #8d1835;
	color:#fff;
	transform:scale(1.1)
}
.top-bar ul li a:active{
	transform:scale(0.9)
}
.toggle-button{
	display:none
}
.toggle-button+label{
	cursor:pointer
}
.toggle-button~*:last-child{
	display:none
}
.toggle-button:checked~*:last-child{
	display:block;
	position:absolute;
	top:4.25rem;
	right:0;
	background-color:#fff;
	z-index:100;
	padding:1rem;
	border-radius:0.25rem
}
html{
	color:#4A0E30;
	font-family:'Muli', sans-serif
}
h1{
	font-family:'Francois One', sans-serif
}
footer{
	background-color:#CA224C;
	padding:1rem;
	text-align:center;
	color:#FFA3BA
}
footer a,footer a:visited{
	color:#f8c3d0
}
a.button{
	text-align:center;
	display:inline-block;
	background-color:#CA224C;
	color:#fff;
	padding:0.5rem 2rem;
	border-radius:0.25rem;
	box-shadow:0 3px #961938
}
a.button:hover,a.button:visited,a.button:focus{
	text-decoration:none
}
a.button:hover{
	background-color:#db2a57
}
a.button:active{
	background-color:#b41e44
}
.box{
	background-color:#096;
	padding:1rem;
	text-align:center;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#fff;
	height:5rem;
	border-bottom:5px solid #008055;
	position:relative;
	border-radius:3px;
	text-decoration:none
}
.card{
	padding:1rem;
	background-color:#ddd
}
.card *:first-child{
	margin-top:0
}
.title-bar{
	background-color:#096;
	color:#fff;
	overflow:hidden;
	padding:1rem 0
}
.title-bar+*{
	margin-top:2rem
}
.game-intro{
	background-color:#096;
	background-image:url("bg.png");
	background-size:cover;
	background-position:center center;
	color:#fff;
	overflow:visible;
	height:12rem;
	margin-bottom:2rem;
	position:relative;
	width:100%;
	text-align:center
}
.game-intro .game-logo{
	max-width:100%;
	width:20rem;
	margin:auto;
	display:block;
	position:absolute;
	bottom:-2rem;
	right:0;
	left:0
}
.game-icon{
	width:100px;
	height:100px;
	float:left;
	border-radius:15px;
	margin:0 15px 0 0
}
.game-slug{
	font-weight:normal;
	text-align:center;
	font-size:1.105rem
}
.store-buttons{
	text-align:center
}
.store-buttons img{
	height:2rem;
	margin:0 0.25rem 0.5rem
}
#game_details{
	box-sizing:border-box;
	text-align:center
}
#game_details::after{
	content:"";
	clear:both;
	display:block
}
#game_video{
	width:100%;
	padding:0 0 56.25% 0;
	position:relative;
	margin:0 0 30px 0
}
#game_desc{
	padding:20px;
	text-align:center;
	width:100%;
	font-size:larger
}
.embed-responsive{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	width:100%;
	height:100%;
	border:0
}
@media screen and (min-width: 650px){
	#game_desc{
		padding:20px;
		text-align:left;
		width:calc(100% - 300px);
		margin:0 auto
}
}
@media screen and (max-width: 650px){
	.box{
		width:85%;
		margin:auto
}
}
.privacy-block{
	margin:20px auto
}
.privacy-block p{
	text-align:left;
	padding-top:20px
}
.social-links{
	padding:10px
}
.social-links a{
	margin:0 20px;
	line-height:37px;
	display:inline-block;
	font-size:14px;
	height:32px
}
.social-links a svg{
	float:left
}
.kind-home main{
	display:flex;
	flex-flow:column
}
.hero{
	display:flex;
	align-items:center;
	justify-content:center;
	height:calc(100% + 2rem);
	min-height:28rem;
	margin-bottom:-2rem;
	background-color:#492976;
	background-image:radial-gradient(#500e85, #1c143c);
	color:#fff;
	position:relative;
	flex-basis:0;
	align-self:stretch;
	flex-grow:1
}
.hero .splash{
	position:absolute;
	width:100%;
	min-width:60rem;
	top:0;
	left:50%;
	bottom:0;
	margin:auto;
	z-index:0;
	transform:translateX(-50%)
}
.hero .splash .overflown{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	overflow:hidden
}
.hero .splash img{
	position:absolute;
	animation-duration:4.5s;
	animation-name:hover;
	animation-iteration-count:infinite;
	animation-direction:alternate;
	animation-timing-function:ease-in-out
}
.hero .splash img:nth-child(2n+2){
	animation-duration:4s;
	animation-delay:-0.5s;
	animation-fill-mode:both
}
.hero .splash img:nth-child(3n+3){
	animation-duration:5s;
	animation-direction:alternate-reverse
}
.hero .splash img:nth-child(4n+4){
	animation-duration:3.5s
}
@keyframes hover{
	from{
		transform:translateY(-8%);
		filter:brightness(1.2)
}
	to{
		transform:translateY(8%);
		filter:brightness(1)
}
}
.hero .hero-copy{
	margin-top:-2rem;
	position:relative;
	z-index:1
}
.hero .hero-copy h1{
	text-shadow:0 6px 0 rgba(0,0,0,0.3)
}
.box-careers{
	background-color:#fff;
	border:1px solid #eee;
	box-shadow:0 3px 10px #eee;
	padding:1rem;
	text-align:center;
	display:flex;
	align-items:center;
	justify-content:left;
	height:5rem;
	position:relative;
	border-radius:17px;
	text-decoration:none;
	overflow:hidden;
	transition:all 0.2s
}
.box-careers img{
	display:block;
	clear:both;
	height:6rem;
	margin-left:-0.5rem;
	margin-bottom:0rem;
	transition:all 0.2s
}
.box-careers a{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0
}
.box-careers:hover{
	transform:scale(1.05)
}
.box-careers:hover img{
	margin-bottom:1rem
}
p.store_links{
	padding-top:30px;
	text-align:center
}
p.store_links img{
	height:2rem;
	margin:0.5rem 0
}
img.game-icon{
	margin:0 15px 15px 0;
	float:left
}
#contact input[type="text"],#contact input[type="email"],#contact input[type="tel"],#contact input[type="url"],#contact textarea,#contact button[type="submit"]{
	font:400 12px/16px "Roboto", Helvetica, Arial, sans-serif
}
#contact{
	background:#F9F9F9;
	padding:25px;
	margin:15px 0;
	box-shadow:0 0 20px 0 rgba(0,0,0,0.2),0 5px 5px 0 rgba(0,0,0,0.24);
	border-radius:10px
}
#contact h3{
	display:block;
	font-size:24px;
	font-weight:300;
	margin-top:40px;
	float:right
}
#contact h4{
	margin:5px 0 15px;
	display:block;
	font-size:13px;
	font-weight:400
}
fieldset{
	border:medium none !important;
	margin:0 0 10px;
	min-width:100%;
	padding:0;
	width:100%;
	text-align:left
}
#contact input[type="text"],#contact input[type="email"],#contact input[type="tel"],#contact input[type="url"],#contact textarea{
	width:100%;
	border:1px solid #ccc;
	background:#FFF;
	margin:0 0 5px;
	padding:10px
}
#contact select{
	border:1px solid #ccc;
	background:#FFF;
	margin:0 0 5px;
	padding:10px
}
#contact input[type="text"]:hover,#contact input[type="email"]:hover,#contact input[type="tel"]:hover,#contact input[type="url"]:hover,#contact textarea:hover{
	-webkit-transition:border-color 0.3s ease-in-out;
	-moz-transition:border-color 0.3s ease-in-out;
	transition:border-color 0.3s ease-in-out;
	border:1px solid #aaa
}
#contact textarea{
	height:100px;
	max-width:100%;
	resize:none
}
#contact button[type="submit"]{
	cursor:pointer;
	width:100%;
	border:none;
	background:#4CAF50;
	color:#FFF;
	margin:0 0 5px;
	padding:10px;
	font-size:15px
}
#contact button[type="submit"]:hover{
	background:#43A047;
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out
}
#contact button[type="submit"]:active{
	box-shadow:inset 0 1px 3px rgba(0,0,0,0.5)
}
.copyright{
	text-align:center
}
#contact input:focus,#contact select:focus,#contact textarea:focus{
	outline:0;
	border:1px solid #aaa
}
::-webkit-input-placeholder{
	color:#888
}
:-moz-placeholder{
	color:#888
}
::-moz-placeholder{
	color:#888
}
:-ms-input-placeholder{
	color:#888
}
.upload-btn-wrapper{
	position:relative;
	overflow:hidden;
	display:inline-block
}
.btn{
	border:1px solid #ccc;
	background-color:white;
	padding:10px 20px;
	font-size:14px;
	color:#777
}
.upload-btn-wrapper input[type=file]{
	font-size:100px;
	position:absolute;
	left:0;
	top:0;
	opacity:0
}
/*# sourceMappingURL=style.css.map */

.embed-responsive {
    width: 560px;
    height: 315px;
    position: relative;
}

.social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
    gap: 10px; /* Optional: Adds spacing between icons */
}

.social-links a {
    display: inline-block;
    margin: 0 10px; /* Adjusts spacing between icons */
}

h4 {
    text-align: center;
    margin-bottom: 10px; /* Adjust to reduce the space below */
}

/* Remove any padding or margin from the container holding the iframe and social links */
#game_video, .social-links {
    margin: 0;
    padding: 0;
}

/* Adjust iframe to remove any padding or margin */
#game_video iframe {
    display: block;
    margin: 0 auto;
}

/* Reduce any extra space under the social links */
.social-links {
    margin-top: 5px;
}

/* General fix to remove possible bottom margins from all divs */
div {
    margin-bottom: 0;
}

/* Reduce any possible padding or margin between the h4 and social icons */
h4 {
    margin-bottom: 5px;
    padding: 0;
}

/* Comments section styling */
.comments-section {
    max-width: 800px;
    margin: 20px auto;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.comments-section h4 {
    font-size: 1.5rem;
    color: #4a0e30;
    margin-bottom: 20px;
}

.comments-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.comment {
    display: flex;
    flex-direction: column;
    padding: 10px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comment-name {
    font-weight: bold;
    color: #4a0e30;
}

.comment-stars {
    display: flex;
}

.comment-stars img {
    width: 20px;
    height: 20px;
}

.comment-body {
    margin-top: 10px;
    font-size: 1rem;
    color: #333;
}

.comment-footer {
    font-size: 0.9rem;
    color: #777;
    margin-top: 5px;
}

/* Optional: If you want to reduce the gap between the iframe and comments */
#comments-section {
    margin-top: 10px;
}

/* Comment form section styling */
.leave-comment-section {
    max-width: 600px;
    margin: 20px auto;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 10px;
    text-align: center;
}

#comment-form label {
    font-size: 1rem;
    color: #4a0e30;
}

#comment-text {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

#rating {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

#submit-comment {
    background-color: #4a0e30;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: not-allowed; /* Cursor shows disabled */
}

#submit-comment:enabled {
    cursor: pointer;
    background-color: #CA224C;
}

#submit-comment:hover:enabled {
    background-color: #db2a57;
}

p {
    font-size: 1rem;
}

/* Logo styling */
.logo-wrapper {
    display: block;
    max-height: 60px; /* Adjust the height as needed */
}

.logo {
    height: 100%;
    max-width: 150px; /* Adjust the width as needed */
}

nav.top-bar {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 20px; /* Adjust as needed */
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}

@media screen and (max-width: 650px) {
  .top-bar .nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .toggle-button + label {
    position: absolute;
    right: 20px; /* Move to the right side */
    top: 15px;   /* Adjust top positioning as needed */
  }
}

/* General font-size adjustments for mobile */
@media screen and (max-width: 650px) {
  
  /* Adjust the body font-size */
  body {
    font-size: 0.9rem; /* Reduce the body font size */
  }

  /* Reduce font size for h1, h2, h3, h4, etc. */
  h1 {
    font-size: 1.8rem; /* Smaller h1 for mobile */
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.2rem;
  }

  h4 {
    font-size: 1rem;
  }

  /* Reduce font size for paragraphs and other text */
  p {
    font-size: 0.9rem; /* Smaller paragraph text */
  }

  /* Adjust button font sizes */
  button {
    font-size: 0.9rem; /* Smaller button text */
  }

  /* Reduce font-size for other elements like labels and inputs */
  label, input, textarea, select {
    font-size: 0.85rem; /* Adjust as needed */
  }

  /* Adjust specific sections that seem too large */
  .game-logo {
    max-width: 15rem; /* Reduce logo size */
  }

  .comments-section h4 {
    font-size: 1.2rem; /* Make comment section heading smaller */
  }

  /* Adjust the social-links icons for smaller screens */
  .social-links a {
    font-size: 0.8rem; /* Smaller icon font */
  }
}

/* Force the YouTube embed to be smaller on mobile */
@media screen and (max-width: 650px) {
  #game_video iframe {
    width: 100% !important;  /* Force full width */
    height: 150px !important; /* Force smaller height */
    max-width: 350px;         /* Optional: limit maximum width */
  }
}

button[type="submit"],
#submit-comment {
    background-color: #CA224C;
    color: white;
}

/* Hidden by default */
.hidden {
    display: none;
}

.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup-content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    width: 80%;
    max-width: 400px;
    inline-size: auto;	
}

.popup-content h2 {
    color: #CA224C;
}

.popup-content button {
    padding: 10px 20px;
    background-color: #CA224C;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.popup-content button:hover {
    background-color: #b41e44;
}

.revealed {
    color: #4a0e30; /* Reveal text color */
    filter: none; /* Remove blur */
    cursor: default;
    transition: filter 0.5s ease, color 0.5s ease;
}

.revealed {
    background-color: transparent;
    color: #4a0e30;
    font-weight: bold;
    letter-spacing: normal;
    cursor: default;
    transition: color 0.5s ease, background-color 0.5s ease;
}

@keyframes waveAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


.revealed {
    color: #4a0e30; /* Reveal text color */
    text-shadow: none;
    filter: none; /* Remove blur effect */
    cursor: default;
    transition: filter 0.5s ease, color 0.5s ease;
}

.revealed {
    color: #4a0e30; /* Reveal text color */
    filter: none; /* Remove blur */
    cursor: default;
    transition: filter 0.5s ease, color 0.5s ease;
}
.censored {
    filter: blur(3.5px); /* Apply simple blur effect */
}

.revealed {
    color: #4a0e30; /* Reveal text color */
    filter: none; /* Remove blur */
    cursor: default;
    transition: filter 0.5s ease, color 0.5s ease;
}

/* Global reset for responsiveness */
html, body {
    width: 100%;
    overflow-x: hidden; /* Avoid horizontal scrolling on mobile */
}

/* General container responsiveness */
.wrapper {
    max-width: 100%; /* Ensure content scales */
    padding: 0 2%; /* Small padding for mobile */
}

/* Responsive for the blurred code link */
.censored {
    word-wrap: break-word; /* Allow long text to wrap */
    word-break: break-all; /* Force breaks in long links */
    max-width: 100%; /* Ensure it doesn't overflow horizontally */
    text-align: center; /* Center the text */
    font-size: 4vw; /* Responsive text size */
    letter-spacing: 0.5vw; /* Adjust letter-spacing */
}

/* Media Query for small screens (up to 600px) */
@media screen and (max-width: 600px) {
    .censored {
        font-size: 3.5vw; /* Adjust font size for smaller screens */
        letter-spacing: 0.4vw;
    }

    /* Adjusting buttons, inputs, etc. */
    #submit-btn, #account-id {
        width: 30%; /* Make buttons and inputs full width */
        font-size: 4vw;
        padding: 3vw; /* Responsive padding */
    }

    /* Adjust popup width for small screens */
    .popup-content {
        width: 90%;
        font-size: 3.5vw; /* Responsive text size */
        padding: 4vw; /* Responsive padding inside the popup */
    }
}

/* Media Query for medium screens (up to 768px) */
@media screen and (max-width: 768px) {
    .censored {
        font-size: 3vw; /* Slightly smaller font size */
        letter-spacing: 0.3vw;
    }

    #submit-btn, #account-id {
        font-size: 3.5vw;
        padding: 2.5vw;
    }

    .popup-content {
        width: 85%;
        font-size: 3vw;
    }
}

/* Media Query for larger screens (up to 1024px) */
@media screen and (max-width: 1024px) {
    .censored {
        font-size: 2.5vw;
        letter-spacing: 0.2vw;
    }

    #submit-btn, #account-id {
        font-size: 3vw;
        padding: 2vw;
    }

    .popup-content {
        width: 80%;
        font-size: 2.5vw;
    }
}