/******************************************************************************
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: #070707;
  --color-text: #FFFFFF;
  --font-family: "Centra No2", sans-serif;
}

/* Basic page style resets */
* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/* Import fonts */
@font-face {
  font-family: Centra No2;
  font-weight: 400;
  src: url("https://cdn.glitch.global/99c70bce-b73a-451b-90b8-a0ee09e31ae6/CentraNo2-Book.ttf?v=1691760143892") format("truetype");
}

@font-face {
  font-family: Centra No2;
  font-weight: 500;
  src: url("https://cdn.glitch.global/99c70bce-b73a-451b-90b8-a0ee09e31ae6/CentraNo2-Medium.ttf?v=1691760150115") format("truetype");
}

@font-face {
  font-family: Centra No2;
  font-weight: 600;
  src: url("https://cdn.glitch.global/99c70bce-b73a-451b-90b8-a0ee09e31ae6/CentraNo2-Bold.ttf?v=1691760156624") format("truetype");
}

@keyframes drop_fade {
  0% {
    opacity: 0;
    top: -24px;
  }

  100% {
    opacity: 1;
    top: 0;
  }
}

body {
  font-family: var(--font-family);
  background-color: var(--color-bg);
  margin: 0;
  padding: 0;
  color: var(--color-text);
}

.background {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  z-index: 10;
}

.background img {
  position: relative;
  z-index: 20;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.wrapper {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: stretch;
  z-index: 100;
}

.container {
  height: auto;
  width: 100%;
  max-width: 800px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: stretch;
  position: relative;
  z-index: 1000;
}

.profile_line {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: stretch;
  margin: 0 0 24px 0;

  width: 100%;
  max-width: 704px;
}

.profile_pic {
  width: 24px;
  height: 24px;
  border-radius: 256px;
  border: 1px solid rgba(256, 256, 256, 0.2);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  overflow: hidden;
  margin: 0 12px 0 0;
  position: relative;
}

h1 {
  font-size: 32px;
  line-height: 40px;
  font-weight: 400;
  letter-spacing: -0.3px;
  margin: 0 0 36px 0;
  position: relative;

  width: 100%;
  max-width: 704px;
}

.share_card {
  overflow: hidden;
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  border: 1px solid rgba(256, 256, 256, 0.2);
  background-color: #070707;
  color: #FFFFFF;
  border-radius: 8px;
  margin-bottom: 24px;
}

.share_card:last-child {
  margin-bottom: 0 !important;
}

.share_img {
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
}

.share_info {
  padding: 16px 24px;
}

h2 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  margin: 0 0 16px 0;
}

.share_tray {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: stretch;
}

.share_link {
  padding: 9px;
  border-radius: 8px;
  border: 1px solid rgba(256, 256, 256, 0.2);
  background-color: #070707;
  text-decoration: none;
  color: #FFFFFF;
  margin-right: 12px;
}

.share_link:hover {
  background-color: #1A1A1A;
}

.share_link:last-child {
  margin-right: 0 !important;
}

.share_icon {
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  display: block;
}




.image_grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 24px;
  row-gap: 24px;
  width: 100%;
}

.image_grid h2 {
  grid-column: span 3;
  padding-top: 8px;
  border-top: 1px solid #1A1A1A;
  margin: 0;
}

.image_grid h2:first-of-type {
  border-top: none !important;
  padding-top: none !important;
}

.image_card {
  border-radius: 8px;
  border: 1px solid #1A1A1A;
  overflow: hidden;
}

.image_card img {
  width: 100%;
  padding: 0;
  margin: 0;
  display: block;
  object-fit: cover;
}







@media screen and (max-width: 600px) {
  h1 {
    font-size: 24px !important;
    line-height: 32px !important;
  }
}