/* FONTOK FONTOK FONTOK FONTOK FONTOK FONTOK FONTOK FONTOK FONTOK FONTOK FONTOK FONTOK FONTOK FONTOK FONTOK FONTOK FONTOK FONTOK FONTOK FONTOK FONTOK FONTOK FONTOK*/

@font-face {
  font-family: AR;
  src: url(./files/fonts/acumin-pro-cufonfonts/Acumin-RPro.otf);
}

@font-face {
  font-family: PR;
  src: url(./files/fonts/paragon/Paragon-Regular.otf);
}

@font-face {
  font-family: AB;
  src: url(./files/fonts/acumin-pro-cufonfonts/Acumin-BdPro.otf);
}

@font-face {
  font-family: AI;
  src: url(./files/fonts/acumin-pro-cufonfonts/Acumin-ItPro.otf);
}

@font-face {
  font-family: PI;
  src: url(./files/fonts/paragon/Paragonitalic-Regular.otf);
}

@font-face {
  font-family: NR;
  src: url(./files/fonts/beautiful-nostalgia/Beautiful\ Nostalgia-Personal\ Use.otf);
}

/* ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM */

.geoanim {
  position: relative;
  width: 100%;
  height: 50vh;
  overflow: hidden;
}

.glitter {
  position: relative;
  width: 100%;
  height: 50vh;
}

.black-theme .glitter {
  filter: invert(100%);
}

.black-theme .geoanim {
  filter: invert(100%);
}

/* Base drop style */
.drop {
  position: absolute;
  top: -10vh;
  background: rgba(25, 25, 25, 0.8);
  border-radius: 5px;
  animation-name: fall;
  animation-timing-function: linear;
}

/* Three drop sizes */
.drop.small {
  width: 0.8px;
  height: 10px;
  animation-duration: 1s;
}

.drop.medium {
  width: 1.5px;
  height: 18px;
  animation-duration: 0.8s;
}

.drop.large {
  background: rgba(75, 75, 75, 0.8);
  width: 2px;
  height: 25px;
  animation-duration: 0.5s;
}

/* Falling animation */
@keyframes fall {
  from {
    transform: translateY(-10vh);
    opacity: 1;
  }

  to {
    transform: translateY(80vh);
    opacity: 0;
  }
}

.square {
  position: absolute;
  background-color: black;
  transform: rotate(45deg);
  opacity: 0;
}

.square-2 {
  width: 2px;
  height: 2px;
}

.square-3 {
  width: 3px;
  height: 3px;
}

.square-4 {
  width: 4px;
  height: 4px;
}



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

  100% {
    opacity: 1;
  }
}


/* ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM ANIM */

/* ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP */

body {
  margin-top: 30px;
  margin-left: 70px;
  margin-right: 70px;
  margin-bottom: 30px;
  color: rgb(25, 25, 25);
}

.ab {
  font-family: "AB"
}

.ac-it {
  font-family: "AI";
}

body {
  transition: background-color 0.6s ease, color 0.6s ease;
}

h1 {
  font-family: "NR";
  font-size: 24pt;
}

h2 {
  font-family: "NR";
  font-size: 20pt;
}

h3 {
  font-family: "NR";
  font-size: 20pt;
  padding-top: 10px;
}

h4 {
  font-family: "AB";
  font-size: 14pt;
}

a {
  text-decoration: none;
  color: rgb(64, 0, 255);
}

.blacklink {
  color: #252525;
}

/* When in dark mode, make the active (black) link light */
.black-theme .blacklink {
  color: rgb(217, 217, 217); /* or white if you prefer: #ffffff */
}

/* Optional: adjust hover color for contrast in dark mode */
.black-theme .blacklink:hover {
  color: rgb(255, 255, 255);
}

.black-theme a {
  color: rgb(109, 99, 249);
}

.black-theme a:hover {
  color: white;
}

.white-theme a:hover {
  color: rgb(113, 65, 255);
}

/* ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP ALAP */

.gray {
  color: rgb(140, 140, 140);
}

.black-theme .gray {
  color: rgb(140, 140, 140);
}

.n-ac {
  font-family: "AR";
  font-size: 14pt;
}

header {
  display: flex;
  justify-content: space-between;
}

#lang-pick {
  width: 150px;
  display: flex;
  justify-content: space-between;
}

main {
  padding-top: 20px;
}

.white-theme {
  background-color: rgb(225, 225, 225);
  color: rgb(25, 25, 25);
}

.black-theme {
  color: rgb(217, 217, 217);
  background-color: #141414;
}

.black-theme .inv {
  filter: invert(100%);
}

#data-pair {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  column-gap: 30px;
  row-gap: 0px;
  flex-wrap: wrap;
}

.blue-text {
  color: blue;
}

/* PORTFOLIO ELEMENTS PORTFOLIO ELEMENTS PORTFOLIO ELEMENTS PORTFOLIO ELEMENTS PORTFOLIO ELEMENTS PORTFOLIO ELEMENTS PORTFOLIO ELEMENTS PORTFOLIO ELEMENTS PORTFOLIO ELEMENTS */

.port-s {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
  padding-bottom: 40px;
}

.soundhost {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow: hidden;
  column-gap: 30px;
}

.video {
  max-width: 100%;
}

.p-img-container {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
}

.p-img-container img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.img-melletti {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 1100px) and (min-width: 701px) {
  .port-s {
    grid-template-columns: 1fr;
  }

  .p-img-container {
    grid-template-columns: 1fr 1fr;
    justify-self: start;       /* align to text start */
    margin-left: 0;            /* no extra indent */
    width: 100%;               /* span full width */
  }

  .geoanim {
    height: 42vh;
  }

  .glitter {
    height: 42vh;
  }
}

@media screen and (max-width: 700px) and (min-width: 501px) {

  body {
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 20px;
    margin-bottom: 20px;
  }


  .port-s {
    grid-template-columns: 1fr;
  }

  .p-img-container {
    grid-template-columns: 1fr;
  }

  .geoanim {
    height: 36vh;
  }

  .glitter {
    height: 36vh;
  }

}

@media screen and (max-width: 500px) {

  body {
    margin-left: 32px;
    margin-right: 32px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .port-s {
    grid-template-columns: 1fr;
  }

  .p-img-container {
    grid-template-columns: 1fr;
  }

  .geoanim {
    height: 36vh;
  }

  .glitter {
    height: 36vh;
  }

  .n-ac {
    font-size: 12pt;
  }

}