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: 1300px;
  min-height: 1300px;
  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;
}


/******** phone base *********/

.phone-container.transparent{
  background: rgba(248, 243, 241, 0.1);
  border-radius: 70px;
  width: 350px;
  height: 700px;
}
/******** 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;
  height: 1300px;
  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 img {
  position: absolute;
}
.phones-land{
  z-index:-1;
}

#phone-watches-1 {
  width: 345px;
  height: 690px;
  left: 137px;
  top: 1531px;
}

#phone-watches-2 {
  width: 88px;
  height: 176px;
  left: 651px;
  top: 1470px;
  filter: blur(2px);
}

#phone-watches-3 {
  width: 171px;
  height: 342px;
  left: 916px;
  top: 1475px;
  filter: blur(4px);
}

#phone-watches-4 {
  width: 275px;
  height: 550px;
  left: 1222px;
  top: 1523px;
  filter: blur(6px);
}

#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,
#content .color-emphasis {
  color: #1E33DA;
}

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

#content .first {

  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 .second {

  width: 1680px;
  height: 170px;

  font-family: 'GT Walsheim Pro';
  font-style: normal;
  font-weight: 700;
  font-size: 230px;
  line-height: 65px;

  /* or 28% */
  display: flex;
  align-items: center;
  text-align: center;

  color: rgba(255, 255, 255, 0.35);

  backdrop-filter: blur(5px);

  /* Note: backdrop-filter has minimal browser support */

  /* Inside auto layout */
  flex: none;
  order: 1;
  flex-grow: 0;
}

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

#open {
  box-sizing: border-box;

  position: absolute;
  width: 1177px;
  height: 180px;
  left: calc(50% - 1177px / 2 - 0.5px);
  top: calc(50% - 180px / 2);

  font-family: 'GT Walsheim Pro';
  font-style: normal;
  font-weight: 600;
  font-size: 200px;
  line-height: 90%;

  /* identical to box height, or 180px */
  text-align: center;
  letter-spacing: -0.04em;

  /* Transparency_200 */
  color: rgba(248, 243, 241, 0.1);

  backdrop-filter: blur(7.5px);

  /* Note: backdrop-filter has minimal browser support */
}


#popover {
  background: url('/img/bg_pink.png');
}

#popover .phone-container {
  height: 776px;
  width: 411px;
  background: url('/img/phone_cream.png');
  position: relative;
  left: 33%;
  top: 20vh;
}
#popover .text{
  position: relative;
  left: 52%;
  top: 20vh;
  width: 400px;
}
#popover p{
  position: relative;
  left: 52%;
  top: 20vh;
  width: 400px;
}

#portfolio {
  background: url('/img/bg_grey.jpg');
}

#popover .color-emphasis,
#portfolio .color-emphasis {
  color: #E77064;
  font-weight: 600;
  margin-bottom: 20px;
}

#portfolio .phone-container {
  height: 776px;
  background: url('/img/phone_shoes.png');
}

.phone-container .top{
  height: 60px;
  background: url('/img/phone_rectangle_top.jpg');
}

.phone-container .bottom{
  height: 60px;
  background: url('/img/phone_rectangle_bottom.jpg');
  top: 655.5px;
  position: relative;
}