/* 

Add the Google Fonts you want, remove the ones you don't. 

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

*/
@import url("https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap");

/*

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

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

*/

@import url("make-something-fly.css");
@import url("animated-gradient.css");
@import url("text-stroke.css");
@import url("stroke-shadow.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;
}

*,
*: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. Adjust the variables below, create new variables as desired, and delete the variables that you do not want to use. */

:root {
  --body-typeface: "Inter", sans-serif;
  --heading-typeface: "Shadows Into Light", cursive;
  --project-title-typeface: "Eczar", serif;
  --background-color: #f1d118;
  --background-color-about: #f4d10f;
  --background-color-footer: #e6ba0a;
  --alt-background-color: #000000;
  --background-color-holding-page: rgba(225, 198, 22, 0.6);
  --h1-color: #0e0c13;
  --h2-color: #5200ff;
  --h3-color: #5200ff;
  --h4-color: #5200ff;
  --h5-color: #5200ff;
  --h6-color: #5200ff;
  --primary-text-color: #222;
  --holding-page-title-color: #ebedf0;
  --accent-color: #5200ff;
  --overlay-color: #5200ff;
  --overlay-title-color: #ffffff;
  --overlay-description-color: #57a790;
  --hyperlink-color: #5200ff;
  --hyperlink-alternate-color: orangered;
  --hover-color: #111;
  --visited-color: #5200ff;
  --project-title-color: #ef0fe4;
  --project-sidebar-background-color: transparent;
  --project-sidebar-text-color: rgb(1, 1, 1);
  --heart-color: darkred;
  --holding-page-footer-color: #ecf316;
  --text-selection-background-color: #9e4e4e;
  --linear-gradient-color-1: #c9b5be;
  --linear-gradient-color-2: #8d0b93;
  --linear-gradient-color-3: #321575;
  --stroke-shadow-color: rgba(0, 0, 0, 0.4);
}

body {
  font-family: var(--body-typeface);
  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. */
}

/* 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: 2.875rem;
  color: var(--overlay-title-color);
}

.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: 1rem;
  align-items: flex-start;
}

.logo {
  width: 3rem;
}

.wordmark {
  fill: red;
  transition: 200ms;
  transition-timing-function: ease-in-out;
}

.wordmark:hover {
  fill: black;
}
.hero-headline-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 2rem 4rem;
  text-align: center;
}

.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: 1rem;
  /* Magical, media-query-less responsiveness is achieved using the repeat() function and the auto placement keywords. To achieve wrapping, we can use the auto-fit. If you're using auto-fit, the content will stretch to fill the entire row width.  Specify a minimum width for the columns, using the minmax() function. The 1fr is what tells the browser to distribute the space between the columns so that each column equally gets one fraction of that space.  */
}

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

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

/* 

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

.about {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 3rem;
  background: var(--background-color-about);
  padding: 1rem;
  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 / 4;
}

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

/* Global Footer

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

.global-footer {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 3rem;
  min-height: 100vh;
  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;
}

.awards-list {
  margin-bottom: 2rem;
}

/* Project Page 

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

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

/* Sidebar */
.project-aside {
  width: 100%;
  padding: 1rem;
  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: 50%;

  margin-bottom: 50px;

  /* min-height should be deleted if you want to remove space between project images on project pages */
  display: flex;
  align-items: center;
  justify-content: center;
}

.large-emoji-placeholder {
  font-size: 12rem; /* This is for making the placeholder emojis large and should be deleted */
}

.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;
  /* Delete the following if you do not want a grainy gradient background on the holding page */
  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;
}

/*
███████╗████████╗██╗   ██╗██╗     ███████╗     ██████╗ ██╗   ██╗██╗██████╗ ███████╗
██╔════╝╚══██╔══╝╚██╗ ██╔╝██║     ██╔════╝    ██╔════╝ ██║   ██║██║██╔══██╗██╔════╝
███████╗   ██║    ╚████╔╝ ██║     █████╗      ██║  ███╗██║   ██║██║██║  ██║█████╗  
╚════██║   ██║     ╚██╔╝  ██║     ██╔══╝      ██║   ██║██║   ██║██║██║  ██║██╔══╝  
███████║   ██║      ██║   ███████╗███████╗    ╚██████╔╝╚██████╔╝██║██████╔╝███████╗
╚══════╝   ╚═╝      ╚═╝   ╚══════╝╚══════╝     ╚═════╝  ╚═════╝ ╚═╝╚═════╝ ╚══════╝
 */

.style-guide-page-wrapper {
  padding: 3rem;
}

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

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

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

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

/*

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

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

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

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

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

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

.experiments-page-inner-container {
  text-align: center;
  min-height: 100vh;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.experiments-page-title {
  color: var(--accent-color);
  font-size: 2rem;
}

.experiment-1-wrapper {
  display: flex;
  flex-direction: row;
  margin-bottom: 1rem;
  flex: 1;
}

.experiment-2-wrapper {
  display: flex;
  flex-direction: row;
  margin-bottom: 1rem;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.sub-navigation {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 1rem;
  text-align: center;
}

a.sub-navigation-link {
  border: 1px solid var(--accent-color);
  color: var(--accent-color);
  padding: 1rem;
}

a.sub-navigation-link:hover {
  color: var(--accent-color);
  padding: 1rem;
}

/* Let's size the boxes */

.experiment-box {
  width: 50%;
  padding: 2rem;
  display: grid;
  place-items: center;
}

.image {
  width: 40%;
}

/* Let's hide box 2 */

.experiment-image-2 {
  display: none;
}

.experiment-image-single {
  width: 20rem;
  padding: 2rem;
  display: grid;
  place-items: center;
}

#heyday-logo-blue {
  animation: rotation 9s infinite linear;
}

/*

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

*/

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

@media (min-width: 768px) {
}

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

@media (min-width: 992px) {
  .holding-page-title {
    font-size: 2rem;
  }

  h1 {
    font-size: 4.275rem;
  }

  h2 {
    font-size: 2.25rem;
  }

  h3 {
    font-size: 1.625rem;
  }

  .logo {
    width: 5rem;
  }

  .hero {
    min-height: 100vh;
  }

  .hero-headline-wrapper {
    padding: 4rem 8rem;
  }

  .grid {
    grid-template-columns: repeat(auto-fit, minmax(400px, 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: 65vh;
    position: -webkit-sticky;
    position: sticky;
    top: 5vh;
    padding-right: 2rem;
  }

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

  .project-image {
    min-height: 70vh;
    /* This should be deleted if you want to remove space between project images on project pages */
  }

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

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

  .arrow {
    padding-right: 1rem;
  }
}

/* Only add styles below to make very minor adjustments for extra or extra-extra large devices */

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

@media (min-width: 1200px) {
}

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

@media (min-width: 1400px) {
}