digital-theory/css/main.css

@import './boilerplate.css';

/* ==========================================================================
   animations
   ========================================================================== */
body {
  position: relative;
  top: 0;
  left: 0;
}

.margin-auto {
  margin: 0 auto;
}

.container-text {
  max-width: 360px;
}

.container-text-md {
  max-width: 500px;
}

.container-text-lg {
  max-width: 1062px;
}

/******** all sections *********/

#content-1 h2,
#content-2 h2,
#content-3 h2,
#content-4 h2
{
  margin-left: 10vw;
}

main nav {
  position: fixed;
  top: 0;
  left: 0;
  padding: 24px;
  font-family: 'GT Walsheim Pro', Arial;
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 130%;

  /* or 31px */
  text-align: center;

  /* Secondary 100 */
  color: #FFFDFC;

  width: 100%;
}

.burger-menu {
  width: 150px;
  float: left;
}

.nav-main {
  text-align: center;
  top: 54px;
  color: #FFFDFC;
  width: 100%;
  height: 54px;
}

main section {
  height: 100vh;
  width: 100vw;
  font-family: 'GT Walsheim Pro', Arial;
}

main section h2 {
  font-family: 'GT Walsheim Pro', Arial;
  font-style: normal;
  font-weight: 600;
  font-size: 60px;
  line-height: 110%;

  /* or 66px */
  letter-spacing: -0.04em;

  /* Secondary 100 */
  color: #FFFDFC;
  padding-top: 33vh;
}


/******** section 1 *********/

#main_title_container {
text-align:center;
  width: 100vw;
}

#main_title {

  box-sizing: border-box;
  background: url('/img/sesame.png') no-repeat;
  background-size: contain;

  position: relative;
  height: 35vh;
  width: 95vw;
  max-width: 1200px;
  margin: 0 auto;

}

#cover {
  background: url('/img/BG 1.png') no-repeat;
  background-size: cover;
}

#hand {
  background: url('/img/hand 1.png');
  background-size: cover;

  position: absolute;
  width: 100vw;
  min-height: 100vh;
  left: 1px;
  top: -2px;

}

#cover h2 {
  position: absolute;
  top: 10vh;
  left: 42vw;

  /* Subtitle/desktop_1 */
  font-family: 'GT Walsheim Pro', Arial;
  font-style: normal;
  font-weight: 600;
  font-size: 40px;
  line-height: 120%;

  /* or 48px */
  text-align: center;
  letter-spacing: -0.04em;

  /* Secondary 100 */
  color: #FFFDFC;
}

#cover .button {
  box-sizing: border-box;

  position: relative;
  left: 0;
  right: 0;
  top: calc(1 / 3 * 100vh);
  bottom: 0;
  width: 150px;
  height: 150px;
  padding: 1rem;
  color: white;
  font-family: 'GT Walsheim Pro', Arial;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
  background: linear-gradient(329.49deg, rgba(255, 216, 244, 0) 34.06%, rgba(255, 207, 242, 0.2) 77.26%);
  backdrop-filter: blur(2.96px);

  /* Note: backdrop-filter has minimal browser support */
  border-radius: 100%;
}

/************ section 2 ************/
#welcome h2 {
  font-weight: 600;
  font-size: 100px;
  line-height: 90px;

  /* or 90% */
  text-align: center;
  letter-spacing: -0.04em;

  /* Secondary 100 */
  color: #F9F3F1;


}

#welcome .color-emphasis {
  color: #1E33DA;
}

#welcome .phone-container {
  background: url('/img/section2_phone.png');
  background-size: cover;
}

#content .color-emphasis {

  width: 1680px;
  height: 35px;

  font-style: normal;
  font-weight: 600;
  font-size: 40px;
  line-height: 95%;

  text-align: center;
  letter-spacing: 0.2em;
  text-transform: uppercase;

  color: #E77064;

  backdrop-filter: blur(5px);

  flex: none;
  order: 0;
  flex-grow: 0;

}

#content_all {
  background: url('/img/bg_content.png');
  background-size: cover;
}