@charset "UTF-8";
/* CSS Document */
/* Paula Scher Styles */

/* page turquoise rgba(123,205,209,1.00)

page blue rgba(30,48,79,1.00)
				rgba(123,205,209,1.00)

   page white/grey gba(248,248,248,1.00) */

body{
	background-color:rgba(248,248,248,1.00);
}

.PaulaScher-intro{
	background-color:rgba(30,48,79,1.00);
}

.PaulaScher-header{
	border:1px dashed var(--toggle);
	/* background-color:rgba(30,48,79,1.00); */
	/* background-color:white; */
	background-color:rgba(248,248,248,1.00);
	height:20vh;
	width:100vw;
	align-content:center;
	
}

.PaulaScher-header-container {

	background-color:rgba(248,248,248,1.00);
	width:100%;
	max-width: 1464px;
	border:1px dashed var(--toggle);
	align-content: center;	
	justify-content:center;
	margin:auto;
	background-color:rgba(123,205,209,1.00);
}


.PaulaScher-brand-and-products{
	border:1px dashed var(--toggle);
	/* background-color:white; */
	background-color:rgba(248,248,248,1.00);
	width:90vw;
}

/*NEW */

.PaulaScher-white-wrapper{
	background-color:white;
	border-radius:50px;
	width:80vw;
	padding:3%;
	max-width:90%;
}

.PaulaScher-category1-wrapper{
	margin-top:0;
	max-width:660px;
	width:100%;
}

/* Background turquoise section*/
.PaulaScher-intro-logo{

	display:flex;
	justify-content:center;
	width:100%;	
	max-width: 1464px;
	/* width:100vw;*/
	background-color:rgba(123,205,209,1.00);
	border-radius:50px 50px 0 0;
	
}

.PaulaScher-intro-logo-specs{
	max-width:300px;
	width:100%;
	margin: 50px;
}

/* DASHBOARD GRID */
.PaulaScher-logo-info-pic-dashboard-wrapper{
	border: 1px dashed var(--toggle);
	display: grid;
	aspect-ratio:1619/1080;
	/* max-width:75vh; */
	width:100%;
	margin:auto;
	height:auto;
	gap:10px;
	grid-template-columns:37.8% 60.65%;
	grid-template-rows: 25% 72.5%;
	grid-template-areas: 
		'logo feature'
		'info feature';
}

/* DASHBOARD AREAS */
.dashboard-logo{
	grid-area: logo;
	border:3px solid rgba(61,46,46,0.00);
	justify-content:center;
	align-content:center;
	border-radius:10px;
	box-shadow:var(--box-shadow);
	overflow:hidden;
	background-color:rgba(123,205,209,1.00);
	padding:5%;
}

.dashboard-info{
	grid-area: info;
	border:3px solid rgba(61,46,46,0.00);
	background-color:rgba(123,205,209,1.00);
	border-radius:10px;
	box-shadow:var(--box-shadow);
	/* justify-content:center; */
	align-content:space-around;
	display:flex;
	flex-wrap:wrap;
	padding:10% 1%;
	overflow:hidden;
	/* gap:5%; */
	container-type:inline-size;

}

.dashboard-feature{
	border:1px dashed var(--toggle);
	grid-area: feature;
	border-radius:10px;
	box-shadow:var(--box-shadow);
	width:100%;
	overflow:hidden;
	padding:0;
	background-color:rgba(123,205,209,1.00);
	padding:4%;
	align-content:center;
}


/* AREA SPECS */

.PaulaScher-logo{
	height:100%;
	width:auto;
	padding:0% 6% 0% 6% ;
	
}

.PaulaScher-info{

	/* font-size: 10cqw; */
	/* border:1px dashed orange; */
	width:100%;

}



.PaulaScher-feature{
	width:90%;
	padding:40px 20px 20px 20px;
	background-color:white;
	box-shadow:var(--box-shadow);
	border-radius:10px;
	aspect-ratio:398/438;
	align-content:center;

}

.PaulaScher-feature-img{
	width: 100%;
	height:auto;
	apect-ratio: 490/830;
}

/* ENDS DASHBOARD SECTION */


/* LOGO DEFINITION SECTION */

.PaulaScher-definition{
	border:1px solid black; 
	align-content:center; 
	padding:10px; 
	margin-bottom:20px; 
	max-width:75vh;
	border-radius:10px;
}

.PaulaScher-definition-box{
	display: flex; 
	gap:10px; 
	border-radius:10px; 
	padding:10px; 
	text-align:left;
}

.PaulaScher-definition-text{
	text-align:left; 
	text-justify:left; 
	border-radius:10px; 
	width:auto;
}


/* CLOSES LOGO DEFINITION SECTION */


/* DIVIDERS */
.PaulaScher-divider{
	background-color: var(--toggle);
	height:3vh;
	width: 100vw;
}

.PaulaScher-divider-half{
	background-color: var(--toggle);
	height:1.5vh;
	width: 100vw;
}

.PaulaScher-divider-small{
	background-color: var(--toggle);
	height:0.375vh;
	width: 100vw;
}

.PaulaScher-divider-double{
	background-color: var(--toggle);
	height:6vh;
	width: 100vw;
}


.PaulaScher-header-tile-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0px;
	margin: auto;
	list-style: none;
	border:1px dashed var(--toggle);
	height:auto;
}



/* MY DESIGN PROCESS SECTION */
.the-process{
	/* border:1.5px solid #b61f2f; 
	box-shadow: var(--box-shadow); */
	max-width:800px;
	padding:50px 20px 50px 20px;
	border-radius:20px;
	/* background-color:rgba(221,85,159,1.00); */
	color:rgba(221,85,159,1.00) ;
}

.PaulaScher-steps-wrapper{
	max-width:800px;
	text-align:left;
	justify-content: center;
	flex-wrap:wrap;
	display:flex;
	gap:10px;
}

.PaulaScher-steps{

	background-color:rgba(123,205,209,1.00);
	color: white;
	border-radius:30px;
	box-shadow: var(--box-shadow);
	padding:10px 20px;
	width: 320px;
	height:150px;
	text-align:left;
	margin-bottom:0px; 
	align-content:center;	
}

/* CLOSES My Design Process section */



.PaulaScher-icon-list{
	max-width:300px;
	padding:10px;
	border:1.5px solid #b61f2f;
	border-radius:20px;
	display:flex;
	justify-content: space-evenly;
	margin-bottom:20px;
	filter:sepia(100%);
}


.PaulaScher-icons{
	display:flex;
	border-radius:30%;
	width:23%;
	min-width:47px;
}


.logo-info-wrapper{
	display:grid;
	height:auto;
	border:1px dashed var(--toggle);
}















/* PREVIOUSLY */

.wrapper-middle{
	border:1px dashed red;
	position:relative;
	border:1px dashed var(--toggle);
	display:flex;
	background-color:rgba(123,205,209,1.00);
	width:100%;
	/* max-height:90vh; */
	height:auto;
	justify-content:center;
}


/* Pages display */


.project-pages-display{
	background-color:rgba(123,205,209,1.00);
	max-width:1464px;
}


.PaulaScher-pages-display-wrapper{
	position:relative;
	/* align-items:center;
	 */ 
	/* align-content:center; */ 
	
	width:auto;
	/* max-height:90vh; */
	height:auto;
	margin:auto;
	aspect-ratio:908px/880px;
}


.PaulaScher-pages-display-container{
	position:flex;
	margin:auto;
	/* align-items:center;
	 */ 
	/* align-content:center; */ 
	
	border-radius:10px;
	/* max-width:680px; */
	width:80vw;
	height:auto;
	max-width:1300px;
}

.PaulaScher-pages-display{
	display:flex;
	aspect-ratio:908px/880px;
	justify-content:center;
	width:100%;
	background-color:rgba(249,249,250,1.00);
	box-shadow:var(--box-shadow);
	border-radius:10px;
}

.PaulaScher-pages-section{
	display:relative;
	background-color:rgba(48,114,117,0.0);
	width:100%;
	justify-content:center;
	aspect-ratio:757/535;
	border:0px;
	box-sizing: border-box;
	padding:0px;
}


.PaulaScher-frame-base{
height:50px;	
}
/* CLOSES Pages display */

.PaulaScher-gallery{
	
	display:flex;
	flex-wrap:wrap;
	gap:20px;
	padding:20px;

	overflow-x: scroll;
	max-height:auto;
	max-width: 1000px;
	justify-content:center;
}

.PaulaScher-image{
	height:auto;
	width:100%;
	
}

.PaulaScher-image-specs{

	width:100%;
	max-width:660px;
	border-radius:0px;
	overflow:hidden;
	border:1px solid black;
}

.PaulaScher-image-specs2{

	overflow:hidden;
	object-fit:cover;
	max-width:660px;
	width:100%;

}


.PaulaScher-video{
	max-width:660px;
	width:93%;
	overflow:hidden;
	border-radius:10px;
	aspect-ratio:1920/1080;
}

.PaulaScher-video-specs{
	width:100%;
}


.PaulaScher-outro{
	border:1px dashed var(--toggle);
	justify-content: center;
	background-color:rgba(123,205,209,1.00);
	height:auto;
	padding:50px;
}

.PaulaScher-grid{
	border:1px dashed var(--toggle);
	max-width:97%;
	width:1303px;
	gap:1%;
	display:grid;
	grid-template-columns:49.7% 49.7%;
	grid-template-rows:auto;
	grid-template-areas:
		'img1 img2';
}

.PaulaScher-outro-img1{
	grid-area: img1;
	border-radius:10px;
	width:100%;
	overflow:hidden;
	border:1px solid rgba(123,205,209,1.00);
	filter: drop-shadow(5.5px 5.5px 10px  rgba(0,0,0,0.5));
}

.PaulaScher-outro-img2{
	grid-area: 'img2';
	border-radius:10px;
	width:100%;
	overflow:hidden;
	border:1px solid rgba(123,205,209,1.00);
	filter: drop-shadow(5.5px 5.5px 10px  rgba(0,0,0,0.5));
}

.next-project-section{
	position:relative;
	width:100%;
	max-width:1464px;
	height:auto;
	background-color:rgba(123,205,209,1.00);
	border-radius:0 0 50px 50px;
	padding:0 20px;
}

.next-project-container{
	width:50%;
	background-color:white; 
	box-shadow:var(--box-shadow); 
	border-radius:50px; 
	object-fit:cover; 
	overflow:hidden; 
	width:auto; 
	max-width:90vw; 
	padding: 0 20px 0 20px;
}