/* =============================================================================
  UNIVERSAL SETTINGS
============================================================================= */
/* Box sizing rules */
*, *::before, *::after {box-sizing:border-box;}
/* Remove default margin padding and text styles */
* {margin:0; padding:0; border:0; color:hsla(220, 6%, 10%, 1.0); font:inherit;}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'], ol[role='list'] {list-style:none;}
/* Set core root defaults */
html:focus-within {scroll-behavior:smooth;}
/* Set core body and font defaults + Main Grid Container Properties */
html, body {display:grid; min-height:100vh; grid-template-columns:1fr; grid-template-rows: auto 1fr auto; grid-template-areas:'header' 'main' 'footer'; font-size:62.5%; font-family:'Montserrat', sans-serif; text-rendering:optimizeSpeed;} 
/* A elements that don't have a class get default styles */
a:not([class]) {text-decoration-skip-ink:auto;}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {html:focus-within {scroll-behavior:auto;} *, *::before, *::after {animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}}
/* Background Image Style */
#bg {position:fixed; top:-50%; left:-50%; width:200%; height:200%;}
#bg img {position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; min-width:50%;min-height:50%;}
/* Make images and Video easier to work with */
img, picture, svg {max-width:100%; min-width:40px; display:block;}
.video {position:relative; width:100%; padding-bottom:56.25%; margin-bottom:0.5rem;}
.video iframe {position:absolute; top:0; left:0; width:100%; height:100%;}
/* =============================================================================
  ROOT COLOUR & FONT STYLE MASTERS
============================================================================= */
/* Colour PALETTE and Font STYLES */
:root { /* Colour PALETTE */
--clr-black: hsla(220, 6%, 10%, 1.0);
--clr-pink: hsla(343, 85%, 59%, 1.0);
--clr-cream: hsla(24, 100%, 99%, 1.0);
--clr-white: hsla(0, 0%, 100%, 1.0);
--clr-shadow: hsla(0, 0%, 30%, 0.1);
--clr-cream-main: hsla(0, 0%, 100%, 0.4);
--clr-cream-article: hsla(0, 0%, 100%, 0.5);
/* Font SIZE */
--fs-h1:1.8rem; /* =18px */
--fs-h2:2rem; /* =20px */
--fs-h3:1.8rem; /* =18px */
--fs-h4:1.4rem; /* =14px */
--fs-h5:1.6rem; /* =16px */
--fs-p:1.4rem; /* =14px */
--fs-b:1.4rem;
--fs-i:1.4rem;
--fs-a:1.4rem;
--fs-navi:1.6rem;
/* Font WEIGHT */
--fw-h1:600;
--fw-h2:700;
--fw-h3:600;
--fw-h4:500;
--fw-h5:500;
--fw-b:600;}
/* =============================================================================
  FONT STYLES
============================================================================= */
h1 {font-size:var(--fs-h1); font-weight:var(--fw-h1)}
h2 {font-size:var(--fs-h2); font-weight:var(--fw-h2); color:var(--clr-pink); text-transform:uppercase;}
h3 {font-size:var(--fs-h3); font-weight:var(--fw-h3); padding:0rem 0rem 0.25rem 0rem;}
h4 {font-size:var(--fs-h4); font-weight:var(--fw-h4); margin:0rem 0rem 1rem 0rem; padding:0rem 0rem 0.5rem 0rem; border-bottom:1px solid; border-color:var(--clr-pink)}
h5 {font-size:var(--fs-h5); font-weight:var(--fw-h5)}
p {font-size:var(--fs-p)}
b {font-size:var(--fs-b); font-weight:var(--fw-b)}
i {font-size:var(--fs-i); font-style:italic;}
a {font-size:var(--fs-a); text-decoration:none;}
.literature-text h3 {padding:0rem 0rem 1rem 0rem;}
.literature-text h4 {margin:0rem; padding:1rem 0rem 1rem 0rem; border-bottom:none; border-top:1px solid; border-color:var(--clr-pink)}
.literature-text p {padding-bottom:2rem; column-count:3; column-gap:2rem;}
/* Link STYLES */
a.page, a.page:visited {color:var(--clr-pink)}
a.page:hover, a.page:active {color:var(--clr-black)}
/* SVG STYLES */
svg, svg:visited {fill:var(--clr-black)}
svg:hover, svg:active {fill:var(--clr-pink)}
/* =============================================================================
  HEADER SECTION STYLES
============================================================================= */
/* Header Styles - PAGE SECTIONS */
header {grid-area:header;}
.header-region {z-index:2; background-color: var(--clr-cream); margin:0rem 0rem 1rem 2rem; border-radius:2rem 0rem 0rem 2rem;}
.sticky {position:-webkit-sticky; position:sticky; top:0;}
.navi-wrapper {padding-right:2rem; display:flex; justify-content:space-between; align-items:center;}
/* LOGO Styles */
.logo {display:inline-block;}
.logo-image, .logo-text {display:inline-block; vertical-align:middle;}
.logo-text h1 {width:max-content; padding-right:1rem;}
/* PRIMARY NAVIGATION Style */
.navi-list {list-style-type:none;}
.primary-navi li {display:inline-block; text-align:center;}
.primary-navi a, a:visited {color:var(--clr-black); font-size:var(--fs-navi); display:block; padding:0.6rem 1rem; margin:0.5rem 0.2rem; border-radius:0.5rem; 
  -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease;}
.primary-navi a:hover, a:active {color:var(--clr-cream); background-color:var(--clr-pink)}
/* Navigation Toggle STYLES */
.menu {display:none;}
.menu-line {width:20px; height:3px; margin:3px; background-color:var(--clr-black);}
/* =============================================================================
  MAIN CONTENT STYLES
============================================================================= */
/* Main Styles - PAGE SECTIONS */
main {grid-area:main;}
.main-region {background-color:var(--clr-cream-main); z-index:1; margin:1rem 2rem; padding:1rem; border-radius:1rem; backdrop-filter:blur(1rem)}
/* FLEX CONTAINER Styles */
.flex-container {display:flex; flex-direction:row; flex-wrap:wrap; align-items:stretch; justify-content:space-between;}
/* PAGE HEADING Styles */
.page-header {flex:1 0 98%; padding:0rem 2rem;}
/* ARTICLE Styles */
.article {background-color:var(--clr-cream-article); box-shadow:0px var(--clr-shadow); flex:1 0 23%; padding:1rem; margin:1rem; border-radius:0.5rem;
  -webkit-transition-property:background-color, box-shadow; -moz-transition-property:background-color, box-shadow; -o-transition-property:background-color, box-shadow; transition-property:background-color, box-shadow;
  -webkit-transition-duration:0.5s; -moz-transition-duration:0.5s; -o-transition-duration:0.5s; transition-duration:0.5s;
  -webkit-transition-timing-function:linear; -moz-transition-timing-function:linear; -o-transition-timing-function:linear; transition-timing-function:linear;}
.article:hover {background-color:var(--clr-white); box-shadow:2px 2px 3px 3px var(--clr-shadow)}
/* PROJECT Styles */
.project {background-color:var(--clr-cream-article); box-shadow:0px var(--clr-shadow); flex:1 0 96%; padding:0.5rem; margin:1rem; border-radius:0.5rem;
  -webkit-transition-property:background-color, box-shadow; -moz-transition-property:background-color, box-shadow; -o-transition-property:background-color, box-shadow; transition-property:background-color, box-shadow;
  -webkit-transition-duration:0.5s; -moz-transition-duration:0.5s; -o-transition-duration:0.5s; transition-duration:0.5s;
  -webkit-transition-timing-function:linear; -moz-transition-timing-function:linear; -o-transition-timing-function:linear; transition-timing-function:linear;}
.project:hover {background-color:var(--clr-white); box-shadow:2px 2px 3px 3px var(--clr-shadow)}
.project-image-container {display:flex; flex-direction:row; align-items:stretch; justify-content:space-between;}
.project-image-flex {flex:1 0 20%; margin:0.5rem;}
.project-text {margin:0rem 0.5rem 0.5rem 0.5rem;}
.literature-text {margin:0.5rem;}
/* Contact Article STYLES */
.contact-flex {display:flex; flex-direction:row; align-items:center; justify-content:center;}
.contact-image {padding:1rem; flex:1;}
.contact-image img {border-radius:0.5rem;}
.contact-text {padding:1rem; flex:2;}
/* =============================================================================
  FOOTER CONTENT STYLES
============================================================================= */
/* Footer Styles - PAGE SECTIONS */
footer {grid-area:footer; padding:1rem 1rem 0rem 0rem;}
.footer-region {z-index:1; display:flex; justify-content:flex-end; margin:1rem 2rem 0rem 0rem; padding:1.8rem 1.4rem; border-radius:0rem 1rem 0rem 0rem; background-color: var(--clr-cream)}
/* FOOTER Styles */
.footer-text {display:inline-block; vertical-align:middle;}
.social {display:inline-block; vertical-align:middle; margin:0rem 0rem 0rem 1rem;}
/* =============================================================================
  Responsive MEDIA-QUERYS
============================================================================= */
@media all and (max-width:80rem) {
  /* Article */
  .project-image-container {flex-wrap:wrap;}
  .article, .project-image-flex {flex:1 0 40%;}
  .literature-text p {padding-bottom:2rem; column-count:2; column-gap:2rem;}
  .contact-flex {flex-direction:column;}
  .contact-image {padding:1rem;}
  .contact-text {padding:1rem;}}
@media all and (max-width:56rem) {
  /* Primary Navigation */
  .logo {width:100%;}
  .navi-wrapper {flex-direction:column; padding-right:0rem;}
  .menu {display:block; position:absolute; right:2rem; top:1rem;}
  .navigation {width:100%; border-radius:1rem;}
  .primary-navi {display:none;}
  .primary-navi li {display:block;}
  .primary-navi a, a:visited {margin:0.8rem 0.8rem; border-radius:1rem;} 
  .active {display:block;}
  /* Article */
  .article, .project-image-flex {flex:1 0 40%;}}
@media all and (max-width:45rem) {
  /* Region */
  .main-region {margin:0rem 1rem; padding:0.5rem;}
  .header-region {margin:0rem 0rem 1rem 1rem;}
  .footer-region {margin:1rem 1rem 0rem 0rem;}
  /* Primary Navigation */
  .menu {right:1rem;}
  /* Article */
  .page-header {padding:0rem 1.5rem;}
  .article, .project-image-flex {flex:1 0 80%;}
  .article {margin:0.5rem;}
  .project {margin:0.5rem;}
  .literature-text p {padding-bottom:2rem; column-count:1; column-gap:2rem;}
  .contact-image {padding:0.5rem;}
  .contact-text {padding:0.5rem;}
  /* Footer */
  .footer-region {padding:1.2rem 0.7rem 1.2rem 1.2rem;}}