/******************************************************************************
START Glitch hello-app default styles

The styles in this section do some minimal CSS resets, set default fonts and 
colors, and handle the layout for our footer and "Remix on Glitch" button. If
you're new to CSS they may seem a little complicated, but you can scroll down
to this section's matching END comment to see page-specific styles.
******************************************************************************/


/* Our default values set as CSS variables */
:root {
  --color-bg: #69F7BE;
  --color-text-main: #000000;
  --color-text-header: #2800FF;
  --color-primary: #FFFF00;
  --wrapper-height: 87vh;
  --image-max-width: 300px;
  --image-margin: 3rem;
  --font-family: "HK Grotesk";
  --font-family-header: "HK Grotesk";
}

/* Basic page style resets */
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

/* Import fonts */
@font-face {
  font-family: HK Grotesk;
  src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Regular.otf?v=1603136326027")
    format("opentype");
}
@font-face {
  font-family: HK Grotesk;
  font-weight: bold;
  src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Bold.otf?v=1603136323437")
    format("opentype");
}

/* Our remix on glitch button */
.btn--remix {
  font-family: HK Grotesk;
  padding: 0.75rem 1rem;
  font-size: 1.1rem;
  line-height: 1rem;
  font-weight: 500;
  height: 2.75rem;
  align-items: center;
  cursor: pointer;
  background: #FFFFFF;
  border: 1px solid #000000;
  box-sizing: border-box;
  border-radius: 4px;
  text-decoration: none;
  color: #000;
  white-space: nowrap;
  margin-left: auto;
}
.btn--remix img {
  margin-right: 0.5rem;
}
.btn--remix:hover {
  background-color: #D0FFF1;
}

.footer {
  display: flex;
  justify-content: space-between;
  margin: 1rem auto 0;
  padding: 1rem 0 0.75rem 0;
  width: 100%;
  flex-wrap: wrap;
  border-top: 4px solid #fff;
}

.divider {
  padding: 0 1rem;
}
/******************************************************************************
END Glitch hello-app default styles
******************************************************************************/

body {
  font-family: HK Grotesk;
  background-color: #f4f4f4; /* Light background to make it stand out */
/*   background-image: url("https://lh3.googleusercontent.com/pw/AP1GczPQH9gUEo5ueMz35vU2Sxocak97Y9eVPOEhL6DjoJNpv8msJ5rgP9_feizyMC3c-0CqHcG_4QZRq-GNqPOHQs0_3yCp6xzxGB8TmqIdJgvrFTl8XYw=w2400"); */
/*   background-image: url("https://lh3.googleusercontent.com/pw/AP1GczNUaii0mHr2vNLzYhH4zM2TnW3m2OPbqfWSMw-rE8e60wymdYF6yMCX7PAxv22uOIEctPDoTeiJp9M_jtG-66TROV3bfKq_hjHVk_o9rOTto1mE3sM=w2400"); */
  background-image: url("https://lh3.googleusercontent.com/pw/AP1GczMSjuI6ZgWXtLzpVV9jqVkN-xk07t9B_WWcbMd956snoYlkOk1lDhn-wOlLHx10HRAorOa4eZ9jczla_fG-FHGoPNl2D2YT3gKSJnjltFDX4RtMqCk=w2400");
/*   background-image: url("https://lh3.googleusercontent.com/pw/AP1GczPznc6cExDu4sMRtlGi8UBhrwE1h9SrnqeANeidWzDAQncxg1DI1hgmQyL2PklWXlW9n-9BRjUTSXerakioDPwN3Xats9hdpj2jdQSO3pC-b2uChpI=w2400"); */
  







}



/* Page structure */
.wrapper {
  min-height: var(--wrapper-height);
  display: grid;
  place-items: center;
  margin: 0 1rem;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Very light scaling for our illustration */
.title {
  color: var(--color-text-header);
  font-family: HK Grotesk;
  font-style: normal;
  font-weight: bold;
  font-size: 100px;
  line-height: 105%;
  margin: 0;
}

/* Very light scaling for our illustration */
.illustration {
  max-width: 100%;
  max-height: var(--image-max-width);
  margin-top: var(--image-margin);
}

/* Instructions */
.instructions {
  margin: 1rem auto 0;
}

/* Button - Add it from the README instructions */
button,
input {
  font-family: inherit;
  font-size: 100%;
  background: #FFFFFF;
  border: 1px solid #000000;
  box-sizing: border-box;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adds a shadow to make the text stand out */
  border-radius: 4px;
  padding: 0.5rem 1rem;
  transition: 500ms;
}

/* Subheading */
h1 {
/*   font-family: Arial, sans-serif; */
  font-size: 1.8em;
  
  margin: 0;
  padding: 10px;
  line-height: 1.6;
/*   color: #333; */
  direction: rtl;
  text-align: center;}

h2 {
  font-family: "Frank Ruehl", serif;
  font-size: 1.3em;
  margin: 0;
  padding: 0;
  line-height: 1.6;
/*   background: #f7f7f7; */
  color: SaddleBrown;
  direction: rtl;
  text-align: center;}
}

p {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
/*   background: #f7f7f7; */
  color: #333;
  direction: rtl;
  text-align: right;}

/* Interactive image */
.illustration:active {
  transform: translateY(5px);
}

/* Button dip
- Toggling this class on and off will move it down and up again
- The button transition property above determines the speed of the translate (500ms)
*/
.dipped {
  transform: translateY(5px);
}

/* Links that open files in the editor */
.fileopener {
  cursor:pointer;
  font-weight:bold;
  border-bottom:3px solid var(--color-primary);
  color: var(--color-secondary);
}
.fileopener:hover {
  border-bottom:3px solid var(--color-secondary);
}