@import url('chillax.css');

/*for whole web page*/
html,
body {
  scroll-behavior: smooth; zoom: 100%;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  font-family: 'Chillax-Bold';
  background-color: #131A33;
  margin: 0;
  padding: 0;
  overflow-x: hidden;

}

p{font-family: 'Chillax-Bold';}

/*
.bordergreen {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  border: solid 0.3rem #CBFD00;
  box-sizing:border-box;
  z-index: 7;
}
*/
a {
  text-decoration: none
}

.bordergreenleft {
  border-left: solid 0.5vw #CBFD00;
  position: fixed;
  z-index: 1000;
  box-sizing: border-box;
  height: 100vh;
  width: 0;
  left: 0;
  top: 0;
}

.bordergreenright {
  border-right: solid 0.5vw #CBFD00;
  position: fixed;
  z-index: 1000;
  box-sizing: border-box;
  height: 100vh;
  width: 0;
  right: 0;
  top: 0;
}

.bordergreentop {
  border-top: solid 0.5vw #CBFD00;
  position: fixed;
  z-index: 1000;
  box-sizing: border-box;
  height: 0;
  width: 100vw;
  top: 0;
}

.bordergreenbottom {
  border-bottom: solid 0.5vw #CBFD00;
  position: fixed;
  z-index: 1000;
  box-sizing: border-box;
  height: 0;
  width: 100vw;
  bottom: 0;
}

p::selection {
  background-color: #EA3BF7;
}

/*cover*/
#grid {
  display: grid;
  width: 100vw;
  height: auto;
  position: absolute;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(24, 4.17vh);
}

#topleftcontainer {
  display: none;
}

#name {
  display: flex;
  align-self: stretch;
  grid-column-start: 2;
  grid-column-end: 9;
  grid-row-start: 18;
  grid-row-end: 23;
  position: absolute;
  padding: 2vh;
}

#name2 {
  display: none;
}

#monstercontainer {
  width: 100vw;
  position: absolute;
  display: flex;
  justify-content: center;
  align-self: stretch;
  padding: 2vh;
}

#monster {
  height: 70vh;
}

#monster2 {
  display: none;
}

.bluegradient {
  background: linear-gradient(180deg, #131A33 0%, #404DFD 90%);
  grid-column-start: 1;
  grid-column-end: 13;
  grid-row-start: 14;
  grid-row-end: 23;
}

#fixmenubutt {
  display: none;
}


#fillspace {
  width: 100vw;
  height: 91.62vh;
  position: relative;
}

#navigationbar {
  width: 100vw;
  background-color: #404DFD;
  display: flex;
  justify-content: space-around;
  position: sticky;
  padding: 2.6vh;
  top: 0px;
  z-index: 9;
}

.pagename {
  text-decoration: none;
  color: #131A33;
  font-size: 1.5vw;
  text-align: center
}

.pagename:hover {
  color: #EA3BF7;
}

.navcontainer {
  margin: auto;
  width: 12%;
}

#logo {
  height: 7vw;
  margin: auto;
}

.logocontainer {
  height: 8vw;
  width: 8vw;
  border-radius: 100%;
  background-color: #404DFD;
  position: absolute;
  display: flex;
  justify-content: space-around;
  align-self: stretch;
  transform: translateY(-2vh);
}

.introtext {
  display: flex;
  grid-column-start: 9;
  grid-column-end: 12;
  grid-row-start: 19;
  grid-row-end: 22;
  padding: 1vh;
  border-radius: 50vw;
  box-shadow: 0vw 0vw 1.5vw #131A33;
}

#introtext1 {
  background-color: #131A33;
  transform: rotate(-5deg);
}

#introtext2 {
  background-color: #2CDFB7;
  transform: rotate(10deg) translateY(2vh);
}

.introtext1glitch {
  position: relative;
  z-index: 5;
}

.introtext1glitch:hover {
  opacity: 0;
}

/*intro part*/
.centered {
  display: flex;
  justify-content: center;
}

.hitext {
  color: #EA3BF7;
  font-size: 3vw;
  margin-bottom: 5vw;
}

#hitexts1n2 {
  padding: 15vw;
}

#exploremyworld {
  text-align: center;
  margin-top: 5vw;
  z-index: 3;
  font-family: 'Chillax-Bold'
}

#ele4b {
  background-image: url(ele4b\ n\ gradient.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 25vw;
  height: 12vw;
}

.threeimgsection {
  display: flex;
  width: 100vw;
  flex-direction: row;
  justify-content: space-evenly;
  align-content: flex-start;
  margin-top: 5vw;
}

.img3d,
.img2d {
  width: 25vw
}

.image-container {
  position: relative;
}

.image-container .img2d {
  position: absolute;
  opacity: 0;
  transform: translateX(-25vw);
}

.image-container img {
  transition: opacity 0.5s ease;
}

.image-container:hover .img3d {
  opacity: 0;
}

.image-container:hover .img2d {
  opacity: 1;
}

.butthome {
  text-align: center;
  color: #FDDAF6;
  border-radius: 10vw;
  font-size: 1.5vw;
  background: linear-gradient(180deg, #404DFD 0%, #131A33 100%);
  padding: 0.5vw;
  width: 10vw;
  margin: auto;
  transition: opacity 1s ease;
}

.butthome:hover {
  color: #131A33;
  background: linear-gradient(180deg, #FDDAF6 0%, #EA3BF7 100%);
}

#b3 {
  position: absolute;
  width: 25vw;
  transform: translate(-8vw, -75vw) rotate(20deg);
}

#b3gradient {
  position: absolute;
  width: 35vw;
  transform: translate(-12vw, -80vw);
}

#b5 {
  position: absolute;
  width: 12vw;
  transform: translate(84vw, -65vw);
}

#b5gradient {
  position: absolute;
  width: 17vw;
  transform: translate(80vw, -67vw);
}

#a8 {
  position: absolute;
  width: 20vw;
  transform: translate(70vw, -40vw);
}

#a8gradient {
  position: absolute;
  width: 25vw;
  transform: translate(67vw, -42vw);
}

#a2 {
  position: absolute;
  width: 12vw;
  transform: translate(30vw, -80vw);
}

#a2gradient {
  position: absolute;
  width: 20vw;
  transform: translate(27vw, -83vw);
}

#b6 {
  position: absolute;
  width: 12vw;
  transform: translate(20vw, -35vw) rotate(-15deg)
}

#b6gradient {
  position: absolute;
  width: 17vw;
  transform: translate(18vw, -37vw)
}

.threeimgsection {
  margin-top: 0;
}


/*
#b4{position: absolute; width: 12vw;transform: translate(25vw, -14vw);}
#b4gradient{position: absolute; width: 17vw;transform: translate(23vw, -16vw);}
#ele4b{z-index: -9;}*/


/*footer_thiu scroll to up button*/
footer {
  background-color: #404DFD;
  height: 30vw;
  padding: 15vw;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 20vw;
}

.sayhi {
  font-size: 8vw;
  font-family: Afronaut;
  color: #CBFD00;
}

#footercontact {
  font-family: 'Chillax-Bold';
  color: #131A33;
  font-size: 1.5vw
}

#footercontact b {
  color: #FDDAF6;
}

i {
  font-family: 'Chillax-Regular';
}

.upbutton {
  position: absolute;
  height: 5vw;
  width: 5vw;
  right: 0;
  transform: translateY(-12.5vw);
  margin-right: 5vw;
}

.upbutton:hover {
  animation-name: moveup;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 0s;
  animation-timing-function: ease-in-out;
}

@keyframes moveup {
  100% {
    transform: translateY(-15vw);
  }
}

/*big title page*/
.bigtitles {
  color: #EA3BF7;
  font-size: 20vw;
}

.bigimg2 {
  display: none;
}

.bigimg {
  width: 40vw;
  position: absolute;
  transform: translate(-55vw, -6vw);
}

.bigimgworks {
  transform: translate(-58vw, -6vw)
}

.bigimgcontact {
  transform: translate(-68vw, -6vw)
}

#big2d {
  opacity: 0;
  z-index: 4;
}

#big3d {
  opacity: 1;
  z-index: 5;
}

.bigimg-container img {
  transition: opacity 1s ease;
}

.bigimg-container:hover #big3d {
  opacity: 0;
}

.bigimg-container:hover #big2d {
  opacity: 1;
}



.bigcontainer {
  display: flex;
  align-items: center;
  justify-content: center
}

/*about*/
#despitenewbie {
  font-family: 'Chillax-Regular';
  color: #FDDAF6;
  margin-top: 20vw;
  font-size: 1.5vw;
  padding: 5vw;
}

#education {
  display: grid;
  width: 100vw;
  height: 10vw;
  grid-template-columns: 6fr 5fr 0.6fr;
  grid-template-rows: 2fr 3fr;
}

.sectionsinaboutname {
  font-size: 1.5vw;
  padding: 0vw;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

#educationname {
  margin-right: 1.5vw;
  color: #CBFD00;
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-end: 4;
  text-align: center;
}

.period {
  font-size: 4vw;
  color: #2CDFB7;
  font-family: Afronaut;
  grid-column-start: 2;
  grid-column-end: 3;
  text-align: right;
}

.edustatus {
  color: #FDDAF6;
  font-size: 1.5vw;
  font-family: 'Chillax-Regular';
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  text-align: right;
}

#expertise {
  background-image: url(about\ backgroundd-24-24.svg);
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 5vw;
  background-position: center;
  width: 100vw;
}

#expertisecontent {
  display: grid;
  align-items: center;
  justify-content: center;
  padding: 5vw;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  column-gap: 2vw;
  row-gap: 2vw;
}

.expertisetitle {
  font-size: 4vw;
  color: #131A33;
  font-family: Afronaut;
}

.expertisedescription {
  font-size: 1.5vw;
  font-family: 'Chillax-Regular';
  color: #131A33;
}

.expertisesections {
  width: 40vw
}

#graphic2d {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 2;
  grid-column-end: 3;
}

#modeling3d {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 2;
}

#photography {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 2;
  grid-column-end: 3;
}

#expertisename {
  color: #404DFD;
  padding: 1.5vw;
  position: absolute;
  transform: rotate(180deg);
}

#languages {
  display: grid;
  width: 100vw;
  height: 10vw;
  grid-template-columns: 6fr 5fr 0.6fr;
  grid-template-rows: 1fr;
  margin-top: 5vw;
}

#languagename {
  color: #CBFD00;
  margin-right: 1.5vw;
  grid-column-end: 4;
  text-align: center;
}

#languageslist {
  font-size: 1.5vw;
  color: #FDDAF6;
  font-family: 'Chillax-Regular';
  text-align: right;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  margin-top: 2.5vw;
}

#a6 {
  position: absolute;
  width: 30vw;
  transform: translate(-5vw, -9vw);
}

#a6gradient {
  position: absolute;
  width: 40vw;
  transform: translate(-12vw, -15vw);
}

#b8,
#b8gradient {
  position: absolute;
  width: 15vw;
  transform: translate(85vw, -68vw);
}

/*works*/
#workspagecontainer {
  background-image: url(worksbackground-24.svg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  width: 100vw;
  margin-top: 25vw;
}

.nextbutt {
  width: 5vw;
  height: 5vw;
  z-index: 5;
  position: absolute;
}

.nextbutt:hover {
  animation-name: moveright;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 0s;
  animation-timing-function: ease-in-out;
}


@keyframes moveright {
  100% {
    transform: translateX(2vw);
  }
}

#expertisecontentworks {
  display: grid;
  align-items: center;
  justify-content: center;
  padding: 5vw;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  column-gap: 2vw;
  row-gap: 6vw;
}

.expertisetitleworks {
  font-size: 4vw;
  color: #131A33;
  font-family: Afronaut;
}

.expertisesectionsworks {
  width: 40vw;
  display: flex;
  column-gap: 2vw;
}

#graphic2dworks {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 2;
  grid-column-end: 3;
}

#modeling3dworks {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 2;
}

#photographyworks {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 2;
  grid-column-end: 3;
}

#ele4works {
  height: 20vw;
  width: 20vw;
  margin-top: 15vw;
  margin-bottom: 20vw;
}

#showcasegrid {
  z-index: 5;
  position: relative;
}

#section3d,
#section2d,
#section2d2,
#sectionphoto {
  display: flex;
}

#sectionfeeshnhan {
  display: flex;
  flex-direction: column;
}

.projects {
  position: relative;
  width: 50vw;
  height: 50vw;
  overflow: hidden;
}

.projects2 {
  position: relative;
  overflow: hidden;
}

.projects3 {
  position: relative;
  overflow: hidden;
  width: 33.33vw;
  height: 18.9vw;
}

#hbworks {
  width: 66.66vw;
  height: 37.8vw;
}

#hbworkstab,
#atl2dworkstab,
#cfworkstab,
#feeshworkstab,
#nhanworkstab,
#hbworksmob {
  display: none;
}

#atl2dworks {
  width: 33.33vw;
  height: 37.8vw;
}

#cfworks {
  position: relative;
  overflow: hidden;
  width: 66.66vw;
  height: 37.8vw;
}

.projects a {
  transition: opacity 0.25s;
}

.projects2 a {
  transition: opacity 0.25s;
}

.projects3 a {
  transition: opacity 0.25s;
}

#cfworks a {
  transition: opacity 0.25s;
}


.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: .5s ease;
  background: radial-gradient(50% 50% at 50% 50%, rgba(19, 26, 51, 0.32) 0%, rgba(0, 0, 0, 0.81) 100%);
}

.projects:hover .overlay {
  opacity: 1;
}

.projects2:hover .overlay {
  opacity: 1;
}

.projects3:hover .overlay {
  opacity: 1;
}

#cfworks:hover .overlay {
  opacity: 1;
}

.img-caption {
  color: #FDDAF6;
  font-family: 'Chillax-Bold';
  font-size: 1.5vw;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

#htdcover,
#hoacover {
  width: 50vw;
  height: 50vw
}

#atl3dcover,
#thcover {
  width: 50vw;
  height: 50vw
}

#hbcover {
  width: 66.66vw;
  height: 37.8vw
}

#atl2dcover {
  width: 33.33vw;
  height: 37.8vw;
}

#feeshcover {
  width: 33.33vw;
  height: 18.9vw;
}

#nhancover {
  width: 33.33vw;
  height: 18.9vw;
}

#cfcover {
  width: 66.66vw;
  height: 37.8vw
}

/*contact*/
#contactcontainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 25vw;
  row-gap: 2vw;
}

#sayhicontact {
  margin: auto;
}

#baloon {
  width: 50vw;
  height: 50vw;
}

#feelfree {
  font-family: 'Chillax-Regular';
  color: #FDDAF6;
  font-size: 1.5vw;
}

.pieces {
  position: absolute;
  width: 5vw;
  height: 5vw;
  opacity: 30%;
  z-index: 5;
}

.pieces:hover {
  opacity: 100%;
  transition: 0.5s;
}

#piece1 {
  transform: translate(-15vw, 15vw);
}

#piece2 {
  transform: translate(10vw, 10vw);
}

#piece3 {
  transform: translate(0vw, 30vw);
}

#piece4 {
  transform: translate(-12vw, 43vw);
}

#piece5 {
  transform: translate(14vw, 43vw);
}

.contactgradient {
  position: absolute;
  z-index: -5;
  opacity: 50%;
}

#contactgradient1 {
  transform: scale(0.5, 0.5) translate(-70vw, -20vw);
  animation-name: movearound;
  animation-duration: 50s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 0s;
  animation-timing-function: ease-in-out;
}

@keyframes movearound {
  0% {
    transform: translate(-20vw, -10vw) scale(0, .5, 0.5);
    opacity: 50%;
  }

  25% {
    transform: translate(0vw, 20vw) scale(0.7, 0.7);
    opacity: 50%;
  }

  50% {
    transform: translate(20vw, 40vw) scale(0.5, 0.5);
    opacity: 50%;
  }

  75% {
    transform: translate(-50vw, 20vw) scale(0.7, 0.7);
    opacity: 50%;
  }

  100% {
    transform: translate(-20vw, -10vw) scale(0.5, 0.5);
    opacity: 50%;
  }
}

#contactgradient2 {
  transform: scale(0.75, 0.75) translate(10vw, 40vw);
  animation-name: movearound2;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes movearound2 {
  0% {
    transform: translate(10vw, 40vw) scale(0.75, 0.7);
    opacity: 50%;
  }

  25% {
    transform: translate(20vw, -20vw) scale(0.5, 0.5);
    opacity: 50%;
  }

  50% {
    transform: translate(-10vw, 40vw) scale(0.7, 0.7);
    opacity: 50%;
  }

  75% {
    transform: translate(-30vw, -20vw) scale(0.5, 0.5);
    opacity: 50%;
  }

  100% {
    transform: translate(10vw, 40vw) scale(0.75, 0.75);
    opacity: 50%;
  }
}


/*projects*/
.fillspace2 {
  display: none;
}

.projecttitle {
  font-family: Afronaut;
  font-size: 4vw;
  color: #131A33;
}

.projectcontent {
  font-family: 'Chillax-Regular';
  font-size: 1.5vw;
  color: #131A33;
}

.projectbackground {
  background-image: url(projectbackground-24.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  width: 100vw
}

.projectcontainer {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(25, 3vw);
  column-gap: 1.3vw;
}

.projecttitle {
  grid-column-start: 2;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 9;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.projectcontentleft {
  grid-column-start: 6;
  grid-column-end: 12;
  grid-row-start: 5;
  grid-row-end: 15;
  display: flex;
  align-items: center;
}

.projectcontentright {
  grid-column-start: 2;
  grid-column-end: 8;
  grid-row-start: 15;
  grid-row-end: 25;
  display: flex;
  align-items: center;
}

/*
  .projectimage{display: block; object-fit: cover;}
  .prev-button, .next-button{position: absolute; cursor: pointer; width: 5vw; height: 5vw;}
  #htd1{width: 50vw; margin: auto; }
  .projectimgcontainer{width: 100vw;}
  .prev-button{left: 15vw;transform: translateY(-25vw);}
  .next-button{right: 15vw;transform: translateY(-25vw)}

.slider{display: flex; align-items: center; justify-content: center;}
.projectimgcontainer .carousel{white-space: nowrap; font-size: 0px; cursor: pointer;
overflow: hidden;}
.projectimage{width: calc(100vw/3); height: calc(100vw/3); object-fit: cover;
margin-left: 2vw;}
.projectimage:first-child{margin-left: 0;}
*/
.gallery {
  width: 80vw;
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
}

.gallery div {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 2vw;
  padding-right: 2vw;
  flex: none;
}

.gallery div:last-child {
  padding-right: 0;
}

.gallery div img {
  width: 39vw;
  height: 39vw;
  transition: 0.5s;
}

.hb {
  width: 39vw;
  height: 27.8vw;
  transition: 0.5s;
}

.gallery::-webkit-scrollbar {
  display: none;
}

.gallery-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10% auto;
}

#backbutton,
#nextbutton {
  cursor: pointer;
  width: 5vw;
  height: 5vw;
  margin: 2vw;
}

.gallery div img:hover {
  cursor: pointer;
  transform: scale(1.15);
}

.vid {
  width: 80vw;
  height: 45vw;
  display: flex;
  justify-content: center;
  margin: auto;
  transform: translateY(-8vw);
}


.hashtag {
  font-family: Afronaut;
  font-size: 1.3vw;
  color: #404DFD;
  grid-column-start: 2;
  grid-column-end: 12;
  grid-row-start: 7;
  grid-row-end: 8;
  display: flex;
  align-items: center;
  z-index: 1;
}

.ref {
  font-family: 'Chillax-Regular';
  font-size: 1.3vw;
  color: #404DFD;
}

.refcontainer {
  width: 80vw;
  display: flex;
  margin: auto;
}

/*tuoi hong 27*/
#thproject {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(11, 3vw);
  column-gap: 1.3vw;
}

/*nhan*/
#nhan1 {
  width: 80vw;
  height: 45.34vw;
}

#slidernhan {
  display: flex;
  display: flex;
  margin: auto;
  flex-direction: column;
  align-items: center;
}

#nhanvid1,
#nhanvid2 {
  width: 39vw;
  height: 22vw;
  transform: none;
  margin: 0%;
  margin-left: 2vw;
  margin-top: 1vw
}

#nhanvid1 {
  margin-left: 0%;
}

#nhanvidcontainer {
  display: flex;
}

#gallery-wrap-nhan {
  flex-direction: column;
}

/*chicken feet => beyond the cup*/
#cf1,
#cf2,
#cf3,
#cf4,
#cf5,
#cf6,
#cf7 {
  width: 39vw;
  height: 21.5vw;
}
/*atl3d => ba tien*/
#tien1,
#tien2,
#tien3,
#tien4,
#tien5 {
  width: 39vw;
  height: 21.5vw;
}

/*feesh => angel numbers*/
#feesh1,
#feesh2,
#feesh3,
#feesh4,
#feesh5,
#feesh6 {
  width: 39vw;
  height: 21.1vw;
}

/*the hunchback*/
#hb1,
#hb2,
#hb3,
#hb4,
#hb5,
#hb6,
#hb7,
#hb8,
#hb9,
#hb10,
#hb11,
#hb12 {
  width: 39vw;
  height: 27.8vw;
  transition: 0.5s;
}

#hblink {
  font-family: Afronaut;
  font-size: 1.3vw;
  color: #404DFD;
  grid-column-start: 6;
  grid-column-end: 12;
  grid-row-start: 7;
  grid-row-end: 8;
  display: flex;
  align-items: center;
  text-decoration: underline;
  z-index: 2;
}


/*human to demon*/
#htd1,
#htd2 {
  width: 39vw;
  height: 39vw;
  padding: 1vw;
}

#htdimgcontainer {
  margin: 10% auto;
  display: flex;
  justify-content: center;
}


/*cursor*/
#container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99;
}

.image {
  position: absolute;
  transition: transform 0.2s ease-out, opacity 0.4s ease-out;
  opacity: 1;
}

html {
  cursor: url("logo-07.svg"), auto;
}

/*scrolling bar*/
@media screen and (min-width: 768.6px) {
  /* width */
::-webkit-scrollbar {
  width: 0.5vw;
}

/* Track */
::-webkit-scrollbar-track {
  background: #131A33;
; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #2CDFB7; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #2cdfb877; 
}
}


/*tablet*/
@media screen and (max-width: 768.5px) {

  .bordergreenleft {
    border-left: solid 0.7vw #CBFD00;
  }

  .bordergreenright {
    border-right: solid 0.7vw #CBFD00;
  }

  .bordergreentop {
    border-top: solid 0.7vw #CBFD00;
  }

  .bordergreenbottom {
    border-bottom: solid 0.7vw #CBFD00;
  }


  #name {
    grid-column-end: 12;
    grid-row-start: 20;
    grid-row-end: 23;
    margin-top: -3.5vh;
  }

  #introtext1,
  #introtext2 {
    transform: none;
  }

  .introtext {
    grid-row-start: 23;
    grid-row-end: 25
  }

  #introtext1 {
    grid-column-start: 2;
    grid-column-end: 7;
    animation-name: switchingbackground1;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: 0s;
  }

  @keyframes switchingbackground1 {
    0% {
      background-color: #131A33;
    }

    100% {
      background-color: #2CDFB7;
    }
  }

  #introtext2 {
    grid-column-start: 7;
    grid-column-end: 12;
    animation-name: switchingbackground1;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: 0s;
  }


  #navigationbar {
    display: none;
  }

  .bluegradient {
    grid-row-start: 15;
    grid-row-end: 25;
  }

  #monstercontainer {
    grid-row-start: 2;
  }

  /*
  #hamcontainer {
    display: flex;
    height: 9.3vw;
    width: 9.3vw;
    transform: translate(87.2vw, 4vw);
    position: fixed;
  }
*/

  #topleftcontainer {
    display: flex;
    height: 9.3vw;
    width: 9.3vw;
    transform: translate(3.5vw, 4vw);
    position: fixed;
    z-index: 6;

  }

  .hitext {
    color: #EA3BF7;
    font-size: 3vw;
  }

  #ele4b {
    background-position: 25vw -1vw;
    height: 15vw;
  }

  #b3 {
    position: absolute;
    width: 25vw;
    transform: translate(-8vw, -78vw) rotate(20deg);
  }

  #b3gradient {
    position: absolute;
    width: 35vw;
    transform: translate(-12vw, -85vw);
  }

  #b5 {
    position: absolute;
    width: 12vw;
    transform: translate(84vw, -70vw);
  }

  #b5gradient {
    position: absolute;
    width: 17vw;
    transform: translate(80vw, -72vw);
  }

  #a8 {
    position: absolute;
    width: 20vw;
    transform: translate(70vw, -45vw);
  }

  #a8gradient {
    position: absolute;
    width: 25vw;
    transform: translate(67vw, -48vw);
  }

  #a2 {
    position: absolute;
    width: 12vw;
    transform: translate(30vw, -80vw);
  }

  #a2gradient {
    position: absolute;
    width: 20vw;
    transform: translate(27vw, -83vw);
  }

  #b6 {
    position: absolute;
    width: 8vw;
    transform: translate(20vw, -40vw) rotate(-15deg)
  }

  #b6gradient {
    position: absolute;
    width: 13vw;
    transform: translate(18vw, -42vw)
  }

  .threeimgsection {
    margin-top: 0;
  }


  .threeimgsection {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 0;
  }

  .img3d,
  .img2d {
    width: 55vw
  }

  #contactimg,
  #aboutimg,
  #worksimg {
    padding: 5vw;
  }

  #aboutbutt,
  #worksbutt,
  #contactbutt {
    font-size: 3vw;
    padding: 1.5vw;
    width: 20vw
  }

  .img3d {
    animation-name: disapearslowly;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
  }

  .img2d {
    animation-name: apearslowly;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
  }

  .image-container .img2d {
    transform: translateX(-55vw);
  }

  .image-container:active .img3d {
    animation-play-state: paused
  }

  .image-container:active .img2d {
    animation-play-state: paused
  }




  footer {
    padding: 20vw
  }

  #aboutfooter {
    margin-top: 30vw;
  }

  .sayhi {
    font-size: 10vw
  }

  #footercontact {
    font-size: 3vw;
  }

  .upbutton {
    animation-name: moveup;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
  }


  .bigtitles {
    font-size: 25vw;
  }

  .bigimg {
    width: 50vw;
    position: absolute;
    transform: translate(-68vw, -10vw);
  }

  .bigimgcontact {
    transform: translate(-72vw, -10vw)
  }

  .bigimgworks {
    transform: translate(-73vw, -10vw)
  }

  #big3d {
    animation-name: disapearslowly;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
  }

  @keyframes disapearslowly {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  #big2d {
    animation-name: apearslowly;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
  }

  @keyframes apearslowly {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 2;
    }
  }


  .bigcontainer {
    transform: translateY(5vw);
  }

  #despitenewbie {
    margin-top: 25vw;
    font-size: 3vw;
    padding: 10vw;
  }

  #education,
  #languages {
    column-gap: 2vw;
  }

  .period {
    font-size: 5.3vw;
  }

  .sectionsinaboutname,
  .edustatus,
  #languageslist {
    font-size: 3vw;
  }

  #expertise {
    margin-top: 12vw;
  }

  .expertisetitle,
  .expertisetitleworks {
    font-size: 5.3vw;
  }

  .expertisedescription {
    font-size: 3vw;
    font-family: 'Chillax-Regular';
  }

  #expertisecontent {
    display: block;
    align-items: center;
    justify-content: center;
    padding: 5vw;
    padding: 5vh;
  }

  .expertisesections {
    width: 100%;
    padding: 2vw;
  }

  #title2d,
  #titlephoto {
    text-align: right;
  }

  #b8 {
    position: absolute;
    width: 15vw;
    transform: translate(85vw, -95vw);
  }

  #b8gradient {
    position: absolute;
    width: 15vw;
    transform: translate(85vw, -95vw);
  }

  #a2 {
    position: absolute;
    width: 8vw;
    transform: translate(30vw, -75vw);
  }

  #a2gradient {
    position: absolute;
    width: 15vw;
    transform: translate(27vw, -78vw);
  }

  .nextbutt,
  .upbutton {
    height: 7vw;
    width: 7vw;
  }

  .nextbutt {
    animation-name: moveright;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
  }


  #workspagecontainer {
    margin-top: 35vw;
  }

  .expertisesectionsworks {
    flex-direction: column;
  }

  #expertisecontentworks {
    row-gap: 11vw;
    padding: 7vw;
  }

  #ele4works {
    height: 25vw;
    width: 25vw;
    margin-top: 20vw;
    margin-bottom: 20vw;
  }

  #hbworks,
  #atl2dworks,
  #cfworks,
  #feeshworks,
  #nhanworks {
    display: none;
  }

  #hbworkstab {
    display: block;
    width: 100vw;
    height: 50vw;
  }

  #hbcovertab {
    width: 100vw;
    height: 50vw;
  }

  #atl-chicfeettab,
  #feesh-nhantab {
    display: flex;
  }

  #atl2dworkstab,
  #cfworkstab,
  #feeshworkstab,
  #nhanworkstab {
    display: block;
    width: 50vw;
    height: 50vw;
  }

  #atl2dcovertab,
  #cfcovertab,
  #feeshcovertab,
  #nhancovertab {
    width: 50vw;
    height: 50vw;
  }


  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 100;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 9.75%, rgba(0, 0, 0, 0.98) 95.68%);
  }

  .img-caption {
    color: #FDDAF6;
    font-family: 'Chillax-Bold';
    font-size: 3vw;
    position: absolute;
    top: 80%;
    left: 50%;
    text-align: center;
  }


  #bigcontacttext {
    font-size: 20vw;
  }

  #feelfree {
    font-size: 3vw;
  }

  #contactcontainer {
    margin-top: 35vw;
    row-gap: 2vw;
  }

  #baloon {
    width: 90vw;
    height: 90vw;
  }

  #feelfree {
    font-size: 3vw;
    padding: 5vw;
  }

  .pieces {
    width: 10vw;
    height: 10vw;
    opacity: 70%;
    z-index: 5;
  }

  #piece1 {
    transform: translate(-27vw, 20vw);
  }

  #piece2 {
    transform: translate(15vw, 15vw);
  }

  #piece3 {
    transform: translate(0vw, 50vw);
  }

  #piece4 {
    transform: translate(-20vw, 75vw);
  }

  #piece5 {
    transform: translate(25vw, 75vw);
  }


  .fillspace2 {
    display: block;
    height: 5vw;
  }

  .projecttitle {
    font-size: 5.3vw;
  }

  .projectcontent {
    font-size: 3vw;
  }

  #atlproject {
    grid-template-rows: repeat(49, 3vw);
    column-gap: 3vw;
  }

  #tienproject {
    grid-template-rows: repeat(46, 3vw);
    column-gap: 3vw;
  }

  #htdproject {
    grid-template-rows: repeat(42, 3vw);
    column-gap: 3vw;
  }

  #hbproject {
    grid-template-rows: repeat(27, 3vw);
    column-gap: 3vw;
  }

  #cfproject {
    grid-template-rows: repeat(41, 3vw);
    column-gap: 3vw;
  }

  #feeshproject {
    grid-template-rows: repeat(29, 3vw);
    column-gap: 3vw;
  }

  #nhanproject {
    grid-template-rows: repeat(28, 3vw);
    column-gap: 3vw;
  }

  #hoaproject {
    grid-template-rows: repeat(29, 3vw);
    column-gap: 3vw;
  }

  #thproject {
    grid-template-rows: repeat(18, 3vw);
    column-gap: 3vw;
  }

  #hbtitleproject {
    justify-content: flex-start;
  }

  .projectcontentleft,
  .projectcontentright {
    align-items: flex-start;
  }



  #contentleft-tien {
    grid-row-start: 12;
    grid-row-end: 22;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentright-tien {
    grid-row-start: 24;
    grid-row-end: 28;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentleft-htd {
    grid-row-start: 12;
    grid-row-end: 24;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentright-htd {
    grid-row-start: 26;
    grid-row-end: 43;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentleft-atl {
    grid-row-start: 12;
    grid-row-end: 27;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentright-atl {
    grid-row-start: 29;
    grid-row-end: 41;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentleft-hb {
    grid-row-start: 12;
    grid-row-end: 18;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentright-hb {
    grid-row-start: 22;
    grid-row-end: 28;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentleft-cf {
    grid-row-start: 12;
    grid-row-end: 19;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentright-cf {
    grid-row-start: 21;
    grid-row-end: 40;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentleft-feesh {
    grid-row-start: 12;
    grid-row-end: 20;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentright-feesh {
    grid-row-start: 22;
    grid-row-end: 29;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentleft-nhan {
    grid-row-start: 12;
    grid-row-end: 18;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentright-nhan {
    grid-row-start: 19;
    grid-row-end: 29;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentleft-hoa {
    grid-row-start: 12;
    grid-row-end: 20;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentright-hoa {
    grid-row-start: 22;
    grid-row-end: 30;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentleft-th {
    grid-row-start: 12;
    grid-row-end: 19;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  .projectimage {
    width: 78vw;
  }

  .gallery {
    width: 78vw;
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
  }

  .gallery div {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 2vw;
    padding-right: 2vw;
    flex: none;
  }

  .gallery div:last-child {
    padding-right: 0;
  }

  .gallery div img {
    width: 78vw;
    height: 78vw;
  }

  .gallery::-webkit-scrollbar {
    display: none;
  }

  .gallery-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10% auto;
  }

  #backbutton,
  #nextbutton {
    cursor: pointer;
    width: 7vw;
    height: 7vw;
    margin: 2vw;
  }

  .gallery div img:hover {
    cursor: pointer;
    transform: scale(1);
  }

  .vid {
    width: 78vw;
    height: auto;
  }

  .hashtag {
    font-size: 2vw;
    grid-column-start: 7;
    grid-column-end: 12;
    grid-row-start: 8;
    grid-row-end: 9;
    justify-content: flex-end;
  }


  #htd1,
  #htd2 {
    width: 78vw;
    height: 78vw;
  }

  #htdimgcontainer {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #hb1,
  #hb2,
  #hb3,
  #hb4,
  #hb5,
  #hb6,
  #hb7,
  #hb8,
  #hb9,
  #hb10,
  #hb11,
  #hb12 {
    width: 78vw;
    height: 55.6vw;
  }

  #hblink {
    font-size: 2vw;
    grid-column-start: 2;
    grid-column-end: 12;
    grid-row-start: 8;
    grid-row-end: 9;
  }

  #tien1,
  #tien2,
  #tien3,
  #tien4,
  #tien5 {
    width: 78vw;
    height: 43.6vw;
  }

#feesh1,
#feesh2,
#feesh3,
#feesh4,
#feesh5,
#feesh6 {
  width: 78vw;
  height: 42.25vw;
}


  #cf1,
  #cf2,
  #cf3,
  #cf4,
  #cf5,
  #cf6,
  #cf7  {
    width: 78vw;
    height: 44vw;
  }

  #nhan1 {
    width: 78vw;
    height: 44.2vw;
  }

  #nhanvid1,
  #nhanvid2 {
    width: 78vw;
    height: 43.874vw;
    margin-left: 0;
    margin-top: 2vw;
  }

  #nhanvid1 {
    margin-top: 1vw;
  }

  #nhanvidcontainer {
    flex-direction: column;
  }

  /*
.projecttitle{grid-column-start: 2; grid-column-end: 5;
  grid-row-start: 2; grid-row-end: 9; display: flex; align-items: center; justify-content: center;}
.projectcontentleft{grid-column-start: 6; grid-column-end: 12;
  grid-row-start: 5; grid-row-end: 15; display: flex; align-items: center;}
.projectcontentright{grid-column-start: 2; grid-column-end: 8;
  grid-row-start: 15; grid-row-end: 25; display: flex; align-items: center;}
.fillspace2{height: 5vw;}*/

  /*hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh*/
  #fixmenubutt {
    display: flex;
    z-index: 8;
  }

  .popup-menu {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70vw;
    height: 0;
    background-color: #CBFD00;
    border-radius: 5vw;
    box-shadow: 0 0px 300px #000000;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 9999;
  }

  .popup-menu.open {
    height: 61vw;
    opacity: 1;
  }

  .menu-items {
    list-style: none;
    padding: 0;
    margin: 10vw;
  }

  .popupbutt {
    text-decoration: none;
    color: #CBFD00;
    width: 10vw;
  }

  .menu-items li {
    margin-bottom: 3vw;
    padding: 2vw;
    background-color: #131a33;
    border-radius: 10vw;
    transition: background-color 0.3s ease;
    text-align: center;
    font-size: 3vw;
  }

  .menu-items li:hover {
    background-color: #404DFD;
  }

  #close-button {
    position: absolute;
    width: 8vw;
    height: 8vw;
    ;
    top: 1vw;
    right: 1vw;
    cursor: pointer;
    transition: color 0.3s ease;
  }

  #close-button:hover {
    color: #666;
  }

  #hamcontainer {
    display: flex;
    height: 9.3vw;
    width: 9.3vw;
    transform: translate(87.2vw, 4vw);
    position: fixed;
    z-index: 9999;
  }
}

/* only for the monster n name in tablet*/
@media screen and (max-width: 564.5px) {
  #monstercontainer {
    display: none;
  }

  #monster2 {
    display: flex;
    position: absolute;
    align-self: stretch;
    grid-column-start: 2;
    grid-column-end: 12;
    grid-row-start: 3;
    grid-row-end: 16;
    width: 83.33vw;
  }

  #name {
    display: none;
  }

  #name2 {
    display: flex;
    grid-column-start: 4;
    grid-column-end: 10;
    grid-row-start: 17;
    grid-row-end: 22;
  }
}

/*mobile*/
@media screen and (max-width: 480.5px) {
  .bordergreenleft {
    border-left: solid 1vw #CBFD00;
  }

  .bordergreenright {
    border-right: solid 1vw #CBFD00;
  }

  .bordergreentop {
    border-top: solid 1vw #CBFD00;
  }

  .bordergreenbottom {
    border-bottom: solid 1vw #CBFD00;
  }

  #navigationbar {
    display: none;
  }

  #topleftcontainer {
    transform: scale(1.5, 1.5) translate(3.5vw, 4vw);
  }

  #monster2 {
    display: flex;
    position: absolute;
    align-self: stretch;
    transform: scale(2, 2) translate(-25%, 18%);
  }

  #fixmenubutt {
    display: block;
  }

  #hamcontainer {
    transform: scale(1.5, 1.5) translateY(4vw);
    right: 6vw;
  }

  #name2 {
    grid-column-start: 5;
    grid-column-end: 12;
    grid-row-start: 16;
    grid-row-end: 22;
  }

  .introtext {
    display: flex;
    grid-row-start: 23;
    grid-row-end: 24;
    padding: 1vh;
    border-radius: 3%;
  }

  #introtext1 {
    background-color: #131A33;
    transform: rotate(0deg);
    grid-column-start: 4;
    grid-column-end: 10;
    animation-name: glitching;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: 0s;
  }

  @keyframes glitching {
    0% {
      opacity: 0;
    }

    1% {
      opacity: 1;
    }

    30% {
      opacity: 1;
    }

    31% {
      opacity: 0;
    }

    40% {
      opacity: 0;
    }

    41% {
      opacity: 1;
    }

    90% {
      opacity: 1;
    }

    91% {
      opacity: 0;
    }

    100% {
      opacity: 0;
    }
  }

  #introtext2 {
    background-color: #2CDFB7;
    transform: rotate(0deg);
    grid-column-start: 4;
    grid-column-end: 10;
  }



  .hitext {
    font-size: 4vw;
  }

  #ele4b {
    background-size: contain;
    background-position: 18vw;
    height: 18vw;
  }

  #b3 {
    position: absolute;
    width: 25vw;
    transform: translate(-8vw, -98vw) rotate(20deg);
  }

  #b3gradient {
    position: absolute;
    width: 35vw;
    transform: translate(-15vw, -100vw);
  }

  #b5 {
    position: absolute;
    width: 12vw;
    transform: translate(84vw, -82vw);
  }

  #b5gradient {
    position: absolute;
    width: 17vw;
    transform: translate(80vw, -84vw);
  }

  #a8 {
    position: absolute;
    width: 25vw;
    transform: translate(70vw, -53vw);
  }

  #a8gradient {
    position: absolute;
    width: 30vw;
    transform: translate(67vw, -55vw);
  }

  #a2 {
    position: absolute;
    width: 10vw;
    transform: translate(30vw, -98vw);
  }

  #a2gradient {
    position: absolute;
    width: 18vw;
    transform: translate(27vw, -100vw);
  }

  #b6 {
    position: absolute;
    width: 8vw;
    transform: translate(10vw, -43vw) rotate(-15deg)
  }

  #b6gradient {
    position: absolute;
    width: 13vw;
    transform: translate(8vw, -46vw)
  }

  .threeimgsection {
    margin-top: 0;
  }

  .threeimgsection {
    margin-top: 0;
  }

  .img3d,
  .img2d {
    width: 80vw
  }

  #contactimg,
  #aboutimg,
  #worksimg {
    padding: 8vw;
  }

  #aboutbutt,
  #worksbutt,
  #contactbutt {
    font-size: 4vw;
    padding: 1.5vw;
    width: 25vw
  }

  .image-container .img2d {
    transform: translateX(-80vw);
  }


  .sayhi {
    font-size: 15vw
  }

  #footercontact {
    font-size: 4vw;
  }

  footer {
    padding: 30vw
  }

  #aboutfooter {
    margin-top: 35vw;
  }

  .sayhi {
    width: 100vw;
    text-align: center;
  }

  #education {
    column-gap: 1vw;
    margin-left: 0vw;
  }

  #educationname {
    margin-right: 0vw;
    transform: translateX(-1vw);
  }
  

  #despitenewbie,
  .edustatus,
  .expertisedescription,
  #languageslist,
  .sectionsinaboutname {
    font-size: 4vw;
  }

  .period,
  .expertisetitle,
  .expertisetitleworks {
    font-size: 8vw;
  }

  .bigimg {
    display: none;
  }

  .bigimg2 {
    width: 70vw;
    display: flex;
    margin: auto;
    position: relative;
  }

  #big2d {
    position: absolute;
    transform: translate(15vw, -70vw);
  }

  #despitenewbie {
    margin-top: 5vw;
  }

  #expertise {
    margin-top: 18vw;
  }

  .bigtitles {
    margin-top: 7vw;
    padding: 0;
  }

  .menu-items li {
    font-size: 4vw;
  }

  #a6 {
    position: absolute;
    width: 40vw;
    transform: translate(-5vw, -9vw);
  }

  #a6gradient {
    position: absolute;
    width: 50vw;
    transform: translate(-12vw, -15vw);
  }

  #b8,
  #b8gradient {
    position: absolute;
    width: 15vw;
    transform: translate(85vw, -270vw);
  }

  .nextbutt,
  .upbutton {
    height: 12vw;
    width: 12vw;
  }

  .upbutton {
    transform: translateY(-42vw);
  }

  .upbutton {
    animation-name: moveupp;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
  }

  @keyframes moveupp {
    100% {
      transform: translateY(-45vw);
    }
  }

  .upbutton:hover {
    animation-name: moveupp;
  }

  .nextbutton:hover {
    animation-name: moveright;
  }

  .nextbutt {
    animation-name: moveright;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
  }

  @keyframes moveright {
    100% {
      transform: translateX(2vw);
    }
  }


  #expertisecontentworks {
    display: flex;
    flex-direction: column;
    row-gap: 11vw;
    align-items: flex-start;
    padding: 11vw;
  }

  .expertisesectionsworks {
    flex-direction: row;
    width: 78vw;
  }

  #workspagecontainer {
    margin-top: 15vw;
  }


  #hbworks,
  #atl2dworks,
  #cfworks,
  #feeshworks,
  #nhanworks,
  #hbworkstab {
    display: none;
  }

  #atl-chicfeettab,
  #feesh-nhantab,
  #section3d,
  #sectionphoto {
    display: flex;
    flex-direction: column;
  }

  #atl2dworkstab,
  #cfworkstab,
  #feeshworkstab,
  #nhanworkstab,
  #hbworksmob,
  #htdworks,
  #atlworks,
  #hoaworks,
  #thworks {
    display: block;
    width: 90vw;
    height: 90vw;
    margin: auto;
    padding-top: 5vw;
  }

  #atl2dcovertab,
  #cfcovertab,
  #feeshcovertab,
  #nhancovertab,
  #hbcovermob,
  #htdcover,
  #atl3dcover,
  #hoacover,
  #thcover {
    width: 90vw;
    height: 90vw;
    margin: auto;
  }


  .overlay {
    width: 90vw;
    height: 90vw;
    margin: auto;
    position: absolute;
    opacity: 100;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 9.75%, rgba(0, 0, 0, 0.98) 95.68%);
    display: flex;
    align-items: center;
    justify-content: center
  }

  .img-caption {
    color: #FDDAF6;
    font-family: 'Chillax-Bold';
    font-size: 4vw;
    position: absolute;
    top: 80%;
    left: 50%;
    text-align: center;
  }


  #bigcontacttext {
    font-size: 20vw;
  }

  #contactcontainer {
    margin-top: 15vw;
    row-gap: 2vw;
  }

  #baloon {
    width: 90vw;
    height: 90vw;
  }

  #feelfree {
    font-size: 4vw;
    padding: 5vw;
  }

  .pieces {
    width: 15vw;
    height: 15vw;
    opacity: 70%;
    z-index: 5;
  }

  #piece1 {
    transform: translate(-30vw, 17vw);
  }

  #piece2 {
    transform: translate(15vw, 12vw);
  }

  #piece3 {
    transform: translate(0vw, 50vw);
  }

  #piece4 {
    transform: translate(-22vw, 72vw);
  }

  #piece5 {
    transform: translate(25vw, 72vw);
  }

  #contactgradient1 {
    transform: scale(0.5, 0.5) translate(-70vw, -20vw);
    animation-name: movearound;
    animation-duration: 50s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
  }

  @keyframes movearound {
    0% {
      transform: translate(-20vw, -10vw) scale(0, .5, 0.5);
      opacity: 50%;
    }

    25% {
      transform: translate(0vw, 90vw) scale(0.7, 0.7);
      opacity: 50%;
    }

    50% {
      transform: translate(10vw, 70vw) scale(0.5, 0.5);
      opacity: 50%;
    }

    75% {
      transform: translate(-50vw, 20vw) scale(0.7, 0.7);
      opacity: 50%;
    }

    100% {
      transform: translate(-20vw, -10vw) scale(0.5, 0.5);
      opacity: 50%;
    }
  }

  #contactgradient2 {
    transform: scale(0.75, 0.75) translate(10vw, 40vw);
    animation-name: movearound2;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  @keyframes movearound2 {
    0% {
      transform: translate(10vw, 70vw) scale(0.75, 0.7);
      opacity: 50%;
    }

    25% {
      transform: translate(10vw, -20vw) scale(0.5, 0.5);
      opacity: 50%;
    }

    50% {
      transform: translate(-10vw, 90vw) scale(0.7, 0.7);
      opacity: 50%;
    }

    75% {
      transform: translate(-30vw, -20vw) scale(0.5, 0.5);
      opacity: 50%;
    }

    100% {
      transform: translate(10vw, 70vw)scale(0.75, 0.75);
      opacity: 50%;
    }
  }




  .fillspace2 {
    height: 10vw;
  }

  .projecttitle {
    font-size: 8vw;
    grid-column-start: 2;
    grid-column-end: 12;
    justify-content: flex-start;
  }

  .projectcontent {
    font-size: 4vw;
  }

  #tienproject {
    grid-template-rows: repeat(69, 3vw);
    column-gap: 3vw;
  }

  #atlproject {
    grid-template-rows: repeat(76, 3vw);
    column-gap: 3vw;
  }

  #htdproject {
    grid-template-rows: repeat(67, 3vw);
    column-gap: 3vw;
  }

  #hbproject {
    grid-template-rows: repeat(37, 3vw);
    column-gap: 3vw;
  }

  #cfproject {
    grid-template-rows: repeat(57, 3vw);
    column-gap: 3vw;
  }

  #feeshproject {
    grid-template-rows: repeat(40, 3vw);
    column-gap: 3vw;
  }

  #nhanproject {
    grid-template-rows: repeat(42, 3vw);
    column-gap: 3vw;
  }

  #hoaproject {
    grid-template-rows: repeat(45, 3vw);
    column-gap: 3vw;
  }

  #thproject {
    grid-template-rows: repeat(22, 3vw);
    column-gap: 3vw;
  }

  .projectcontentleft,
  .projectcontentright {
    align-items: flex-start;
  }

  #contentleft-htd {
    grid-row-start: 12;
    grid-row-end: 34;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentright-htd {
    grid-row-start: 36;
    grid-row-end: 50;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentleft-tien {
    grid-row-start: 12;
    grid-row-end: 26;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentright-tien {
    grid-row-start: 29;
    grid-row-end: 69;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentleft-atl {
    grid-row-start: 12;
    grid-row-end: 40;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentright-atl {
    grid-row-start: 42;
    grid-row-end: 67;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentleft-hb {
    grid-row-start: 12;
    grid-row-end: 27;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentright-hb {
    grid-row-start: 29;
    grid-row-end: 38;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentleft-cf {
    grid-row-start: 12;
    grid-row-end: 23;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentright-cf {
    grid-row-start: 25;
    grid-row-end: 41;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentleft-feesh {
    grid-row-start: 12;
    grid-row-end: 27;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentright-feesh {
    grid-row-start: 29;
    grid-row-end: 40;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentleft-nhan {
    grid-row-start: 12;
    grid-row-end: 23;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentright-nhan {
    grid-row-start: 25;
    grid-row-end: 43;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentleft-hoa {
    grid-row-start: 12;
    grid-row-end: 29;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentright-hoa {
    grid-row-start: 31;
    grid-row-end: 46;
    grid-column-start: 2;
    grid-column-end: 12;
  }

  #contentleft-th {
    grid-row-start: 12;
    grid-row-end: 23;
    grid-column-start: 2;
    grid-column-end: 12;
  }


  #backbutton,
  #nextbutton {
    cursor: pointer;
    width: 12vw;
    height: 12vw;
    margin: 1vw;
  }

  .projectimage {
    width: 72vw;
  }

  .gallery {
    width: 72vw;
  }

  .gallery div {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 1vw;
    padding-right: 1vw;
    flex: none;
  }

  .gallery div img {
    width: 72vw;
    height: 72vw;
  }

  .vid {
    width: 72vw;
    height: auto;
    transform: translateY(-9vw);
  }

  .hashtag {
    font-size: 2vw;
    grid-column-start: 7;
    grid-column-end: 12;
    grid-row-start: 7;
    grid-row-end: 8;
    justify-content: flex-end;
  }

  #htd1,
  #htd2 {
    width: 72vw;
    height: 72vw;
  }

  #hb1,
  #hb2,
  #hb3,
  #hb4,
  #hb5,
  #hb6,
  #hb7,
  #hb8,
  #hb9,
  #hb10,
  #hb11,
  #hb12 {
    width: 72vw;
    height: 51.3vw;
  }

  #hblink {
    font-size: 2vw;
    grid-column-start: 2;
    grid-column-end: 12;
    grid-row-start: 7;
    grid-row-end: 8;
  }


#feesh1,
#feesh2,
#feesh3,
#feesh4,
#feesh5,
#feesh6 {
  width: 72vw;
  height: 39vw;
}

#tien1,
#tien2,
#tien3,
#tien4,
#tien5 {
  width: 72vw;
  height: 40.5vw;
}

  #cf1,
  #cf2,
  #cf3,
  #cf4,
  #cf5,
  #cf6,
  #cf7 {
    width: 72vw;
    height: 40.5vw;
  }

  #nhan1 {
    width: 72vw;
    height: 40.8vw;
  }

  #nhanvid1,
  #nhanvid2 {
    width: 72vw;
    height: 40.5vw;
    margin-top: 1vw;
  }

  #nhanvid1 {
    margin-top: 0;
  }

}

#despitenewbie, .edustatus, .expertisedescription, #languageslist, i, #feelfree, .projectcontent{  font-family: 'Chillax-Regular';}