/* 

███████  ██████  ███    ██ ████████ ███████ 
██      ██    ██ ████   ██    ██    ██      
█████   ██    ██ ██ ██  ██    ██    ███████ 
██      ██    ██ ██  ██ ██    ██         ██ 
██       ██████  ██   ████    ██    ███████ 

*/

/* TODO: Delete the Google Fonts below and add the Google Fonts you want to use on your site. Each Google font that you load will slightly increase the download speed of your site so make sure to only included necessary fonts here. */

@import url("https://fonts.googleapis.com/css2?family=Darumadrop+One&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

/*

Imported stylesheets. Remove the ones you do not want to use.

██ ███    ███ ██████   ██████  ██████  ████████      ██████ ███████ ███████ 
██ ████  ████ ██   ██ ██    ██ ██   ██    ██        ██      ██      ██      
██ ██ ████ ██ ██████  ██    ██ ██████     ██        ██      ███████ ███████ 
██ ██  ██  ██ ██      ██    ██ ██   ██    ██        ██           ██      ██ 
██ ██      ██ ██       ██████  ██   ██    ██         ██████ ███████ ███████ 

*/

/* TODO: Delete any stylesheets that you do not want to use. */

@import url("animated-gradient.css");
@import url("text-stroke.css");
@import url("stroke-shadow.css");
@import url("experiments.css");
@import url("style-guide.css");
@import url("scroll-to-top.css");

/*

X-Small devices (portrait phones, less than 576px) 
No media query for `xs` since this is the default in Bootstrap 

███    ███  ██████  ██████  ██ ██      ███████     ███████ ██ ██████  ███████ ████████ 
████  ████ ██    ██ ██   ██ ██ ██      ██          ██      ██ ██   ██ ██         ██    
██ ████ ██ ██    ██ ██████  ██ ██      █████       █████   ██ ██████  ███████    ██    
██  ██  ██ ██    ██ ██   ██ ██ ██      ██          ██      ██ ██   ██      ██    ██    
██      ██  ██████  ██████  ██ ███████ ███████     ██      ██ ██   ██ ███████    ██    
                                                                                       
*/

/* Add Border Box and Smooth Scroll */

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
  cursor: url("../assets/temp/up-cursor.png"), auto !important;
  /* TODO: Change the url above to add a custom cursor. Delete the line above if you want to use the default browser cursor. */
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/* Use variable for to easily change your theme's colour scheme and typography.

██    ██  █████  ██████  ██  █████  ██████  ██      ███████ ███████ 
██    ██ ██   ██ ██   ██ ██ ██   ██ ██   ██ ██      ██      ██      
██    ██ ███████ ██████  ██ ███████ ██████  ██      █████   ███████ 
 ██  ██  ██   ██ ██   ██ ██ ██   ██ ██   ██ ██      ██           ██ 
  ████   ██   ██ ██   ██ ██ ██   ██ ██████  ███████ ███████ ███████ 
                                                                    
*/

/* Design variables refer to CSS variables that store specific design elements, such as colors and typography, which can be utilized throughout a website. Instead of individually modifying each CSS element, designers can quickly make changes by using design variables.

/* TODO: Adjust the variables below, create new variables as desired, and delete the variables that you do not want to use. */

:root {
  --body-typeface: "Darumadrop One", sans-serif;
  --heading-typeface: "Darumadrop One", sans-serif;
  --project-title-typeface: "Darumadrop One", sans-serif;
  --background-color: #ffffff;
  --background-color-about: #ffffff;
  --background-color-footer: #ffffff;
  --alt-background-color: #000000;
  --background-color-holding-page: rgba(0, 0, 0, 0.6);
  --h1-color: black;
  --h2-color: black;
  --h3-color: black;
  --h4-color: black;
  --h5-color: black;
  --h6-color: black;
  --primary-text-color: #222;
  --holding-page-title-color: #ebedf0;
  --accent-color: #000000;
  --overlay-color: #000000;
  --overlay-title-color: #ffffff;
  --overlay-description-color: #ffffff;
  --hyperlink-color: #000000;
  --hyperlink-alternate-color: orangered;
  --hover-color: #2e45a8;
  --visited-color: #000000;
  --project-title-color: #000000;
  --project-sidebar-background-color: transparent;
  --project-sidebar-text-color: black;
  --heart-color: rgb(255, 255, 255);
  --holding-page-footer-color: #f8f8ff;
  --text-selection-background-color: #ffffff;
  --linear-gradient-color-1: #ff057c;
  --linear-gradient-color-2: #8d0b93;
  --linear-gradient-color-3: #321575;
  --stroke-shadow-color: rgba(0, 0, 0, 0.4);
}

body {
  font-family: "Inter", sans-serif;
  color: var(--primary-text-color);
  background: var(--background-color);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* The ::selection CSS pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text). */

::selection {
  background: var(--accent-color);
}

/* Make all images responsive */
img,
svg {
  max-width: 100%;
  height: auto;
  vertical-align: top;
  /* Removes the gap/space in inline elements for text descenders. */
  object-fit: contain;
  /* This is optional. Also try cover or leave out entirely. */
}

.rounded-corners {
  border-radius: 2rem;
}

/* Global & Mobile Typography 

████████ ██    ██ ██████   ██████   ██████  ██████   █████  ██████  ██   ██ ██    ██ 
   ██     ██  ██  ██   ██ ██    ██ ██       ██   ██ ██   ██ ██   ██ ██   ██  ██  ██  
   ██      ████   ██████  ██    ██ ██   ███ ██████  ███████ ██████  ███████   ████   
   ██       ██    ██      ██    ██ ██    ██ ██   ██ ██   ██ ██      ██   ██    ██    
   ██       ██    ██       ██████   ██████  ██   ██ ██   ██ ██      ██   ██    ██    
                                                                                     
*/

h1 {
  font-size: 2rem;
  font-family: var(--heading-typeface);
  margin-bottom: 1rem;
  color: var(--h1-color);
}

h2 {
  font-size: 2.25rem;
  font-family: var(--heading-typeface);
  margin-bottom: 1rem;
  color: var(--h2-color);
}

h3 {
  font-size: 1.325rem;
  margin-bottom: 1rem;
  line-height: 1.3;
  color: var(--h3-color);
}

h4 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: var(--h4-color);
}

h5 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: var(--h5-color);
}

h6 {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: var(--h6-color);
}

p {
  font-size: 1rem;
  line-height: 1.3;
  margin-bottom: 1rem;
}

em {
  font-style: italic;
}

.fineprint {
  font-size: 0.875rem;
}

.hero-headline {
  color: var(--overlay-color);
}

.project-title {
  font-size: 3.725rem;
  font-family: var(--project-title-typeface);
  color: var(--project-title-color);
  margin-bottom: 1rem;
}

.overlay-title {
  font-size: 1rem;
  color: var(--overlay-title-color);
  background: blue;
}

.overlay-description {
  color: var(--overlay-description-color);
}

/* Hyperlink Styles */

a:link {
  color: var(--hyperlink-color);
  text-decoration: none;
}

a:visited {
  color: var(--visited-color);
}

a:hover {
  color: var(--hover-color);
}

a:focus {
  outline: 1px solid var(--accent-color);
}

a:active {
  color: var(--hover-color);
  /* Tap on mobile */
}

.navigation-arrow {
  color: var(--alt-background-color);
}

.navigation-arrow:link {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--accent-color);
  color: transparent;
}

.navigation-arrow:active,
.navigation-arrow:hover {
  color: var(--accent-color);
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--accent-color);
}

.colored-link {
  color: var(--hyperlink-alternate-color);
}

.custom-navigation:hover {
  background: url(assets/temp/heading-background.svg);
  background-size: 15%;
  background-repeat: no-repeat;
  background-position: center center;
}

.heart {
  color: var(--heart-color);
}

.footer-nav-item {
  line-height: 1.3;
}

.award-item {
  line-height: 1.3;
}

.social-item {
  line-height: 1.3;
}

.list-item {
  line-height: 1.3;
  list-style-type: disc;
  margin-left: 1.2rem;
}

.project-description {
  font-size: 1.225rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}

/* Hero 

██   ██ ███████ ██████   ██████  
██   ██ ██      ██   ██ ██    ██ 
███████ █████   ██████  ██    ██ 
██   ██ ██      ██   ██ ██    ██ 
██   ██ ███████ ██   ██  ██████  
                                 
*/

.hero {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
}

.branding-navigation {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 2rem;
  align-items: flex-start;
}

.logo {
  width: 3rem;
  fill: rgb(0, 0, 0);
}

.logo:hover {
  fill: rgb(63, 0, 253);
}

.hero-headline-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  text-align: end;
  border: 10px solid red;
}

.hero-image {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.hero-icon {
  font-size: 4rem;
}

.hero-footer {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.hero-footer-navigation {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 1rem;
}

/* Work Page Layout

██     ██  ██████  ██████  ██   ██     ██████   █████   ██████  ███████ 
██     ██ ██    ██ ██   ██ ██  ██      ██   ██ ██   ██ ██       ██      
██  █  ██ ██    ██ ██████  █████       ██████  ███████ ██   ███ █████   
██ ███ ██ ██    ██ ██   ██ ██  ██      ██      ██   ██ ██    ██ ██      
 ███ ███   ██████  ██   ██ ██   ██     ██      ██   ██  ██████  ███████ 

*/

.work-wrapper {
  flex: 1;
}

/* Padding around work grid and project page */
.portfolio,
.project-wrapper {
  padding: 0.25rem;
}

/* Defining the work page grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 0.25rem;
}

.work-page-grid-item {
  width: 100%;
  height: auto;
  position: relative;
  /* Required to contain overlay size */
}

/* Overlay */
.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 0.75s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 1em;
  background-color: var(--overlay-color);
  transition: opacity 0.3s, visibility 0.3s;
  text-align: center;
}

.work-page-grid-item:hover .overlay {
  visibility: visible;
  opacity: 0.8;
}

/* 

 █████  ██████   ██████  ██    ██ ████████ 
██   ██ ██   ██ ██    ██ ██    ██    ██    
███████ ██████  ██    ██ ██    ██    ██    
██   ██ ██   ██ ██    ██ ██    ██    ██    
██   ██ ██████   ██████   ██████     ██    
                                           
*/

.about {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 5rem;
  background: var(--background-color-about);
  padding: 5rem;
  flex: 1;
}

.about-item-1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.about-item-2 {
  grid-column: 1/ 2;
  grid-row: 2 / 3;
}

.about-item-3 {
  grid-column: 1/ 2;
  grid-row: 3 / 3;
}

/* Global Footer

███████  ██████   ██████  ████████ ███████ ██████  
██      ██    ██ ██    ██    ██    ██      ██   ██ 
█████   ██    ██ ██    ██    ██    █████   ██████  
██      ██    ██ ██    ██    ██    ██      ██   ██ 
██       ██████   ██████     ██    ███████ ██   ██ 
                                                   
*/

.global-footer {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 3rem;
  min-height: 50vh;
  background: var(--background-color-footer);
  padding: 1rem;
}

.footer-item-1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.footer-item-2 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.footer-item-3 {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

.footer-item-4 {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
}

/* Project Page 

██████  ██████   ██████       ██ ███████  ██████ ████████     ██████   █████   ██████  ███████ 
██   ██ ██   ██ ██    ██      ██ ██      ██         ██        ██   ██ ██   ██ ██       ██      
██████  ██████  ██    ██      ██ █████   ██         ██        ██████  ███████ ██   ███ █████   
██      ██   ██ ██    ██ ██   ██ ██      ██         ██        ██      ██   ██ ██    ██ ██      
██      ██   ██  ██████   █████  ███████  ██████    ██        ██      ██   ██  ██████  ███████ 
                                                                                               
*/

.project-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Sidebar */
.project-aside {
  width: 100%;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  color: var(--project-sidebar-text-color);
  background: var(--project-sidebar-background-color);
}

.project-navigation {
  display: flex;
  flex-direction: row;
  flex: 1;
  align-items: flex-end;
  justify-content: space-between;
}

.arrow {
  padding: 0;
}

.project-image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.project-image {
  width: 100%;

  /* TODO: Delete min-height if you want to remove space between project images on project pages on mobile devices. It is used for the demo page only. */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.text-section {
  width: 100%;
}

.project-text {
  width: 100%;
  font-size: 3.25rem;
  padding: 3rem;
}

/* Main Project Image Area */

.project-details {
  width: 100%;
  padding: 1rem;
}

/* 

██   ██  ██████  ██      ██████  ██ ███    ██  ██████  
██   ██ ██    ██ ██      ██   ██ ██ ████   ██ ██       
███████ ██    ██ ██      ██   ██ ██ ██ ██  ██ ██   ███ 
██   ██ ██    ██ ██      ██   ██ ██ ██  ██ ██ ██    ██ 
██   ██  ██████  ███████ ██████  ██ ██   ████  ██████  
                                                       
*/

.holding-page-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  place-items: center;
  text-align: center;
  width: 100%;
  min-height: 100vh;
  /* TODO: Delete the following if you do not want a grainy gradient background on index.html. Be careful not to delete the closing } */
  background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 1),
      var(--background-color-holding-page)
    ),
    url(/assets/temp/noise.svg);
  /* For more on grainy gradients see https://grainy-gradients.vercel.app/ */
}

.holding-page-animation {
  margin-bottom: 1rem;
}

.holding-page-title {
  font-size: 1.5rem;
  color: var(--holding-page-title-color);
}

.holding-page-footer {
  display: grid;
  place-items: center;
  min-height: 10vh;
  width: 100%;
}

.holding-page-copyright {
  font-size: 0.8rem;
  color: var(--holding-page-footer-color);
  margin-bottom: 0;
}

/*
███████ ██████  ██████   ██████  ██████  
██      ██   ██ ██   ██ ██    ██ ██   ██ 
█████   ██████  ██████  ██    ██ ██████  
██      ██   ██ ██   ██ ██    ██ ██   ██ 
███████ ██   ██ ██   ██  ██████  ██   ██ 
*/

/* TODO: Customize your 404 Error Page */
.error-headline-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  text-align: center;
  margin: 0 auto;
}

.error-illustration {
  border: 10px solid greenyellow;
}
/* The best 404 pages have become an art in themselves. Your 404 error page is an opportunity to make a memorable impression on your visitors when they don’t land exactly where they hoped. */

/*

██████  ██       █████  ██    ██ 
██   ██ ██      ██   ██  ██  ██  
██████  ██      ███████   ████   
██      ██      ██   ██    ██    
██      ███████ ██   ██    ██    
*/

.play-page {
  display: grid;
  place-items: center;
}

.play-page-inner-container {
  text-align: center;
}

.play-page-title {
  color: var(--accent-color);
}

/*

███████ ██   ██ ███████ ████████  ██████ ██   ██ ██████   ██████   ██████  ██   ██ 
██      ██  ██  ██         ██    ██      ██   ██ ██   ██ ██    ██ ██    ██ ██  ██  
███████ █████   █████      ██    ██      ███████ ██████  ██    ██ ██    ██ █████   
     ██ ██  ██  ██         ██    ██      ██   ██ ██   ██ ██    ██ ██    ██ ██  ██  
███████ ██   ██ ███████    ██     ██████ ██   ██ ██████   ██████   ██████  ██   ██ 

*/

.sketchbook-page {
  display: grid;
  place-items: center;
}

.sketchbook-page-inner-container {
  text-align: center;
}

.sketchbook-page-title {
  color: var(--accent-color);
}

/*

███    ███ ███████ ██████  ██  █████       ██████  ██    ██ ███████ ██████  ██ ███████ ███████ 
████  ████ ██      ██   ██ ██ ██   ██     ██    ██ ██    ██ ██      ██   ██ ██ ██      ██      
██ ████ ██ █████   ██   ██ ██ ███████     ██    ██ ██    ██ █████   ██████  ██ █████   ███████ 
██  ██  ██ ██      ██   ██ ██ ██   ██     ██ ▄▄ ██ ██    ██ ██      ██   ██ ██ ██           ██ 
██      ██ ███████ ██████  ██ ██   ██      ██████   ██████  ███████ ██   ██ ██ ███████ ███████ 

*/

/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {
  /* TODO: Add styles here for medium devices. */
}

/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {
  /* TODO: Add or adjust styles here for large devices. */

  .holding-page-title {
    font-size: 2rem;
  }

  h1 {
    font-size: 4.275rem;
  }

  h2 {
    font-size: 2.25rem;
  }

  h3 {
    font-size: 1.625rem;
  }

  .logo {
    width: 5rem;
    /* TODO: Adjust the width of the logo on large devices here. */
  }

  .hero {
    min-height: 80vh;
  }

  .hero-headline-wrapper {
    padding: 1rem;
    flex-direction: row;
    border: 10px solid orange;
  }

  .overlay-title {
    font-size: 2.875rem;
  }

  .grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-gap: 1rem;
  }

  /* Grayscale filter with full-colour on hover and tap */
  .work-page-grid-item a.grayscale img {
    filter: grayscale(100);
  }

  .work-page-grid-item > a.grayscale:active img,
  .work-page-grid-item > a.grayscale:hover img {
    filter: grayscale(0);
  }

  .about {
    padding: 4rem;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .global-footer {
    padding: 4rem 4rem 0 4rem;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .about-item-1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  .footer-item-1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  .about-item-2 {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
  }

  .footer-item-2 {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
  }

  .about-item-3 {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
  }

  .footer-item-3 {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
  }

  .about-item-4 {
    grid-row: 2 / 3;
    grid-column: 1 / 4;
    text-align: center;
    align-self: end;
  }

  .footer-item-4 {
    grid-row: 2 / 3;
    grid-column: 1 / 4;
    text-align: center;
    align-self: end;
  }

  /* Padding around work grid and project page */
  .portfolio,
  .project-wrapper {
    padding: 0.5rem;
  }

  /* Project Page Flex Direction on Large Devices */
  .project-wrapper {
    flex-direction: row;
  }

  /* Sidebar on Large Devices */
  .project-aside {
    width: 35%;
    height: 95vh;
    position: -webkit-sticky;
    position: sticky;
    top: 5vh;
    padding-right: 2rem;
    background: orange;
  }

  /* Main Project Image Area on Large Devices */
  .project-details {
    width: 65%;
  }

  .project-image {
    min-height: 70vh;
    /* TODO: Delete min-height if you want to remove space between project images on project pages on large devices. It is used for the demo page only. */
  }

  .project-image-container {
    flex-direction: row;
  }

  .project-navigation {
    justify-content: flex-start;
  }

  .arrow {
    padding-right: 1rem;
  }

  .error-illustration {
    width: 35%;
    border: 10px solid rgb(99, 2, 254);
  }
}

/* X-Large devices (large desktops, 1200px and up)*/

@media (min-width: 1200px) {
  /* TODO: Add styles here for X-large devices. */

  .grid {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  }
}

/* XX-Large devices (larger desktops, 1400px and up) */

@media (min-width: 1400px) {
  /* TODO: Add styles here for XX-large devices. */

  .grid {
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  }
}