/******************************************************************************
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 {
  --wrapper-height: 80vh;
  --image-max-width: 140px;
  --font-family: Arial, sans-serif;
  --font-family-header: Arial, sans-serif;
  --color-bg: #BDBDBD;
  --color-bg-alt: #FFFFFF;
  --color-text-main: #000000;
  --color-primary: #FFFFFF;
  --glitch-blue: #2800FF;
  --glitch-blue-light: #5A78FF;
  --glitch-pink: #FF7698;
  --glitch-pink-light: #FEC1EE;
  --glitch-green: #05F293;
  --glitch-green-light: #9BE7D8;
  --glitch-yellow: #FFFF60;
  --glitch-purple: #9480FF;
}

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

/* Our remix on glitch button */
.btn--remix {
  font-family: Menlo,Consolas,Monaco,"Lucida Console",monospace;
  padding: 0.80rem 1.75rem;
  font-size: 0.95rem;
  line-height: 1rem;
  font-weight: 500;
  height: 3rem;
  align-items: center;
  cursor: pointer;
  background: #FFFFFF;
  border: 2px solid #000000;
  box-sizing: border-box;
  border-radius: 4px;
  text-decoration: none;
  color: #000;
  white-space: nowrap;
  margin-left: auto;
  margin-right: 1rem;
}
.btn--remix img {
  position:relative;
  top: 1px;  
  margin-right: 0.25rem;
}
.btn--remix:hover {
  background-color: #D0FFF1;
}

/* Navigation grid */
.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;
}

.footer a:not(.btn--remix):link,
a:not(.btn--remix):visited {
  font-family: HK Grotesk;
  font-style: normal;
  font-weight: normal;
  font-size: 1.1rem;
  color: #000;
  text-decoration: none;
  border-style: none;
}
.footer a:hover {
  background: var(--color-primary);
}

.footer .links {
  padding: 0.5rem 1rem 1.5rem;
  white-space: nowrap;
}

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

/* Page structure */
body {
  font-family: var(--font-family);
  background-color: var(--color-bg);
  text-align: center;
}
.wrapper {
  min-height: var(--wrapper-height);
  place-items: center;
  margin: 3rem 2rem 0;
}
.content {
  display: flex;
  flex-direction: column;
  max-width: 900px;
  margin: 0 auto;
}

/* Typography */
p {
  margin: 0 0 1rem 0;
  line-height: 1.5 !important;
  font-size: 1rem;
}
h1,
h2,
h3,
h4,
h5 {
  margin: 2rem 0 .8rem;
  font-family: var(--font-family-header);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-text-main);
}
h1 {
  margin-top: 1rem;
  margin-bottom: 1.25rem;
  font-size: 1.5rem;
  display: inline-flex;
  color: var(--color-primary);
  justify-content: center;
}
h2 {
  font-size: 2.5rem;
}
h3 {
  font-size: 2rem;
}
h4 {
  font-size: 1.5rem;
}
h5 {
  font-size: 1.25rem;
}
small,
.text_small {
  font-size: 0.8rem;
}
ul > li,
ol > li {
  margin-bottom: 0.75rem;
  line-height: 1.5;
  font-size: 1rem;
}
ul {
  padding: 0 0 0 18px;
  margin: 0;
}
ul.no-bullet {
  list-style-type: none;
}

/* Link styles */
a:not(.btn--remix):link,
a:not(.btn--remix):visited {
  text-decoration: none;
  border-bottom: 6px solid var(--color-primary);
  color: var(--color-text-main);
  transition: background 0.2s linear;
}
a:hover {
  background: var(--color-primary);
}

.footer .links {
  padding: 0.25rem 1rem 1rem;
  text-align: left;
}

/******************************************************************************
START Hello Links default styles
******************************************************************************/
.content {
  max-width: 550px;
}
.avatar-container {
  display: flex;
  justify-content: center;
}
.social-icons {
  justify-content: center;
}
.avatar {
  max-width: var(--image-max-width);
  max-height: var(--image-max-width);
  margin: 1rem 0 1.5rem;
  border-radius: 50%;
}
ul.link-list {
  margin: 0.5em 0 2.5rem;
  padding-left: 0px;
}

ul.link-list li {
  font-size: 1rem;
  font-weight: 400;
  list-style: none;
  clear: both;
  width: 100%;
  text-align: center;
  margin: 1rem auto;
}

ul.link-list li a:link,
ul.link-list li a:visited {
  display: block;
  text-align: center;
  border: 2px solid var(--color-primary);
  padding: 1.5rem 1rem;
}

.social-icons a:link {
  border-bottom: none;
  background: transparent;
  width: 3rem;
  height: 3rem;
  margin: 0 0.5rem 1.5rem;
}

.social-profile-icon  {
  width: 1.75rem;
  margin-bottom:1rem;
  display: inline-flex;
}

.social-profile-icon path {
  fill: var(--color-bg-alt);
}

.social-profile-icon:hover path, .social-profile-icon:focus path {
  fill: var(--glitch-purple);
}

.video-wrapper__16-9 {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */ 
}
.video-wrapper__16-9 iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/******************************************************************************
END Hello Links default styles
******************************************************************************/