@font-face {
  font-family: yatra-one;
  src: url(../fonts/YatraOne-Regular.woff);
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
p, h2, h3 {
  font-family: yatra-one;
}
* {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
}
body {
  background-color: #1B2122;
  color: #E0E6E5;
}
article {
  padding: 14vh 12vw 0;
}

.scroll-up-link{
  position: fixed;
  bottom: 8px;
  right: 14px;
}

main {
  position: relative;
}

.scroll-up-link img{
  width: 230px;
  transition: transform 0.08s;
}

.scroll-up-link img:hover{
  transform: scale(1.2);
  cursor: pointer;
}

.decorations img{
  position: absolute;
  z-index: -1;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 82px;
  background-color: #135349;
  margin-top: 64px;
}
.seperator {
  margin-top: 128px;
}
.seperator img {
  width: 104%;
  height: 34vh;

}
.index footer {
  margin-top: 0;
}
.index header {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-image: url(../images/Background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.index header .me-pointing-pic {
  position: absolute;
  bottom: 0;
  height: 90vh;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.index header .page-link-pic {
  width: 25vw;
  transition: transform 0.08s;
}
.index header .page-link {
  z-index: 1;
  width: 400px;
  height: 200px;
  position: absolute;
}

.index header .about-me-link{
  top: -12px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.index header .prof-lo-link{
  left: 12%;
  top: 40%;
}

.index header .tech-lo-link{
  right: 4%;
  top: 40%;
}

.index header .page-link-pic:hover {
  cursor: pointer;
  transform: scale(1.2);
}
.index header .about-me-link {
  height: 270px;
  border-radius: 80px;
}
.index header .page-link:hover {
  cursor: pointer;
}

.index main article {
  display: grid;
  column-gap: 80px;
  grid-template-columns: 390px 1fr;
}
.index main article img {
  width: 100%;
  align-self: center;
}
.index main article .about-me-text {
  align-self: center;
}
.index main article p {
  font-size: 24px;
  margin-top: 16px;
}
.index main nav {
  margin-top: 4rem;
  padding: 4rem 78px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.index main nav img {
  width: 350px;
  transition: transform 0.08s;
}
.index main nav img:hover {
  transform: scale(1.3);
}
.professional-page header, .technical-page header {
  position: relative;
  width: 100vw;
  height: 75vh;
  background-repeat: no-repeat;
}
.professional-page header .main-page-note:hover, .technical-page header .main-page-note:hover, .professional-page header .tech-lo-note:hover, .technical-page header .prof-lo-note:hover {
  transform: scale(1.2);
}
.professional-page article, .technical-page article {
  padding: 12vh 20vw 0;
}
.professional-page main article h2, .technical-page main article h2 {
  font-size: 40px;
  margin-bottom: 18px;
}
.professional-page main article h3, .technical-page main article h3 {
  font-size: 26px;
  margin-top: 32px;
  padding-bottom: 0;
}
.professional-page main article p, .technical-page main article p {
  font-size: 18px;
  margin: 18px 0;
}
.professional-page main article img, .technical-page main article img {
  min-width: 10vw;
  max-width: 30vw;
  min-height: 10vh;
  max-height: 40vh;
}
.professional-page .img-container, .technical-page .img-container {
  margin: 32px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.professional-page .img-container img, .technical-page .img-container img {
  transition: transform 0.08s;
  margin: 0 28px;
}
.professional-page .img-container img:hover, .technical-page .img-container img:hover {
  transform: scale(1.2);
}
.professional-page .img-container .long img, .technical-page .img-container .long img {
  min-width: 0;
  min-height: 0;
}
.professional-page header {
  background-image: url(../images/background_page_2_picture.jpg);
  background-size: contain;
}
.professional-page header .me-cutout-prof {
  position: absolute;
  bottom: 3vh;
  height: 80vh;
  left: 45%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.professional-page header .main-page-note {
  position: absolute;
  top: 4vh;
  left: 10vw;
  width: 20vw;
  transition: transform 0.08s;
}
.professional-page header .tech-lo-note{
  position: absolute;
  right: 27vw;
  width: 15vw;
  transition: transform 0.08s;
  bottom: -1vw;
}
.technical-page header {
  background-image: url(../images/background_page_3.jpg);
  background-size: cover;
}
.technical-page header .me-cutout-tech {
  position: absolute;
  bottom: 0;
  height: 64vh;
  right: 8%;
}
.technical-page header .main-page-note {
  position: absolute;
  top: 24vh;
  right: 26vw;
  width: 18vw;
  transition: transform 0.08s;
  z-index: 5;
}

.technical-page header .prof-lo-note{
  position: absolute;
  position: absolute;
  top: -15vh;
  right: 34vw;
  width: 18vw;
  transition: transform 0.08s;
}

/* DECORATIONS tech page */

.technical-page .decorations .error{
    top: 350px;
    right: 80px;
    width: 180px;
}

.technical-page .decorations .exclemation{
  top: 100px;
  left: 80px;
  width: 50px;
}

.technical-page .decorations .skull{
  top: 2600px;
  right: 90px;
}

.technical-page .decorations .anarchy{
  top: 1700px;
  left: 0px;
  width: 500px;
}

.technical-page .decorations .noose{
  top: 4650px;
  right: 80px;
}

.technical-page .decorations .why{
  top: 4300px;
  left: -14px;
  width: 300px;
}

.technical-page .decorations .paper1{
  top: 6000px;
  left: 80px;
  width: 200px;
}

.technical-page .decorations .paper2{
  top: 6500px;
  right: 50px;
  width: 200px;
}

.technical-page .decorations .cross{
  bottom: 800px;
  left: 50px;
  width: 200px;
}

.technical-page .decorations .paper3{
  bottom: 300px;
  right: 50px;
  width: 200px;
}

/* DECORATIONS prof page */

.professional-page .decorations .twosmiles{
  top: 180px;
  left: 80px;
  width: 180px;
}

.professional-page .decorations .scratches{
  top: 900px;
  right: -180px;
}

.professional-page .decorations .question{
  top: 1900px;
  width: 300px;
}

.professional-page .decorations .paper3{
  top: 2500px;
  right: -50px;
  width: 350px;
}

.professional-page .decorations .blabla{
  top: 3900px;
  right: 0px;
  width: 300px;
}

.professional-page .decorations .paper{
  top: 4700px;
  left: 0px;
  width: 250px;
}

.professional-page .decorations .note-people{
  bottom: 580px;
  right: 40px;
  width: 320px;
}