@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Nanum+Pen+Script&display=swap');

.caveat-brush-regular {
  font-family: "Caveat Brush", cursive;
  font-weight: 400;
  font-style: normal;
}


.nanum-pen-script-regular {
  font-family: "Nanum Pen Script", cursive;
  font-weight: 400;
  font-style: normal;
}





body {
  background-color     : black;
  /* color                : yellow; */
  /* height: 200em; */
}




header {
  z-index                 : 128;
  /* background-color        : black; */
  background              : linear-gradient(black, transparent);
  position                : fixed;
  text-align              : center;
  width                   : 100%;
  height                  : var(--header-height);
  padding-top             : var(--socials-top-margin-land);
  top     : 0;
}

header a {
  text-decoration         : underline;
  color                   : gold;
 
  font-family: "Nanum Pen Script", cursive;
  font-weight: 400;
  font-style: normal;

}

.key-links a {
  font-size : 1.5em;
}

.socials {
  display                 : inline-block;
  z-index                 : -128;
  height                  : var(--socials-icon-size-land);
  width                   : inherit;
}

.socials a {
  display                 : inline-block;
  text-decoration         : none;
}

.socials img {
  display   : inline-block;
  color     : white;
  display   : block;
  width     : var(--socials-icon-size-land);
  height    : var(--socials-icon-size-land);
  
  opacity   : calc(0.4 * var(--socials-base-opacity));
}

.socials.icon:hover{
  opacity   : calc(0.65 * var(--socials-base-opacity));
}

.socials.icon:active{
  opacity   : var(--socials-base-opacity);
}







.title-card {

  color             : white;
  
  text-align        : center;
  margin-top        : 32.2%;
  
  font-family       : "Caveat Brush", cursive;
  font-weight       : 400;
  font-style        : normal;

  width             : 100%;
  font-size         : 10vw;
  letter-spacing    : -0.1em;

}


.cover-picture {
  position    : absolute;
  top         : 0;
  margin-top  : var(--header-height);
  
  background-image    : url("img/cover-img-1080p.png");
  background-position : top;
  background-size     : contain;
  background-repeat   : no-repeat;

  /* height    : min(110vh, 100vw); */
  height    : 120vw;
  width     : 100%;
}

.corner-section {
  z-index       : 128;
  position      : absolute;
  /* top           : var(--corner-section-top-land); */
  /* left          : var(--corner-section-left-land); */
  top           : 0;
  left          : 0;
  padding-top           : var(--corner-section-top-land);
  padding-left          : var(--corner-section-left-land);

  width         : 20%;
  max-width     : 15em;

  display                 : grid;
  grid-template-columns   : 1fr 1fr;
}

.corner-image {
  
  display   : block;
  width     : 100%;

  background-size         : contain;
  background-repeat       : no-repeat;
  background-position     : center;
}



main {
  position      : relative;
  z-index       : 8;
  /* order         : 4; */
  font-family   : "Nanum Pen Script", cursive;
  font-weight   : 400;
  font-style    : normal;

  font-size   : 2em;
  text-align  : justify;

  display     : block;
  color       : gold;
  margin      : 80% auto 0 auto;
  max-width   : 30em;
}


main h2 {

  font-family: "Caveat Brush", cursive;
  font-weight: 400;
  font-style: normal;

  font-size   : 2em;
  text-align  : center;

  margin      : 0.5em 0 0.5em 0;
}

.trailer {
  margin-top  : 2em;
}

.media-dashboard {
  margin-top      : 1em;
  margin-bottom   : 2em;
  height          : 19em;
  display         : grid;
  grid-template-columns: 1fr var(--media-dashboard-sep-space) 2fr var(--media-dashboard-sep-space) 2fr;

}

.instagram-embed {  
  display             : block;
  text-decoration     : none;
  /* color               : inherit; */
  color               : white;
  width               : 100%;
  /* height              : 100%; */
  max-width           : 460px;
  background          : #254559;
  border-radius       : 12px;
  overflow            : hidden;
  border              : 1px solid #254559;
  box-shadow          : 0 1px 4px rgba(0,0,0,0.1);
  font-family         : -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

footer {
  background-color    : gold;
  height              : var(--footer-height);
  margin-top          : var(--footer-margin-top);
}