*{
    padding:0;
    margin: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    -webkit-user-select: none;
    -ms-user-select: none; 
    user-select: none; 

}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

body{
    height: 100vh;
    width: 100%;
    max-width: 100%;
    background: #DFBB9D;
    overflow-x: hidden;
}

footer{
    width: 100%;
    height: 8vh;
    background-color: #402A23;
}

footer h6{
    text-align: center;
    transform: translateY(100%);
    font-family: 'SourceSansPro';
    letter-spacing: .1em;
}

/* sidebar muna kasi why not, maya na header kasi nakakatamad kung ano pwedeng ilagay*/
nav{
    position: fixed;
    display: flex;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    width: 10vh;
    height: 100%;
    background: #F7CCAC;
    z-index: 99;
}

nav a{
    display: flex;
    justify-content: center;
    align-items:center;    
    cursor: pointer;
    width: 100%;
    height: 10vh;
    border: transparent;
    border-radius: 20px;
    background: transparent;
    transition: all .5s ease;
    color: black;
    font-size: 1.8em;
    text-decoration: none;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
}


nav a:active{
    transform: scale(.5);
}

nav a.active{
    color:#76BA99;
}

nav a:hover{
    transform: translateX(10px);
}

.mainhome{
	height: 100vh;
    
}

#home {
    background: url(./img/bg1.svg);
    background-size: cover;
    background-repeat: no-repeat;
    
}

.introname{
    display: flex;
    flex-direction: column;
    position: relative;     
    padding: 30vh 0vh 20vh 20vh;

}
.introname h1{
    color: #171010;
    display: flex;
    font-family: 'amnestiadistressed';
    letter-spacing: .1em;
    justify-content: left;
    align-items: left;
    position: relative;
    text-align: left;
    font-size: 7em;
    font-weight: xx-large;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
}
/*Stop tryharding dude, fucking bitch. anyways*/
.animation{
    display: flex;
    color: #171010;
    position: relative;
    font-family: 'silkscreenregular';
    height: 9vh;
    width: 160%;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
    right: 1vh;
}

.word{
    text-align: left;
    font-size: 6em;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
}

.word:first-child{
    animation: anim 12s infinite ease 9s;
    -webkit-animation: anim 12s infinite ease 9s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}


@keyframes anim {
    0%{
        margin-top: 0;
    }
    25%{
        margin-top: -6rem;
    }
    50%{
        margin-top: -12rem;
    }
    75%{
        margin-top: -18rem;
    }
    100%{
        margin-top: 0rem;
    
}

}

@-webkit-keyframes anim {
    0%{
        margin-top: 0;
    }
    25%{
        margin-top: -6rem;
    }
    50%{
        margin-top: -12rem;
    }
    75%{
        margin-top: -18rem;
    }
    100%{
        margin-top: 0rem;
    
}

}


/*sti p*/
.introname p{
    display: flex;
    font-family: 'SourceSansProExtraLight';
    justify-content: left;
    align-items: center;
    position: relative;
    text-align: left;
    font-size: 2em;
    top: 5%;
    opacity: 50%;
}


/*User page*/

#user{
    background: url(./img/bg2.svg);
    background-size: cover;
    background-repeat: no-repeat;
}

.aboutme{
    display: flex;
    flex-direction: column;
    padding-left: 20vh;
    padding-top: 25vh;
}

.aboutme h2{
    left: -5px;
    display: flex;
    position: relative;
    font-size: 7rem;
    color: #aa8b74;
    font-family: 'amnestiadistressed';
    font-weight: 500;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
}

.aboutme p{
    color: #dad5d0;
    font-family: 'SourceSansProLight';
    display: flex;
    text-align: left;
    position: relative;
    width: 80vh;
    font-weight: 400px;
    font-size: 1.5em;
    text-shadow: 2px 4px 4px rgba(0,0,0,0.2),
                 0px -5px 10px rgba(255,255,255,0.15);
}

#contact{
    background: url(./img/bg3.svg);
    background-size: cover;
    background-repeat: no-repeat;
    font-family: 'kalamlight';
    padding-top: 10vh;

}
.contactme{
    display: flex;
    flex-direction: row;
    gap: 15vh;
    padding-left: 20vh;
}


.contactme h1{
    color: #171010;
    display: flex;
    font-family: 'amnestiadistressed';
    position: relative;
    text-align: left;
    font-size: 7em;
    font-weight: xx-large;
    letter-spacing: .1em;
    top: 25vh;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
}

.contactme p{
    font-size: 2em;
    display: flex;
    text-align: left;
    position: relative;
    width: 70vh;
    top: 25vh;
    font-family: 'SourceSansProLight';
    text-shadow: 2px 4px 4px rgba(0,0,0,0.2),
                 0px -5px 10px rgba(255,255,255,0.15);
}

.contactform{
    box-shadow:
    2.8px 2.8px 706.6px -39px rgba(0, 0, 0, 0.02),
    6.7px 6.7px 770.2px -39px rgba(0, 0, 0, 0.028),
    12.5px 12.5px 745.7px -39px rgba(0, 0, 0, 0.035),
    22.3px 22.3px 682.1px -39px rgba(0, 0, 0, 0.042),
    41.8px 41.8px 597.3px -39px rgba(0, 0, 0, 0.05),
    100px 100px 500px -39px rgba(0, 0, 0, 0.07)
  ;
    display: flex;
    flex-direction: column;
    position: absolute;
    justify-content: center;
    gap: 2vh;
    padding: 5vh 3vh 5vh 3vh;
    left: 112vh;
    height: auto;
    width: auto;
    background-color: #e7bb9a;
    border-radius: 20px;
    transform: translateY(10%);
    font-family: 'SourceSansProExtraLight';
}

.contactform input{
    letter-spacing: .1em;
    background: #532E1C;
    border: none;
    outline: none;
    padding: 1.6vh 1vh;
    width: 70vh;
    height: 5vh;
    border-radius: 10px;
    color: black;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow:
    2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
    6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
    41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
    100px 100px 80px rgba(0, 0, 0, 0.07)
  ;
}

.contactform input:focus{
    background: #F0E3CA;
}

.contactform button{
    letter-spacing: .1em;
    background: #532E1C;
    border: none;
    outline: none;
    padding: .8rem .5rem;
    width: 20vh;
    height: 5vh;
    border-radius: 10px;
    font-family: 'SourceSansPro';
    position: relative;
    box-shadow:
  2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
  6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
  12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
  22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
  41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
  100px 100px 80px rgba(0, 0, 0, 0.07)
;
transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.contactform button:hover{
    background: #F0E3CA;
}

#inquiries textarea{
    letter-spacing: .1em;
    background: #532E1C;
    border: none;
    outline: none;
    padding: 5rem .5rem;
    font-family: 'SourceSansPro';
    width: 70vh;
    border-radius: 10px;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

#inquiries textarea:focus{
    background: #F0E3CA;
}

#portfolio{
    background:url(/img/bg4.svg);
    background-size: cover;
    background-repeat: no-repeat;
    font-family: 'pumpkin_pie_lattesregular';
}

.stampcard{
    top: 10%;
    transform: translateX(24%);
    position: relative;
}

.stampcard h1{
    font-size: 8em;
    font-family: 'amnestiadistressed';
    color: #ebc6a9;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
}

.stampcard h3{
    font-size: 2em;
    font-family: 'SourceSansProExtraLight';
    text-shadow: 2px 4px 4px rgba(0,0,0,0.2),
    0px -5px 10px rgba(255,255,255,0.15);
    
}
.stampcardtext{
    position: relative;
    text-align: center;
    right: 24%;
}
.stamps{
    height: 70vh;
    width: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    flex-wrap: wrap;
}

.stamp{
    background: url(/coffee.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 50%;
    background-color: beige;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 300px;
    text-decoration: none;
    border-radius: 50%;
    border: solid 2px black;
    text-align: center;
    color: black;
    font-family: 'SourceSansProLight';
    text-transform: uppercase;
    font-size: 1.5rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow:
    2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
    6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
    41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
    100px 100px 80px rgba(0, 0, 0, 0.07)
  ;
  letter-spacing: .1em;
}
.stamp .stamp-text{
    position: absolute;
    text-align: center;
    width: 200px;
}

.stamp .foreground-text{
    opacity: 0;
    z-index: 4;
    color: #f7f7f7;
}

.stamp::after {
    content: "";
    position: relative;
    z-index: 0;
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: #966f52;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @media (hover: hover) and (pointer: fine) {
    .stamp:hover {
      border-color: #402A23;
      border: 2px solid;
    }
    .stamp:hover::after {
      width: 100%;
      height: 100%;
    }
    .stamp:hover .stamp-text.foreground-text {
      opacity: 1;
    }
  }

  .iframeHolder1{
    position: absolute; 
    display: none;
}
.close1{
    display: inline;
    height: 50px;
    position: absolute;
    font-size: 50px;
    bottom: 50vh;
    left: 80vh;
    text-decoration: none;
    color: white;
    background: rgba(255, 255, 255, 0.5);
}
.iframeHolderShow1{
    display: inline;
    position: absolute;
    z-index: 5;
}

.soundcloud{
    position: relative;
    bottom: 10vh;
}

.youtube{
    position: relative;
    bottom: 10vh;
}

.iframeHolder3{
    position: absolute; 
    display: none;
}

.iframeHolderShow3{
    display: inline-block;
    position: absolute;
    z-index: 5;
}

.iframeHolder5{
    position: absolute; 
    display: none;
}

.iframeHolderShow5{
    display: inline-block;
    position: absolute;
    z-index: 5;
}