@charset "UTF-8";
/* CSS Document */
/* Paula Scher CSS Document by Melissa Sherley */

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

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

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

/* Background turquoise section*/
.PaulaScher-intro-logo{
	display:flex;
	justify-content:center;
	width:100%;	
	max-width: 1464px;
	background-color:rgba(123,205,209,1.00);
	border-radius:50px 50px 0 0;
}

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

.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-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%;
}



/**** ((((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;
}


/**** ((((CREATED WITH))) ****/
.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;
}


/**** ((((DASHBOARD))) ****/

/* DASHBOARD GRID */
.PaulaScher-logo-info-pic-dashboard-wrapper{
	border: 1px dashed var(--toggle);
	display: grid;
	aspect-ratio:1619/1080;
	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);
	align-content:space-around;
	display:flex;
	flex-wrap:wrap;
	padding:28% 8%;
	overflow:hidden;
	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{
	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;
}

/**** ((((THE BRIEF))) ****/

.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;
}

.PaulaScher-onepx-line{
	height:1px; 
	background-color:black;
}

.paula-scher-brief{
	padding: 3% 10%;
}


/**** ((((DESIGN OPTIONS))) ****/

.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%;
}

/**** ((((DESIGN PROCESS))) ****/

.the-process{
	max-width:800px;
	padding:50px 20px 50px 20px;
	border-radius:20px;
	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;	
}


/**** ((((BOOK DISPLAY))) ****/

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

.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%;
	height:auto;
	justify-content:center;
}

.PaulaScher-pages-display-wrapper{
	position:relative;
	width:auto;
	height:auto;
	margin:auto;
	aspect-ratio:908px/880px;
}

.PaulaScher-pages-display-container{
	position:flex;
	margin:auto;
	border-radius:10px;
	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;	
}


/**** ((((NEXT PROJECT))) ****/

.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;
}