/******************************************************************************
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: 100vh;
  --image-max-width: 200px;
  --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: #ffffff;
}

.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);
  min-height: var(--wrapper-height);
/*  background-color: var(--color-bg);*/
  text-align: center;
}
.wrapper {
  place-items: center;
  margin: 3rem 2rem 0;
}
.content {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 1rem 5rem;
  background-color: #00000066;
}

/* 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: #ffffff;
}

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

/******************************************************************************
START Hello Links default styles
******************************************************************************/
.content {
  max-width: 600px;
}
.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%;
  border: 4px solid var(--color-primary);
}
ul.link-list {
  margin: 0 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;
  background-color: #ffffff;
}
ul.link-list li a:hover {
  background-color: cyan;
}

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

.glitch-logo {
  height:3em;
  margin-left:1rem;
}

.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
******************************************************************************/


@media only screen and (max-width: 600px) {

    .wrapper {
        margin: 1vw 1vh 0;
    }

    .content {
        padding: 1rem;
    }
}