/* CSS ZEN GARDEN- NOT TOUCH HTML PROJECT */

/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Plaster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/* VARIABLES */

:root{
  /* Colors (RGBA for transparancy) */
  --color-intro:         rgba(218, 60, 197, 0.85);
  --color-supporting:    rgba(255, 113, 141, 0.70);
  --color-participation: rgba(255, 144, 0,   0.85);
  --color-benefits:      rgba(255, 0,   221, 0.85);
  --color-requirements:  rgba(44,  174, 255, 0.55);
  --color-selection:     rgba(82,  0,   193, 0.55);
  --color-archives:      rgba(255, 0,   0,   0.25);
  --color-resources:     rgba(255, 247, 1,   0.45);

  /* Footer button colors */
  --color-footer: rgba(251, 0, 163, 0.75);
  --color-html:   rgba(255, 7, 201, 0.85);
  --color-css:    rgba(255, 40, 76,  0.85);
  --color-cc:     rgba(179, 74, 17,  0.85);
  --color-a11y:   rgba(220, 173,15,  0.85);
  --color-gh:     #703ACC;

  /* Text */
  --color-text-light:#fff;
  --color-text-dark: #ADADAD;

  /* Fonts */
  --font-heading:'Plaster', system-ui, sans-serif;
  --font-body:   'Playfair Display', serif;

  /* Font sizes (16px base) */
  --fs-h1: 15rem;   /* 240px */
  --fs-h2: 3.875rem;/* 62px */
  --fs-h3: 2rem;    /* 32px */
  --fs-body: 1.5rem;/* 24px */

  /* Line-height & spacing */
  --lh-h1: .825;
  --lh-h2: .677;
  --lh-h3: 1.313;
  --lh-body: 1.333;

  --space-xs:.5rem;
  --space-sm:1rem;
  --space-md:2rem;
  --space-lg:3rem;
  --space-xl:4rem;

  --radius:.25rem;

  /* Layout */
  --max-width: 120rem;       /* 1920px */
  --sidebar-width: 25rem;
  --main-width: calc(100% - var(--sidebar-width));
}

/* Tablet */
@media (max-width:768px){
  :root{
    --fs-h1:7.5rem;   /* 120px */
    --fs-h2:2.5rem;   /* 40px */
    --fs-h3:1.75rem;  /* 28px */
    --fs-body:1.25rem;/* 20px */
  }
}

/* Mobile */
@media (max-width:390px){
  :root{
    --fs-h1:4rem;   /* 64px */
    --fs-h2:2rem;   /* 32px */
    --fs-h3:1.5rem; /* 24px */
    --fs-body:1.125rem;/* 18px */
  }
}

/*  basic style  */
*{	margin:0;
	padding:0;
	box-sizing:border-box}

	html{font-size:16px;scroll-behavior:smooth}


body#css-zen-garden{
 
font: 400 var(--fs-body)/var(--lh-body) var(--font-body);
color: var(--color-text-light);
background: url('../images/background.jpg') center/cover no-repeat fixed;
min-height:100vh;
}

/* Typography*/

h1,h2,h3{ text-transform:uppercase }

h1{
  font-family:var(--font-heading);
  font-size:var(--fs-h1);
  line-height:var(--lh-h1);
  letter-spacing:-.08em;
  color:#ADADAD;
  font-weight:400;
}

h2,h3,p,a{
  font-family:var(--font-body);
  color:#fff;
}

h2{
	font-size:var(--fs-h2); 
	line-height:var(--lh-h2); 
	font-weight:900}

h3{
	font-size:var(--fs-h3);
	line-height:var(--lh-h3);
	font-weight:900}

p {
	font-size:var(--fs-body); 
	line-height:var(--lh-body); 
	margin-bottom:1.5rem}

a {
	text-decoration:none; 
	transition:opacity .3s ease, transform .2s ease}

a:hover,a:focus{
	opacity:.85; 
	text-decoration:underline}

abbr{ 
	text-decoration:none; 
	border-bottom:0 }

/* LAYOUT */

.page-wrapper{
	max-width:var(--max-width);
	margin:0 auto;
	display:flex;
	flex-wrap:wrap; position:relative;
}

/* Intro */

.intro{
	display: flex;
	flex-direction: column;
	justify-content: center;
	width:var(--main-width);
	padding:4rem 5rem;
	min-height:100vh;
	position:relative;
}
.intro::before{
	content:""; 
	position:absolute; 
	inset:0;
	background: var(--color-intro);
	pointer-events:none;
	mix-blend-mode: multiply; 
	
}
.intro > *{ position:relative; z-index:1 }
.intro header{ margin-bottom:3rem }
.intro .summary, .intro .preamble{ margin-bottom:3rem }

/* Main content */

.main.supporting{
	
	width:var(--main-width);
	padding:3rem 5rem;
}

/* each section box */

:is(.explanation,.participation,.benefits,.requirements)
{
	position:relative;
	padding:3rem;
	margin-bottom:2rem;
	border-radius:var(--radius);
	isolation:isolate;
	 
}
.explanation::before,
.participation::before,
.benefits::before,
.requirements::before{
content:""; 
position:absolute; 
inset:0;
border-radius:inherit; 
pointer-events:none;  
z-index:-1;

}
  
.explanation::before    { background:var(--color-supporting) }
.participation::before  { background:var(--color-participation) }
.benefits::before       { background:var(--color-benefits) }
.requirements::before   { background:var(--color-requirements) }

/* Sidebar */
.sidebar{
	width:var(--sidebar-width);
	position:fixed; 
	right:0; 
	top:0;height:100vh; 
	overflow-y:auto;
	padding:3rem 1.5rem; 
	background:transparent;
}
.sidebar::-webkit-scrollbar{ width:8px }
.sidebar::-webkit-scrollbar-track{ background:rgba(255,255,255,.1) }
.sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.3); 
	border-radius:4px }
.sidebar::-webkit-scrollbar-thumb:hover{ 
	background:rgba(255,255,255,.5) }
.sidebar .wrapper{ display:flex; flex-direction:column; gap:1.5rem }

/* cards- sidebar (3 blocks) */
:is(.design-selection,.design-archives,.zen-resources){
	position:relative; 
	padding:1.5rem; 
	border-radius:var(--radius);
}
.design-selection::before{ 
	content:""; 
	position:absolute; 
	inset:0; 
	border-radius:inherit; 
	background:var(--color-selection); 
	pointer-events:none; 
	z-index:-1; }

.design-archives::before { 
	content:""; 
	position:absolute; 
	inset:0; 
	border-radius:inherit; 
	background:var(--color-archives);  
	pointer-events:none; 
	z-index:-1 }

.zen-resources::before   { 
	content:""; 
	position:absolute; 
	inset:0; 
	border-radius:inherit; 
	background:var(--color-resources);  
	pointer-events:none; 
	z-index:-1; }

.design-selection h3, .design-archives h3, .zen-resources h3{ 
	margin-bottom:1rem; 
	font-size:1.25rem }

.design-selection nav ul, .design-archives nav ul, .zen-resources ul{ list-style:none }
.design-selection nav li{ 
	margin-bottom:1.25rem; 
	padding-bottom:1rem; 
	border-bottom:1px solid rgba(255,255,255,.25) }

.design-selection nav li:last-child{ 
	margin-bottom:0; 
	padding-bottom:0; 
	border-bottom:0 }

.design-name{ 
	font-weight:900; 
	letter-spacing:.04em; 
	display:block; 
	margin-bottom:.25rem; 
	font-size:1.125rem }

.designer-name{ 
	opacity:.9; 
	font-size:1rem }

.design-archives nav li, .zen-resources li{ 
	margin-bottom:.75rem }

.indicator{ 
	margin-left:.5rem }

/* Footer */
footer{
	position:relative; 
	padding:2rem 3rem;
	display:flex; 
	gap:2rem; 
	justify-content:center; 
	align-items:center; 
	width:100%;
}
footer::before{ 
	content:""; 
	position:absolute; 
	inset:0; 
	background:var(--color-footer); 
	z-index:-1; 
	mix-blend-mode: multiply;  }

footer a{
	font-weight:900; 
	text-transform:uppercase;
	padding:.75rem 2rem; 
	border-radius:var(--radius);
	display:inline-block; 
	transition:transform .3s ease, box-shadow .3s ease;
 
}
footer a:hover{ 
	transform:translateY(-2px); 
	box-shadow:0 4px 8px rgba(0,0,0,.3); 
	text-decoration:none }

.zen-validate-html{ background:var(--color-html) }
.zen-validate-css { background:var(--color-css)  }
.zen-license     { background:var(--color-cc)   }
.zen-accessibility{background:var(--color-a11y) }
.zen-github      { background:var(--color-gh)   }

/*  Responsive */

@media (max-width:768px){
  .page-wrapper{ 
	  flex-direction:column }
	
  .intro{ 
	  width:100%; 
	  padding:3rem 2rem; 
	  min-height:auto }
	
  .main.supporting{ 
	  width:100%; 
	  padding:2rem }
	
  .sidebar{ 
	  position:static; 
	  width:100%; 
	  height:auto; 
	  padding:2rem }
	
  :is(.explanation,.participation,.benefits,.requirements)
	{ 
		padding:2rem }
	
  footer{ 
	  flex-wrap:wrap; 
	  gap:1rem; 
	  padding:1.5rem }
	
  footer a{ 
	  padding:.5rem 1.25rem; 
	  font-size:1rem }
}

@media (max-width:390px){
  .intro{ padding:2rem 1.5rem }
  .intro header{ margin-bottom:2rem }
  .main.supporting{ padding:1.5rem }
  .sidebar{ padding:1.5rem }
  :is(.explanation,.participation,.benefits,.requirements){     		padding:1.5rem; 
	  margin-bottom:1.5rem }
  .sidebar .wrapper{ 
	  gap:1.25rem }
  .design-selection nav li{ 
	  margin-bottom:1rem; 
	  padding-bottom:.75rem }
  footer{ 
	  flex-direction:column; 
	  gap:.5rem; 
	  padding:1rem }
  footer a{ 
	  width:100%; 
	  text-align:center; 
	  padding:.75rem }
}