body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(255, 254, 250);
  box-shadow:
    inset 25px 0 40px -40px rgba(85, 84, 84, 0.12),
    inset -25px 0 40px -40px rgba(85, 84, 84, 0.12),
    inset 0 25px 40px -40px rgba(85, 84, 84, 0.12),
    inset 0 -25px 40px -40px rgba(85, 84, 84, 0.12);

  overflow: hidden;
}

/*------------------------------------------------------------------------------------------------------------------------*/
/* background */

.noise {
  position: fixed;
  inset: 0;
  background: url("images/batthern.png");
  opacity: 0.6;
  pointer-events: none;
  z-index: -1;
}

/* background */

/*------------------------------------------------------------------------------------------------------------------------*/

/*intro name section*/

.name-parent {
  position: relative;
  width: 100%;
  height: 100%;
  height: fit-content;
  margin-bottom: 50px;
}

.name {
  position: absolute;
  transition: transform 0.3s ease;
  font-size: clamp(30px, 4vw, 55px);
  color: rgb(150, 4, 23);
  font-family: "Bodoni Moda";
  font-weight: 600;
}

.intro-internal {
  margin-top: 20px;
}

/*intro name section*/

/*------------------------------------------------------------------------------------------------------------------------*/

/* homepage images */

.portrait {
  position: fixed;

  bottom: 0;
  left: 0;

  width: 22vw;
  min-width: 120px;
  max-width: 640px;

  z-index: 1;
}

.portrait img {
  width: 100%;
  height: auto;
  display: block;
}

.portrait2 {
  position: fixed;

  bottom: 0;
  right: 0;

  width: 22vw;
  min-width: 140px;
  max-width: 620px;

  z-index: 1;
}

.portrait2 img {
  width: 100%;
  height: auto;
  display: block;
}

.picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* homepage images */

/*------------------------------------------------------------------------------------------------------------------------*/

/* parent container main */

.container {
  position: relative;
  width: min(65vw, 1200px);
  aspect-ratio: 16/9;
  margin: auto;
  /* border: 2px solid white;*/
  color: rgb(58, 39, 5);
}

/*...............................................................*/

/* central intro */

/*...............................................................*/

.intro {
  /*border: 1px solid rgb(221, 220, 220);*/
  position: absolute;
  margin: 5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-flow: column;
  gap: 8px;
  align-items: flex-start;
  user-select: none;
  font-family: "Scheherazade New";
}

/*...............................................................*/

/* about positioning */

/*...............................................................*/

.about {
  /*border: 1px solid rgb(221, 220, 220);*/
  position: absolute;
  left: 24%;
  top: 3%;
  text-align: center;
  margin: 5px;
  line-height: 0.5;
  text-align: left;
}

/*...............................................................*/

/* contact positioning */

/*...............................................................*/

.contact {
  /*border: 1px solid rgb(221, 220, 220);*/
  position: absolute;
  top: 40%;
  left: 10%;
  text-align: center;
  margin: 5px;
  line-height: 0.5;
  text-align: left;
}

/*...............................................................*/

/* work positioning */

/*...............................................................*/

.experiments {
  /*border: 1px solid rgb(221, 220, 220);*/
  position: absolute;
  top: 76%;
  left: 30%;
  text-align: center;
  margin: 5px;
  line-height: 0.3;
  text-align: left;
}

/*...............................................................*/

/* experiments positioning */

/*...............................................................*/

.work {
  /*border: 1px solid rgb(221, 220, 220);*/
  position: absolute;
  right: 14%;
  top: 12%;
  text-align: center;
  margin: 5px;
  line-height: 0.3;
  text-align: left;
}

/*...............................................................*/

/* journal positioning */

/*...............................................................*/

.journal {
  /*border: 1px solid rgb(221, 220, 220);*/
  position: absolute;
  right: 10%;
  top: 55%;
  text-align: center;
  margin: 5px;
  line-height: 0.3;
  text-align: left;
}

/*...............................................................*/

/* symbol color and eng/hin tags */

/*...............................................................*/

.symbols {
  color: #a4001d;
  display: block;
  position: relative;
  z-index: 2;
  margin: 0 0 12px;
  line-height: 1;
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2",
    "Noto Sans Symbols", sans-serif;
  font-weight: 700;
}

.eng-tag {
  font-size: clamp(18px, 2.8vw, 34px);
  line-height: 0.2;
  user-select: none;
  font-family: "Scheherazade New";
}

.hin-tag {
  font-size: clamp(12px, 2.2vw, 22px);
  user-select: none;
}

/* parent container main */

/*------------------------------------------------------------------------------------------------------------------------*/

/* animations */

.about,
.work,
.journal,
.contact,
.experiments {
  opacity: 0;
}

/*...............................................................*/

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-15px);
  }

  100% {
    transform: translateY(0px);
  }
}

/*...............................................................*/

.about {
  animation: float 3.5s ease-in-out infinite;
}

.work {
  animation: float 4s ease-in-out infinite;
}

.contact {
  animation: float 5.5s ease-in-out infinite;
}

.journal {
  animation: float 6s ease-in-out infinite;
}

.experiments {
  animation: float 4.5s ease-in-out infinite;
}

.wobble {
  animation: wobble 0.6s ease;
}

/*...............................................................*/

@keyframes wobble {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(12deg);
  }
  40% {
    transform: rotate(-24deg);
  }
  60% {
    transform: rotate(8deg);
  }
  80% {
    transform: rotate(-16deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/*...............................................................*/

/* animations */

/*------------------------------------------------------------------------------------------------------------------------*/

/*.como {
  transition: transform 0.2s ease;
}*/ /*looks like not working*/

/*------------------------------------------------------------------------------------------------------------------------*/

/* modal main */

.window {
  display: none;
  position: fixed;
  /*top: 60%;
  left: 50%;
  transform: translate(60%, 50%);*/

  background: url("images/batthern.png");
  background-color: rgb(255, 254, 250);
  border: 2px solid rgb(58, 39, 5);

  width: min(35vw);
  height: min(40vh);
  aspect-ratio: 16/9;

  padding-top: 0;
  overflow: scroll;
  border-radius: 14px;
}

/*...............................................................*/

.window:hover {
  box-shadow: 0 0 0 5px rgba(36, 21, 21, 0.18);
  cursor: pointer;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

/*...............................................................*/

.nav-item {
  cursor: pointer;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

/*...............................................................*/

.nav-item:hover {
  color: #a4001d;
  transform: translateY(-3px);
}

/* modal main */

/*------------------------------------------------------------------------------------------------------------------------*/

/* who am i? modal */

.about-window {
  height: min(35vh);
}

.about-content {
  position: absolute;
  display: flex;
  flex-direction: row;
  padding: 5px;
  padding-left: 15px;
  gap: 15px;
  /*border: 2px solid blue;*/
}

/*...............................................................*/

.pfp {
  justify-content: center;
  align-content: center;
  align-items: center;
  width: 50%;

  z-index: 1;
  padding-left: 10px;
  /* border: 2px solid red;*/
}

/*...............................................................*/

.pfp img {
  width: 90%;
  height: auto;
  display: block;
  border-radius: 100px;
}

/*...............................................................*/

.about-internal {
  width: 95%;
  padding-left: 20px;
  display: flex;
  flex-direction: row;
  /*border: 2px solid rgb(183, 0, 255);*/
}

/*...............................................................*/

.about-internal p {
  width: 98%;
  height: auto;

  /*border: 2px solid rgb(255, 0, 242);*/
  font-size: clamp(16px, 3vw, 25px);
}

/* who am i? modal */

/*------------------------------------------------------------------------------------------------------------------------*/

/* style choices */

.text {
  right: 0;
  font-size: clamp(20px, 3vw, 32px);
  line-height: 32px;
  font-family: "Lato";
}

.window::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.window::-webkit-scrollbar-track {
  background: rgb(255, 254, 250);
  border-left: 1px dashed black;
}

.window::-webkit-scrollbar-thumb {
  background: #a4001d;
  border: 2px solid rgb(255, 254, 250);
}

.window::-webkit-scrollbar-thumb:hover {
  background: #ffea00;
}

.window::-webkit-scrollbar-corner {
  background: rgb(255, 254, 250);
}

/*...............................................................*/

.titlebar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(38px, 7vw, 52px);
  box-sizing: border-box;
  font-size: clamp(20px, 3vw, 34px);
  text-align: center;
  line-height: 1.1;
  margin: 8px 12px 10px;
  padding: 6px 12px;
  cursor: grab;
  touch-action: none;
  user-select: none;

  font-weight: 800;
  /*border: 2px solid rgb(0, 255, 34);*/
  color: rgb(58, 39, 5);
  font-family: "Scheherazade New";
}

.titlebar:active {
  cursor: grabbing;
}

/*...............................................................*/

.about-window {
  height: min(45vh);
}
/*------------------------------------------------------------------------------------------------------------------------*/

/* gallery-content */

/*------------------------------------------------------------------------------------------------------------------------*/
.experiments-window {
  height: min(52vh);
}

.gallery-content {
  display: grid;
  width: 98%;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  margin: 2px;
}

.gallery-content img {
  width: 100%;

  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
}

.gallery-content img:hover {
  transform: translateY(-3px);
}

/*------------------------------------------------------------------------------------------------------------------------*/

/* contact-content */

/*------------------------------------------------------------------------------------------------------------------------*/

.contact-window {
  width: min(22vw);
}

.contact-content {
  display: flex;
  flex-direction: column;
  padding: 10px;
  /*border: 2px solid red;*/
  gap: 2px;
}

.contact-internal {
  display: flex;
  flex-direction: row;

  align-items: center;
  /*border: 2px solid greenyellow;*/
  margin: 8px;
  font-size: clamp(16px, 2.6vw, 32px);
}

a {
  text-decoration: none;
  color: inherit;
}

.contact-internal img {
  margin: 5px;
  margin-right: 10px;
  width: 3vw;
}

.contact-internal a:hover {
  color: #a4001d;
  transform: translateX(2px);
}

/*------------------------------------------------------------------------------------------------------------------------*/

/* thoughts-content */

/*------------------------------------------------------------------------------------------------------------------------*/
.journal-window {
  width: min(30vw);
}
.thoughts-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70%;
  margin: 8px;
  /*border: 2px solid red;*/
  align-content: center;
  text-align: center;
  font-size: clamp(18px, 3vw, 32px);
  color: rgb(150, 4, 23);
}

/*------------------------------------------------------------------------------------------------------------------------*/

/* thoughts-content */

/*------------------------------------------------------------------------------------------------------------------------*/
.work-window {
  height: min(50vh);
}
.work-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 8px;
  gap: 10px;
  /*border: 2px solid red;*/
  font-size: clamp(18px, 2.8vw, 30px);
  font-family: "Lato";
}

.work-internal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* border: 2px solid greenyellow;*/
  margin-left: 8px;
}

.work-internal a {
  display: flex;
  align-items: center;
  justify-content: center;
}

.work-internal p {
  width: 95%;
  font-size: clamp(18px, 2.6vw, 28px);
}

.work-internal img {
  margin: 5px;
  width: 60%;
  border: 2px solid rgb(58, 39, 5);
}

.work-internal img:hover {
  border: 2px solid #ffea00;
}

.work-internal a:hover {
  color: #a4001d;
  transform: translateY(-2px);
}

.flower:hover {
  color: #a4001d;
  scale: 1.2;
}

/*------------------------------------------------------------------------------------------------------------------------*/

/* image-viewer */
.image-viewer {
  height: min(50vh);
  width: min(25vw);
}
.image-content {
  height: 80%;
}
.image-content img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 5px;
  margin-right: 10px;
}

.image-viewer p {
  font-weight: 400;
  text-align: center;
  font-size: clamp(18px, 2.6vw, 28px);
  width: 95%;
  margin-left: 10px;
}
/*------------------------------------------------------------------------------------------------------------------------*/

/* media query */

@media (max-width: 1700px) {
  .container {
    height: min(65vh);
    width: min(95vw);
    aspect-ratio: 5/4;
  }

  .portrait {
    width: 23vw;
    min-width: 160px;
    max-width: 300px;
  }

  .portrait2 {
    width: 23vw;
    min-width: 160px;
    max-width: 300px;
  }

  .window {
    height: min(35vh);
    width: min(40vw);
  }

  .pfp {
    width: 50%;
  }

  .work-window {
    height: min(45vh);
  }
}

/*...............................................................*/

@media (max-width: 1340px) {
  .pfp {
    width: 65%;
  }
  .intro-internal {
    margin-top: 8px;
  }

  .about-window {
    width: min(50vw);
  }
}

@media (max-width: 1050px) {
  .window {
    height: min(35vh);
    width: min(45vw);
  }

  .about-content {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .pfp {
    width: 65%;
  }

  .pfp img {
    width: 90%;
  }

  .about-content {
    width: 95%;
  }

  .name-parent {
    margin-bottom: 40px;
  }

  .intro-internal {
    margin-top: 1px;
  }

  .work-window {
    height: min(45vh);
  }
}

/*...............................................................*/

@media (max-width: 500px) {
  .container {
    height: min(65vh);
    width: min(95vw);
    aspect-ratio: 5/4;
  }

  .about {
    top: -2%;
  }

  .contact {
    left: 3%;
  }

  .journal {
    right: 3%;
  }

  .symbols {
    font-size: clamp(30px, 9vw, 42px) !important;
    margin-bottom: 14px;
  }

  .contact-window {
    width: 50vw;
  }

  .contact-internal {
    display: flex;
    flex-direction: column;
  }

  .experiments-window {
    height: min(26vh);
  }

  .journal-window {
    height: min(30vh);
  }
}

/*...............................................................*/

/* media query */