/*------------------------------------*\,
    #CONTENTS
\*------------------------------------*/
/**

*GENERAL
**webkit-scrollbar . scroll
**big-icon . . . . . icon images
**body . . . . . . . full background

*TOOLS
**gone . . . . . . . instantly gone no matter what
**slow-hide  . . . . slow version of gone
**lined-background . similar to codearea block

*WELCOME
**welcome  . . . . . main large text
**title  . . . . . . main title text
**subtitle . . . . . secondary text

*SIGN-IN
**si-section . . . . contains toggle and container
**sign-in  . . . . . only the container
**title  . . . . . . (sign in)
**flexbox  . . . . . 
**submit . . . . . . send to firebase button
**input  . . . . . . textbox for username
**output . . . . . . textbox for password

**/

/*------------------------------------*\
    #GENERAL
\*------------------------------------*/
:root {
    --space-1: 5vw;
    --space-2: 4rem;
    --space-3: 3rem;

	--inner-box-color: rgba(105, 105, 100, 0.26);

	--welcome-z-index: 5;

	--image-size-1: 15rem;
	--image-size-2: 5rem;

	--sidebar-active: 1px;

	--line-width:100px;

    --palette-index-1: #07090F;
    --palette-index-2: #8B8B8B;
    --palette-index-3: #74E924;
    --palette-index-4: #FFC437;
	--palette-index-5: #191919;
    --palette-index-6: #aa9353;
}


body {
    /*background: var(--palette-serika-3); gradient for success?
    background: radial-gradient(circle,var(--palette-serika-3) 0%, var(--palette-serika-5) 100%);*/
    overflow-x: hidden; /*this gets rid of horizontal bar*/
    padding: 0px;
    margin: 0px;
    -webkit-tap-highlight-color: #0e0d0b11;
	/*
    background-image: linear-gradient(94deg,rgba(11, 93, 30, 1) 0%, rgb(73, 139, 71) 100%) 4px;
	*/
    background-color: var(--palette-index-1);
	
}

.big-icon{
	position: relative;
	background: none;
	width: 100%;
	image-rendering: pixelated;
}

/*------------------------------------*\
    #TOOLS
\*------------------------------------*/
.gone{
	display: none;
	padding: 0%;
}

.slow-hide{
	transition: padding 1s, size 1s;
	padding: 0%;
	size: 0%;
	width: 0px;
	height: 0px;
}
.slow-hide * {
	display: none;
	visibility: none;
}
/*
.slow-hide > * {
	display: none;
}
*/

.lined-background {
	--line-size: min(8rem, 10vw);

 	background-image: repeating-linear-gradient(
        to bottom,
        #333333 0px,
        #333333 0px,
        #1a1a1a 1px,
        #1a1a1a var(--line-size)
    );
    background-attachment: local;
}

@property --shadow-size {
	syntax: "<length>";
	inherits: false;
	initial-value: 2px;
}

.text-shadow {
	text-shadow:
		calc(-1 * var(--shadow-size)) calc(-1 * var(--shadow-size)) 0 #000,  
		var(--shadow-size) calc(-1 * var(--shadow-size)) 0 #000,
		calc(-1 * var(--shadow-size)) var(--shadow-size) 0 #000,
		var(--shadow-size) var(--shadow-size) 0 #000;
}

.welcome-img {
	width: var(--image-size-1);
	height: var(--image-size-1);
	image-rendering: pixelated;
}

.normal-img{
	image-rendering: pixelated;
	/*max-height: 10%;
	max-width: 10%;*/

	width: 320px;
	height: 320px;
}

.topbar-toggle{
	z-index: 30;
}

/*------------------------------------*\
    #MAIN CONTENT
\*------------------------------------*/
@media (orientation: landscape) {
	.home-topbar{
		position: relative;
		top: 0;
		display: flex;
		flex-direction: row;
		align-content: center;
		justify-content: center;
		width: 100%;
		background-color: rgba(147, 169, 243, 0.137);
	}

	.main-logo{
		display: flex;
		flex-direction: row;
		gap: 30px;
		image-rendering: pixelated;
		justify-content: center;
		justify-self: center;
		align-items: center;
		padding: 10px;
	}
}

.right-topbar{
	position: absolute;
	right: 0;
	justify-self: flex-end !important;
	align-self: flex-end !important;
}

@media (orientation: portrait) {
	.home-topbar, .main-logo{
		display: none;
	}
}

.main-content{
	position: relative;
	height: 100vh;
	padding: 0;
}

@media (orientation: portrait) {
	.main-content{
		width: 100vw;
	}
	.hero-cta{
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		text-align: center;
		align-items: center;
	}
	.cta-container{
		padding-bottom: 25px;
	}
}

@media (orientation: landscape) {
	.main-content{
		flex-direction: row;
		align-items: center;
		align-self: center;
		justify-self: center;
		width: min(100vw, 800px);
	}
	.hero-cta{
		height: 100%;
		display: grid;
		grid-template-columns: auto auto;
  		grid-template-rows: 10px auto;
		text-align: center;
		align-items: center;
		background-color: #0001;
	}
	.cta-container{
		width: max(30%, 100px);
	}
	.hero-cta-titletext{
		grid-column-start: 1;
		grid-column-end: 3;
  		grid-row: 1;
	}
}

.hero-img{
	image-rendering: pixelated;
	--size: 420px;
	width: var(--size);
	height: var(--size);

	filter: drop-shadow(-3px -63px 65px var(--palette-index-6));
}

.cta-container{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: end;
}

.cta-image{
	/*width: calc(var(--size) * 2);*/
	width: var(--size);
	height: var(--size);

	padding-bottom: 30px;

	transition: filter .1s cubic-bezier(0.215, 0.610, 0.355, 1);
	filter: drop-shadow(-0px -0px 40px var(--palette-index-3));
	image-rendering: pixelated;
}

.cta-image:hover{
	filter: drop-shadow(-0px -0px 100px var(--palette-index-3));
}

.cta-image:active{
	filter: drop-shadow(-0px -0px 10px #00000000);
}

@media (orientation: portrait) {
	.cta-image{
		--size: 150px;
	}
}

.cta-container > label{
	cursor: pointer;
}

@media (orientation: landscape) {
	.cta-image{
		--size: 200px;
	}
	.cta-container > label{
		font-size: 30px;
	}
}


.text-holder{
	background-color: #8B8B8B33;
	transition: transform .1s cubic-bezier(1, 0, 0, 1);
	transform: rotate(1deg) translateY(3px);
	font-size: smaller;
}

@media (orientation: landscape) {
	.text-holder{
		margin-top: 10%;
		align-self: flex-start;
	}
}

.text-holder:active, .text-holder:hover{
	transform: rotate(3deg);
}

@media (orientation: portrait) {
	.text-holder{
		padding-inline: 30px;
		margin: 10px;
	}

}

.small-text{
	font-size: small !important;
	line-height: 160%;
}

.medium-text{
	font-size: medium !important;
	line-height: 160%;
	
}

/*------------------------------------*\
    #UNDER MAIN
\*------------------------------------*/
.under-main{
	display: flex;
	position: relative;
}

@media (orientation: portrait) {
	.under-main{
		height: 100%;
		padding-inline: 5%;
		padding-block: 40%;
		flex-direction: column;
		gap: 100px;
		height: 100%;
	}
}
@media (orientation: landscape) {
	.under-main{
		width: max(30%, 100px);
		flex-direction: column;
		gap: 150px;
		padding-inline: 10px;
		align-self: center;
		justify-self: center;
		height: 100%;
		padding-block: 100px;
	}
}

/*------------------------------------*\
    #SIGN IN
\*------------------------------------*/
.si-section {
	position: relative;
	display: flex;
	flex-direction: row;
}

.sign-in{
	position: relative; 
	padding-inline: .1rem;
	padding-top: 0.5em;
	padding-bottom: 0.7em;
	transition: width .3s ease-in-out, height .3s ease-in-out;
	border: rgba(0, 0, 0, 0.281);
	border-radius: 3rem;
	border-style: solid;
	background-color: #000a;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 40vw;
	height: 30vh;
}

.si-title{
	position: relative;
	left: 0%;
	font-size: 2em;
	text-align: center;
}

.si-button-flexbox{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

.si-submit{
	width: 100px;
	line-height: 0.9em;
}

.si-submit,
.si-input,
.si-output {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 1.5em;
	text-align: center;
	margin: 0.5rem 0.5rem; /* uniform spacing */
	font-size: 0.8em;
	line-height: 0.9em;
}



/*------------------------------------*\
    #PIXEL CARD
\*------------------------------------*/
@property --transition-speed {
  syntax: "<time>";
  inherits: true;
  initial-value: 0.1s;
}

.pixel-card {
  transition: transform var(--transition-speed, 0.5s);

  --pixel-size: 100px;
  /*keep width and height the same*/
  --pixel-width: 10;
  --pixel-height: 10;

  width: calc(var(--pixel-size) * var(--pixel-width));
  height: calc(var(--pixel-size) * var(--pixel-height));
  background: rgb(213, 236, 228);

  border: solid;
  border-style: block;
  border-color: black;
  border-width: var(--pixel-size);

  --clip-inset: 10%;

  --inset-opposite: calc(100% - var(--clip-inset));
  clip-path: polygon(
    0% var(--clip-inset),
    var(--clip-inset) var(--clip-inset),
    var(--clip-inset) 0%,
    var(--inset-opposite) 0%,
    var(--inset-opposite) var(--clip-inset),
    100% var(--clip-inset),
    100% var(--inset-opposite),
    var(--inset-opposite) var(--inset-opposite),
    var(--inset-opposite) 100%,
    var(--clip-inset) 100%,
    var(--clip-inset) var(--inset-opposite),
    0% var(--inset-opposite)
  );

  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.pixel-card:hover {
  transform: rotate(10deg);
}

.pixel-card:active {
  transform: scale(90%) rotate(10deg);
}