/*
-   Website-0 "indardanus"
-   Copyright by https://github.com/MayankDevil/
-   Designed | Developed by Mayank
-   CSS : ./css/responsive.css
*/
/*
	1200PX SCREEN ----------------------
*/
@media screen and (max-width:1200px)
{
		
}
/*
	992PX SCREEN ----------------------
*/
@media screen and (max-width:992px)
{
	#header .row
	{
		display: block;
		width: 90%;
		margin:auto;
	}
	.package4
    {
        margin:3px;
    }
	#gradient
	{
		grid-template-columns: 1fr 1fr 1fr 1fr;
		margin: 1rem auto;
	}
	#header .row .col:last-child{

		position: fixed;
		z-index: 10;
		top: 0;
		right: 0;
		width: 300px;
		margin: 5%;
		display: block;
		padding: 1rem;
		background: rgba(255,255,255,0.5);
		backdrop-filter: blur(15px);
		border: 1px solid var(--dark3);
		border-radius: 20px;
	}
	#toggle_btn
	{
		display: flex;
	}
}
/*
	768PX SCREEN ----------------------
*/
@media screen and (max-width:768px)
{
	#header
	{
		min-height: auto;
	}
	section
	{
		width: 90%;
		margin:auto;
		padding: 5vh 0;
		border-bottom: 1px solid var(--gray);
	}
	#gradient
	{
		grid-template-columns: 1fr 1fr 1fr;
		margin: 1rem auto;
	}
	.row
	{
		display: block;
		grid-template-columns: 1fr;
		grid-template-rows:auto auto;
	}
	/* SERVICE */
	#navbar
	{
		width: 80%;
		margin:auto 1rem;
	}
	/* CONTENT */
	h1
	{
		text-align: right;
		padding:2rem 0;
		font-size:15vw;
	}
	h2
	{
		padding: 1rem 0;
	}
	h3
	{
		font-size: 1.2rem;
	}
	p
	{
		padding: 1rem 0 10vh 0;
	}
	/* COLOR TESERT */
	#colourPicker
	{
		width: 100%;
		margin:2rem auto;
		grid-template-columns:100%;
		grid-template-rows: 2fr;
	}
	#colorButton
	{
		aspect-ratio: 5/1;
	}
	#colorField
	{
		width: auto;
		font-size: 1rem;
	}
	/* THEMES */
	#themes
	{
		display: grid;
		grid-template-rows: 8fr 2fr;
	}
	.colorBox
	{
		padding: 0;
		text-align: center;
		font-size:1rem;
	}
	#compareButton
	{
		display: grid;
		place-content: space-between;
	}
	#compareButton > div
	{
		display: block !important;
		width: 100%;
	}
	#compareButton > div:last-child
	{
		padding: 1rem 0;
		grid-row:1/2;
	}
	
	.package4
    {
        margin:1px;
	    height: 10vh;
    }
}
/*
	576PX SCREEN ----------------------
*/
@media screen and (max-width:576px)
{
	#copyright
	{
		display: grid;
		place-content: start;
	}
	/* SECTION */
	h2
	{
		word-spacing: auto;
	}
	/* COMBINATION */
	
	/* COLOR NAME */
	#namepackage
	{
		grid-template-columns:repeat(138,0.6%);
	}
	
	.package4
    {
        margin:0;
	    width: 11%;
	    height: 5vh;
    }
	#gradient
	{
		grid-template-columns: 1fr;
	}
	.package5
    {
        margin: 1rem auto;
	    width: 40vh;
	    height: 40vh;
		border-radius: 1rem;
    }
	#footer .copyright
	{
		display: grid;
		grid-gap: 1rem;
	}
}
/*
	350PX SCREEN ----------------------
*/
@media screen and (max-width:375px)
{
	/* FOOTER */
	#copyright
	{
		padding: 1.5rem 3vw;
	}
}
/*
THE END =============================
*/