body {
    margin: 0;
  padding: 0;
  max-width:2880px;
  font-family: 'Kanit', sans-serif;
  width: 100%;
  overflow-x: hidden;
  color: #212427;
}

*
{
  box-sizing: border-box;
  overflow-x: hidden;
}

.profile-div,
.works-div,
.end-div {
  height: 100vh;
  overflow-x: hidden;
  overflow-y:hidden;
}

.profile-div
{
  background-color: #E11444;
  
}




.name
{
  position: absolute;
  margin-left: 3%;
  top: 3%;
  width: 80%;
}
.name img
{
  width: 70%;
}
@media only screen and (max-width: 768px)
{
  .profile-div
  {
    height: 30vh;
  }
  .name
  {
    margin: auto;
    top: 3%;
    display: flex;
    align-content: center;
    justify-content: center;
  }
  .name img
  {
    max-width: 400px;
    width: 80%;
  }
}

.bio
{
  padding-top: 1px;
  padding-left: 3%;
  padding-right:3%;
  background: #FFEDC2;
  box-shadow: 13px 13px 0px  rgba( 33, 36, 39, 0.9 );
    border: 2px solid #212427;
  border-radius: 8px;
  width: 50%;
  /*text-shadow: 2.5px 2.5px 0px rgba(33, 36, 39, 1);*/
  position: absolute;
  font-family: 'Kanit', sans-serif;
  letter-spacing: 1px;
  top: 30%;
  left: 40%;
  font-weight: bold;
  color: #212427;
  height:50%;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro{
  font-size: 3vh;
}

.extras{
  font-size: 15px;
}

@media only screen and (max-width: 768px)
{
  
  .bio
  {
    display: none;
  }
}




.stickers1, .stickers2
{
  position: absolute; 
  z-index: 100;
  width: 8%;
}


.stickers1
{
  left: 35%; 
  top: 75%; 
  transform:rotate(-10deg);
}
@media only screen and (max-width: 768px)
{
  .stickers1
  {
    left: 5%;
    top: 10vh;
  }
}


.stickers2{
  left: 80%; 
  top:20%; 
  transform: rotate(5deg)
}
@media only screen and (max-width: 768px)
{
  .stickers2
  {
    left: 85%;
    top: 30%;
  }
 
}

.stickers3
{
  position: absolute; 
  top: 30%; 
  left: 60px; 
  transform: rotate(-2deg); 
  width: 20%;
}
@media only screen and (max-width: 768px)
{
  .stickers3
  {
    display: none;
  }
}

.stickers4
{
  position: absolute;
  left: 15%; 
  top: 38%; 
  transform: rotate(6deg); 
  width: 10%;
}

@media only screen and (max-width: 768px)
{
  .stickers4
  {
    display: none;
  }
}


.stickersbling1
{
  position: absolute; 
  left: 90%; 
  top:20%;  
  transform: rotate(-10deg); 
  width: 2%;
}

.stickersbling2
{
  position: absolute; 
  left: 26%; 
  top:65%;  
  transform: rotate(-10deg); 
  width: 2%;
}

.stickers5
{
  position: absolute; 
  left: 10%; 
  top:70%;  
  transform: rotate(10deg); 
  width: 8%;
}

.clickme
{
  position: absolute; 
  left: 9%; 
  top:170vh;  
  transform: rotate(-10deg); 
  width: 10%;
  z-index: 10;
}
@media only screen and (max-width: 768px)
{
  .stickersbling2
  {
    display: none;
  }

  .stickers5
  {
    left: 35%;
    top: 15vh;
  }

  .clickme
  {
    position: absolute; 
    left: 9%; 
    top:110vh;  
    transform: rotate(-10deg); 
    width: 15%;
    z-index: 10;
  }
}

.facesticker
{
  position: absolute;
  right: 5%;
  bottom: 5vh;
  width:15%;
  z-index: 90;
}
@media only screen and (max-width: 768px)
{
  .facesticker
  {
    width: 20%;
    top: 10vh;
  }
}
.border
{
  padding-top: 2%;
  padding-bottom: 2%;
  width: 100%;
  max-width: 100%;
  max-height: 5%;
  background-color: #212427;
  overflow-x:hidden;
  overflow-y:hidden;
  color: #FFF3D6;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Kanit', sans-serif;
  text-align: center;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

.works-div
{
  background-color: #FFC847;
}

.leftarrow, .rightarrow
{
  position: absolute;
  top: 155%;
  height: 10%;
}
.leftarrow
{
  left: 2%;
}
.rightarrow{
  right: 2%;
}

.project-title
{
  position: absolute;
  font-family: 'Kanit', sans-serif;
  margin-left: 10%;
  top: 110vh;
  opacity: 0;
}

.project-frame
{
  position: absolute;
  padding-top: 1px;
  padding-left: 3%;
  padding-right: 3%;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 10%;
  top:125vh;
  width: 80%;
  background-color: #FFEDC2;
  box-shadow: 13px 13px 0px  rgba( 33, 36, 39, 0.9 );
    border: 2px solid #212427;
  border-radius: 8px;
  /*text-shadow: 2.5px 2.5px 0px rgba(33, 36, 39, 1);*/
  font-family: 'Kanit', sans-serif;
  letter-spacing: 1px;
  font-weight: bold;
  color: #212427;
  height: 65%;
  overflow-y: hidden;
  align-items: center;
  display:none;
  opacity: 0;
}
@media only screen and (max-width: 768px)
{
  .works-div
  {
    height: 120vh;
  }
  .project-frame
  {
    padding-left: 0;
    padding-right: 0;
    padding: 0;
    overflow-x: auto;
    top: 60vh;
    left:40%;
    transform: translateX(-50%);
    width: 70%;
    height: 350px;
  }
  .leftarrow, .rightarrow
  {
    top: 85%;
  }
}

.active
{
  display:flex;
  opacity: 1;
}


.lovenderdesktop
{
  margin-top: 1vh;
  margin-bottom: 1vh;
  object-fit: cover;
  object-position: center top;
  width:50%;
  height: 50vh;
  overflow-y: scroll;
  box-shadow: 13px 13px 0px  rgba( 33, 36, 39, 0.9 );
  border: 2px solid #212427;
}

.lovendermobile
{
  margin-top: 1vh;
  margin-bottom: 1vh;
  margin-left: 3px;
  object-fit: cover;
  object-position: center top;
  width: 25%;
  height: 50vh;
  overflow-y: scroll;
  box-shadow: 13px 13px 0px  rgba( 33, 36, 39, 0.9 );
  border: 2px solid #212427;
}


.projects h1{
  font-size: 50px;
  position: absolute;
  left:10vw;
}

.projectdesc
{
  text-align: left;
  height: 100%;
  width: 80%;
}

.projectdesc a:link {
  color: #212427; 
  background-color: transparent; 
  text-decoration:underline;
}

.projectdesc a:visited {
  color: #212427; 
  background-color: transparent; 
  text-decoration:underline;
}

.projectdesc h2
{
  font-size: 6vh;
}

.projectdesc h4
{
  font-size: 3vh;
}

.projectdesc h5
{
  font-size: 2vh;
}

.projectpics
{
  width: 70%;
  margin-right: 0;
  padding-right: 0;
}


.end-div{
  background-color: #212427;
  color: #FFEDC2;
}

.merakibrand
{
  margin-top: 1vh;
  margin-bottom: 1vh;
  object-fit:cover;
  object-position: center top;
  width:80%;
  height: 50vh;
  overflow-y: scroll;
  box-shadow: 13px 13px 0px  rgba( 33, 36, 39, 0.9 );
  border: 2px solid #212427;
}

.end-title
{
  color: #FFEDC2; 
  margin-left: 5%;
  margin-top: 5vh;
  font-size: 10vh;
}

.contacts
{
  margin-left: 5%;
  margin-top: 5vh;
  font-size: 3vh;
}

.formobile
{
  display:none;
}

a:link {
  color: #FFEDC2; 
  background-color: transparent; 
  text-decoration:underline;
}

a:visited {
  color: #FFEDC2;
  background-color: transparent;
  text-decoration: underline;
}

.mobilever
{
  display: none;
}

.githubsticker, .linkedinsticker, .igsticker, .behancesticker, .fiverrsticker
{
  position: absolute;
  top: 230vh;
}

.linkedinsticker{
  left: 20vw;
  transform: rotate(5deg);
  width: 15vw;
  
}

.igsticker{
  left: 30vw;
  transform: rotate(-10deg);
  width: 20vw;
  z-index: 10;
}

.behancesticker
{
  left: 53vw;
  transform: rotate(-8deg);
  width: 23vw;
  z-index: 10;
}

.fiverrsticker
{
  left: 44vw;
  transform: rotate(10deg);
  width: 15vw;
}
.githubsticker
{
  left: 67vw;
  transform: rotate(10deg);
  width: 15vw;
}
@media only screen and (max-width: 768px)
{
  .mobilever
  {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 50%;
    transform: translateX(-50%);
  }
  .lovenderdesktop
  {
    display: none;
  }

  .lovendermobile
  {
    display: none;
  }


  .projects h1{
    top: 45vh;
    left: 15vw;
  }

  .projectdesc
  {
    display: none;
  }

  .merakibrand{
    display: none;
  }
  .formobile{
    display: block;
  }
  .fordesktop
  {
    display: none;
  }
}

iframe
{
  width : 60vw;
}

.stickers11
{
  position: absolute;
  left: 80vw;
  top: 115vh;
  transform: rotate(8deg);
  width: 7vw;
  z-index: 10;
}
@media only screen and (max-width: 768px)
{
  .stickers2, .stickers11, .stickers5
  {
    display: none;
  }
}