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

/* Default styles that apply to all screen sizes */
html {
  touch-action: manipulation;
	height: 100%;
}

body {
	background-color: #000000;
    width: 100%;
    height: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
}

#backgroundCanvas, #splatterCanvas, #logoCanvas {
  	position: fixed !important;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	background-color: transparent; 
}

.TextOverlay1 {
	color: white;
	text-shadow:
    -1px -1px 0 black,
    0px -1px 0 black,
    1px -1px 0 black,
    -1px 0px 0 black,
    1px 0px 0 black,
    -1px 1px 0 black,
    0px 1px 0 black,
    1px 1px 0 black;
	display: block;
	z-index: 3;
	font-family: "Imprima", sans-serif;
	font-weight: 600;
}

.input-area textarea, .input-area textarea::placeholder {
    color: white;
    opacity: 1;
}



.save-dropdown.show {
    display: block;
}

.save-dropdown-item {
    padding: 5px 16px;
    cursor: pointer;
    color: white;
    font-weight: 400;
    font-size: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.2s ease;
}

.save-dropdown-item:last-child {
    border-bottom: none;
}

.save-dropdown-item:hover {
    background-color: #7F4FFF;
    color: #0B0B0B;
    font-weight: 600;
}

#saveDropdown {
    display: none;
}

/* THIS VERSION REMOVES THE RAINBOW AFTER TEXT IS ENTERED
@keyframes rotate-colors {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

.input-area textarea {
    background: 
        linear-gradient(black, black) padding-box,
        linear-gradient(45deg, 
            #ff0000,
            #ff8000,
            #ffff00,
            #80ff00,
            #00ff00,
            #00ff80, 
            #00ffff,
            #0080ff,
            #0000ff,
            #8000ff,
            #ff00ff,
            #ff0080
        ) border-box;
    animation: rotate-colors 3s linear infinite;
}
*/

@keyframes rotate-colors {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

.input-area textarea {
    background: 
        linear-gradient(black, black) padding-box,
        linear-gradient(45deg, 
            #ff0000,    /* Red */
            #ff8000,    /* Orange */
            #ffff00,    /* Yellow */
            #80ff00,    /* Yellow-Green */
            #00ff00,    /* Green */
            #00ff80,    /* Green-Cyan */
            #00ffff,    /* Cyan */
            #0080ff,    /* Cyan-Blue */
            #0000ff,    /* Blue */
            #8000ff,    /* Blue-Purple */
            #ff00ff,    /* Magenta */
            #ff0080     /* Magenta-Red */
        ) border-box;
    animation: rotate-colors 3s linear infinite;
    background-attachment: fixed;
    outline: none;
}


.clear-btn, .share-btn, .save-btn {
	cursor: pointer;
 	/*box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.8);
	border: 1px solid #F1F7F6;*/
	white-space: nowrap;
	background-color: black;
	color: #F1F7F6;
	display: flex; 
	align-items: center;
	justify-content: center;
	min-width: fit-content;
}

.clear-btn:hover { background: #FF0000; }
.share-btn:hover { background: #7F4FFF; }
.save-btn:hover { background: #7F4FFF; }

.clear-btn img, .share-btn img, .save-btn img {
    width: 100%;
    height: 100%;
    pointer-events: none; /* This prevents the img from triggering its own hover */
}

.clear-btn:hover img, .share-btn:hover img, .save-btn:hover img {
    filter: brightness(0);
}

@media (hover: none) and (pointer: coarse) {
    .clear-btn:hover,
	.share-btn:hover {
        background-color: black;
    }
    
    .clear-btn:hover img,
	.share-btn:hover img {
        filter: none;
    }
}

/* PORTRAIT MOBILE (up to 1099px wide) */
@media only screen and (orientation: portrait) and (max-width: 1099px) {


	
.canvas-container {
	position: fixed !important;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	background: white;
	overflow: hidden;
}

#logo {
    width: 12vw;
    height: 12vw;
    opacity: 0.8;
}
	
.InputHolder {
	position: fixed;
	bottom: calc(2vh + 10vw);
	left: 5vw;
	width: 90vw;
	height: auto;
	border-radius: 5px;
	pointer-events: none;
	z-index: 17;
	/* For PWA full screen - If safe-area-inset isn't supported, use 0 */
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.input-area {
	position: absolute;
	top: 0vh;
	width: 100%;
	height: auto;
	display: flex;
	align-items: stretch; /* ensures vertical alignment */
	gap: 1vw;
	border-radius: 7px;
}
	
.textarea-wrapper {
	position: relative;
	flex: 1 1 auto;
	display: flex;
}

.input-area textarea {
	flex: 1 1 auto;
	width: 100%;
	height: 10vw;
	margin: 0;
	padding: 1% 2%;
	padding-top: 10px;
	border-radius: 5px;
	font-family: "Imprima", sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.2;
	resize: none;
	text-align: left;
	box-sizing: border-box;
	vertical-align: top;
	border: 1.5px solid transparent;
}

.input-area button {
	height: 10vw;
    width: 10vw !important;
    flex: 0 0 10vw !important;
	border-radius: 5px;
	font-family: "Imprima", sans-serif;
	font-weight: 500;
	font-size: 18px;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
	align-items: center;
	background-color: black;
	color: #F1F7F6;
	gap: 1vw;
	border: none;
}
	
.input-area button img {
    width: 6vw; /* Smaller than button's 10vw */
    height: 6vw;
    object-fit: contain;
}

#closeBtn {
	position: absolute;
	top: 50%;  /* Center vertically */
	transform: translateY(-50%);  /* Perfect centering */
	right: 1vw;
	width: 5.5vw;
	height: 5.5vw;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	pointer-events: auto;
	z-index: 10;
}

#closeBtn img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
	
.TextOverlay1 {
	position: fixed;
	bottom: 10vh;
	left: 6vw;
	width: 50vw;
	font-size: 21px;
	/* For PWA full screen - If safe-area-inset isn't supported, use 0 */
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
	
.save-dropdown {
	position: fixed;
	top: 28vh;
	bottom: auto;
	left: 21.5vw;
	right: 21.5vw;
	/*border: 1px solid #e2e8f0;*/
	border-radius: 7px;
	box-shadow: -2px 3px 3px -1px rgba(0, 0, 0, 0.8);
	opacity: 1;
	visibility: visible;
	transition: opacity 0s ease, visibility 0.2s ease, transform 0s ease;
	font-family: "Imprima", sans-serif;
	font-weight: 500;
	text-align: center;
	background-color: black;
	color: #F1F7F6;
	z-index: 1000;	
}

}

/* LANDSCAPE MOBILE/TABLET (480px to 1099px wide) */
@media only screen and (min-width: 480px) and (orientation: landscape) and (max-width: 1099px) {

	
.canvas-container {
	position: fixed !important;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	background: white;
	overflow: hidden;
}
	
#logo {
    width: 6vw;
    height: 6vw;
    opacity: 0.8;
}
	
.TextOverlay1 {
	position: fixed;
	bottom: 22vh;
    left: 9vw;
	width: 25vw;
	font-size: 3.2vw;
}
		
.InputHolder {
	position: fixed;
	bottom: calc(6vh + 4.5vw);
	top: auto;
	left: 8vw;
	width: 42vw;
	height: auto;
	border-radius: 5px;
	pointer-events: none;
    z-index: 17;
}

.input-area {
	position: absolute;
	top: 0vh;
	width: 100%;
	height: auto;
	display: flex;
	align-items: stretch; /* ensures vertical alignment */
	gap: 1vw;
	border-radius: 7px;
}
	
.textarea-wrapper {
	position: relative;
	flex: 1 1 auto;
	display: flex;
}

.input-area textarea {
	flex: 1 1 auto;
	width: 100%;
	height: 4.5vw;
	margin: 0;
	padding: 1% 2%;
	padding-top: 10px;
	border-radius: 5px;
	font-family: "Imprima", sans-serif;
	font-weight: 500;
	font-size: 2.2vw;
	line-height: 1.2;
	resize: none;
	text-align: left;
	box-sizing: border-box;
	vertical-align: top;
	border: 1.5px solid transparent;
}

.input-area button {
	height: 4.5vw;
    width: 4.5vw !important;
    flex: 0 0 10vh !important;
	border-radius: 5px;
	font-family: "Imprima", sans-serif;
	font-weight: 500;
	font-size: 18px;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
	align-items: center;
	background-color: black;
	color: #F1F7F6;
	gap: 1vw;
	border: none;
}
	
.input-area button img {
    width: 6vh; /* Smaller than button's 10vw */
    height: 6vh;
    object-fit: contain;
}

#closeBtn {
	position: absolute;
	top: 50%;  /* Center vertically */
	transform: translateY(-50%);  /* Perfect centering */
	right: 1vw;
	width: 2.5vw;
	height: 2.5vw;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	pointer-events: auto;
	z-index: 10;
}

#closeBtn img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}	
	
.save-dropdown {
	position: fixed;
    width: 42vw;
    column-count: 2;
    column-gap: 10px;
	column-rule-width: 1px;
    column-rule-style: solid;
    column-rule-color: rgba(255, 255, 255, 0.1);
    padding: 1vw;
	top: auto;
	bottom: 18vh;
	left: 8vw;
	right: auto;
	border-radius: 7px;
	opacity: 1;
	visibility: visible;
	transition: opacity 0s ease, visibility 0.2s ease, transform 0s ease;
	font-family: "Imprima", sans-serif;
	font-weight: 500;
	text-align: center;
	background-color: black;
	color: #F1F7F6;
	z-index: 1000;
}
	
}

/* DESKTOP (1100px and wider) */
@media only screen and (min-width: 1100px) {

	
.canvas-container {
	position: fixed !important;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	background: white;
	overflow: hidden;
}
	
#logo {
    width: 3vw;
    height: 3vw;
    opacity: 0.8;
}
	
.InputHolder {
    position: absolute;
	height: 6vh;
    top: 5.5vh;
    right: 50.25vw;
    transform: translateX(0%);
    width: 44.75vw;
    max-width: 745px;
    z-index: 25;
}
	
.input-area {
	position: absolute;
	top: 0vh;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: stretch; /* ensures vertical alignment */
	gap: 8px;
	height: 6vh;
	border-radius: 5px;
}
	
.textarea-wrapper {
	position: relative;
	flex: 1 1 auto;
	display: flex;
}
	
.input-area textarea {
	flex: 1 1 auto;
	height: 6vh;
	min-width: 50%;
	margin: 0;
	padding: 1% 2%;
	padding-top: 10px;
	border-radius: 10px;
	font-family: "Imprima", sans-serif;
	font-weight: 600;
	font-size: 22px;
	line-height: 1.6;
	resize: none;
	text-align: left;
	box-sizing: border-box;
	vertical-align: center;
	border: 2px solid transparent;
}
	
.input-area button {
	flex: 0 1 auto; 
	height: 6vh;
	width: auto;
	border-radius: 10px;
	padding: 1.25vh;
	font-family: "Imprima", sans-serif;
	font-weight: 500;
	font-size: 18px;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
	display: flex;
	align-items: center;
	background-color: black;
	color: #F1F7F6;
	gap: 8px;
	min-width: fit-content;
	border: none;
}
	
.input-area button img {
    width: 3.5vh;
    height: 3.5vh;
    object-fit: contain;
}

.TextOverlay1 {
	position: relative;
	top: 15%;
	left: 20%;
	width: 50vw;
	font-size: 25px;
}
	
.save-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
	border: 1px solid #777777;
	border-radius: 10px 10px 10px 10px;
	/*box-shadow: -2px 3px 3px -1px rgba(0, 0, 0, 0.8);*/
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	width: 15vw;
	font-family: "Imprima", sans-serif;
	font-weight: 400;
	text-align: center;
	background-color: black;
	color: #F1F7F6;
	z-index: 1000;
	opacity: 1;
	visibility: visible;
}
	


}