@layer base, theme, layout, content, component


@layer base{
	body {
		font-size: 16px;
		line-height: 1.5rem;
		font-family: serif;
	}	
}


@layer theme{
	:root{
		--alert-bg-color:white;
		--alert-font-color:red;

		/*Light Mode*/
		--primary-color:whitesmoke;
		--secondary-color:black;
		--tertiary-color:white;
		--quaternary-color:rgba(255, 105, 180, .5);
		--font-primary-color:black;
		--font-secondary-color:ghostwhite;
		--font-tertiary-color:black;
		--shadow-color:Gainsboro;
		--svg-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(5deg) brightness(102%) contrast(102%);

		/*dark mode*/
		@media (prefers-color-scheme: dark){
			--primary-color:#1A1A1A;
			--secondary-color:darkgrey;
			--tertiary-color:black;
			--quaternary-color:hotpink;
			--font-primary-color:whitesmoke;
			--font-secondary-color:black;
			--font-tertiary-color:whitesmoke;
			--shadow-color:#202020;		
			--svg-filter: invert(0%) sepia(100%) saturate(0%) hue-rotate(184deg) brightness(97%) contrast(106%);
		}
	}
	::selection{
		background-color:var(--quaternary-color);
	}

}

@layer layout{
	body {
		background-color: var(--primary-color);
		color:var(--font-primary-color);
		padding: 0;
		margin: 0;
	}

	header{
		background-color: var(--secondary-color);
		box-shadow: 1px 1px 2px 2px var(--shadow-color);
		color: var(--font-secondary-color);

		width: 100%;
		margin: 0;
		position: fixed;
		top: 0;		
	}
}


@layer content{
	h1{
		font-size: 1.25rem;
	}

	p {
		font-size: 1rem;
	}
}

@layer component {
	header{
		display: block;
	}

	main {
		margin-top: 4rem;
	}
	
	Section {
		justify-items: center;
	}	

	.logo_container{
		display: inline-flex;
		align-items: center; /* Align vertical */
	}

	.logo {
		height: 3rem;
		width: 3rem;
		margin-left: 0.5rem;
		margin-right: 2rem;
	}

	.less_very{
		display: inline;
		font-size: 2rem;
		padding-top: 0.5rem;
	}

	.less_very_extn{
		display: none;
		@media screen and (min-width:800px){
			display: inline;
		}
	}

	.menu {
		float: right;
		margin: 1rem;
		filter: var(--svg-filter);
	}


	.card {
		margin: auto;
		margin-top: 0.5rem;
		background-color: var(--tertiary-color);
		border-radius: 10px;
		box-shadow: 3px 3px 3px 2px var(--shadow-color);
		display: flex;

		width: 85%;
		min-height:10rem;
		max-height:80%;

		@media screen and (min-width:700px){
			width: 75%;
			height:12rem;
		}


		@media screen and (min-width:800px){
			width: 65%;
			height:12rem;
		}

		@media screen and (min-width:1024px){
			width: 50%;
			height:12rem;
		}
	}

	.word {
		margin: 0 10px 0 10px;
		min-width: 25%;
	}

	.wordImage{
		width: 200px;
		height: 200px;
		margin: 0px;
		margin: 0 10px 0 10px;
	}

	.quotes {
		margin: 0 10px 0 10px;
	}


}