@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

:root{
  --lightbg:#fff4ea;
  --darkbg:#141414;
}

html,
body {
  height: 100%;
  width: 100%;

  background-color: var(--lightbg);
  background: -o-linear-gradient(left, #ededed, #ffd3d3);
  background: -webkit-gradient(linear, left top, right top, from(#ededed), to(#ffd3d3));
  background: linear-gradient(to right, #ededed, #ffd3d3);
}

body {
  overflow-x: hidden;
}

#main {
  /* background-color: var(--lightbg); */
}

#page1 {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
}

#page1 > h1 {
  background: url(https://lagunitas.com/wp-content/themes/lagunitas/assets/images/texture.png);
  background-position: center;
  background-size: cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  background-color: rgb(190, 0, 28);
  -webkit-font-smoothing: antialiased;
  width: 70vw;
  font-size: 14vw;
  cursor: default;
  margin-top: -5vh;
  line-height: 13.5vw;
  text-transform: uppercase;
  text-align: center;
  z-index: 97;
  background-repeat: no-repeat;
}

#container1 {
  padding: 0 20vh;
  /* background: red; */
  height: 100vh;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#c1left {
  /* background: red; */
  height: 70vh;
  width: 30%;
}

#c1left img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

#c1right {
  /* background: blue; */
  height: 70vh;
  width: 30%;
}

#c1right img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

#img {
  position: absolute;
  z-index: 3;
  height: 680px;
  width: 680px;
  -o-object-fit: cover;
  object-fit: cover;
  left: 50%;
  -webkit-transform: translate(-50%);
  -ms-transform: translate(-50%);
  transform: translate(-50%);
}

#page2 {
  height: 100vh;
  width: 100%;
  padding: 0 20vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  /* background: wheat; */
}

#page2 #page2div{
  /* background: white; */
  height: 35%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}


#page2div #ghost{
  height: 30vh;
  width: 30vh;
  /* background: black; */
}



#ghost img{
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}


#page2 > h1 {
  font-size: 22vw;
  color: rgb(162, 162, 162);
  text-align: center;
  letter-spacing: -1.1vh;
}

#page2div{
  /* background: blue; */

}

#page3 {
  /* background: rgb(255, 218, 163); */
  height: 100vh;
  width: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

#page3 #container3 {
  padding: 0 10vh;
  /* background: white; */
  height: 20vw;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: end;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#c-left {
  width: 40%;
  height: 36vh;
  /* background: blue; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#c-left .albums {
  /* background: wheat; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

#c-right {
  width: 40%;
  height: 36vh;
  /* background: blue; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#c-right .albums {
  /* background: wheat; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.albums #alb-cover {
  height: 28vh;
  width: 28vh;
  /* background: white; */
}

#alb-cover img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.albums h1 {
  text-align: center;
  margin-top: 10px;
  font-size: 25px;
  font-style: italic;
  font-weight: 500;
}

#yeezus-cd {
  position: absolute;
  z-index: 2;
  height: 28.5vh;
  width: 28.5vh;
}

#yeezus-cd img {
  -o-object-fit: cover;
  object-fit: cover;
  height: 100%;
  width: 100%;
}

#yeezus-flap {
  position: absolute;
  z-index: 4;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

#yeezus-flap img {
  -o-object-fit: cover;
  object-fit: cover;
  /* left: 50%; */
  /* transform: translateX(-35%); */
  height: 28vh;
}

#yeezus-title {
  position: absolute;
  z-index: 4;
  top: 65vh;
}

#yeezus-title h1 {
  font-size: 25px;
  font-style: italic;
  font-weight: 500;
}

#page3-5{
  /* background: var(--darkbg); */
  /* color: var(--lightbg); */
  height: 100vh;
  width: 100vw;
  display: flex;
  text-wrap: nowrap;
  /* overflow-y: auto; */
  margin-bottom: 20vh;
}


/* #page3-5 img{
  height: 100%;
  width: 20%;
  object-fit: cover;
  position: relative;
  left: 50%;
  transform: translate(-50%);
} */

#page3-5>h1{
  margin-top: 20vh;
  padding: 2vh 20vh;
  font-size: 40vh;
  letter-spacing: -10px;
  font-weight: 600;
  
}

#page3-5 #p3-trust {
  font-family: "Dancing Script", cursive;
  font-size: 40vh;
  letter-spacing: -5px;
}


#page4 {
  padding: 0% 10vh;
  /* background: white; */
  height: 50vh;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

#p4left{
  height: 75vh;
  width: 40%;
}

#p4right{
  height: 75vh;
  width: 50%;
  /* background: wheat; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0% 10vh;
}

#p4right #p4content h1{
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.1vh;
}

#p4right #p4content #socials h1{
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.1vh;
  font-style: italic;
}

#socials #icons a{
  text-decoration: none;
  color: #000;
}

#socials #icons a i{
  font-size: 40px;
}


#socials #icons a i:hover{
  -webkit-transform: scale(1.4);
      -ms-transform: scale(1.4);
          transform: scale(1.4);
}

#p4left img{
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50px;
  -webkit-box-shadow: 8px 17px 38px 2px rgba(0, 0, 0, 0.2);
          box-shadow: 8px 17px 38px 2px rgba(0, 0, 0, 0.2);
}

#page5{
  height: 25vh;
  width: 100%;
}