@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;600&family=Montserrat:wght@400;700&family=Unbounded:wght@200;300;400;500;600;700;800;900&display=swap');

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

body {
  font-family: 'Unbounded', sans-serif;
  color:white;
}

.logo{
  font-size: 2.5rem;
  font-weight: 600;
  text-decoration: none;
  color: white;
  transition: ease-in-out 0.4s;
  position: absolute;
  top: 32px;
  left: 32px;
  z-index: 10;
}

a{
  color: white;
}

h1{
  text-transform: uppercase;
  font-size: 4.5rem;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
  line-height: 1.3;
  position: relative;
  z-index: 10;
}

.since{
  font-size: 1.2rem;
  text-align: center;
}
.random {
  position: absolute;
  transition: none; /* Smooth and quick transition */
  cursor: pointer;
  z-index: 1;
}

.viewport {
  height: 100vh;
  width: 100vw;
  position: relative;
  background-color: #214feb;
  overflow: hidden; /* Prevents scrollbars if the image moves out of the viewport */
}

 /* Button style */
.reset-button, .control-button {
  font-size: 4.5rem;
  font-weight: 600;
  color: white;
  background: none;
  border: none;
  position: relative;
  overflow: hidden;
  z-index: 10;
}

.reset-button:hover, .control-button:hover {
  cursor: pointer;
}

.control-button:before,
.reset-button:before {
  transition: ease-in-out;
  content: '';
  position: absolute;
  transition: ease-in-out 0.4s;
  width: 100%;
  height: 8px;
  background-color: white;
  bottom: 0px;
  right: 0;
}

.control-button:hover:before,
.reset-button:hover:before {
  right: -102%;
}

header{
  position: relative;
}


.footer{
  width: 100%;
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 0.7rem;
  margin-bottom: 10px;
  z-index: 0;
}

.footer span{
  margin: 0 16px;
}

.flex{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  z-index: 10;
}

.flex-item{
  padding-bottom: 60px;
}

.contact{
  margin-bottom: 20px;
}

.talk{
  font-size: 2rem;
  line-height: 1;
  font-weight: 500;
  display: inline-block;
  padding: 8px 16px;
  color: #214feb;
  background-color: white;
  text-decoration: none;
  transition: ease-in-out 0.4s;
}

.talk:hover{
  background-color: #214feb;
  color: white;
}

.insta{
  display: inline-block;
  font-size: 4.8rem;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  margin-bottom: 32px;
  overflow: hidden;
}

.insta::before{
  content: '';
  transition: ease-in-out 0.4s;
  position: absolute;
  bottom: 0;
  right: 50%;
  transform: translateX(50%);
  width: 100%;
  height: 9px;
  background-color: white;
}

.insta:hover::before{
  right: -102%
}

#spray-can {
  position: absolute;
  left: calc(14% - 133px);
  top: 14%;
}

#cow {
  position: absolute;
  left: calc(37% - 146.5px);
  top: 5%;
}

#gq-magazine {
  position: absolute;
  left: calc(62% - 137px);
  top: 5%;
}

#rabbit {
  position: absolute;
  left: calc(88% - 139px);
  top: 10%;
}

#magnet {
  position: absolute;
  left: calc(11% - 159.5px);
  top: 51%;
}

#work-boot {
  position: absolute;
  left: calc(19.33% - 93px);
  top: 77%;
}

#sciencly-happy {
  position: absolute;
  left: calc(32% - 114px);
  top: 60%;
}

#bottle-top {
  position: absolute;
  left: calc(69.66% - 125.5px);
  top: 62%;
}

#chalk {
  position: absolute;
  left: calc(90.33% - 90.5px);
  top: 55%;
}

#aeroplane {
  position: absolute;
  left: 76%;
  top: 77%;
}

@media screen and (min-width: 1800px) {
  .random {
    width: auto;
    height: auto;
  }
  h1{
    font-size: 6.5rem;
  }
  .control-button, .reset-button{
    font-size: 6.5rem;
  }
}


@keyframes randomMove {
  0%, 100% {
    transform: translate(0px, 0px);
  }
  10% {
    transform: translate(calc(-2px * var(--random-x1)), calc(-2px * var(--random-y1)));
  }
  20% {
    transform: translate(calc(2px * var(--random-x2)), calc(2px * var(--random-y2)));
  }
  30% {
    transform: translate(calc(-2px * var(--random-x3)), calc(-2px * var(--random-y3)));
  }
  40% {
    transform: translate(calc(2px * var(--random-x4)), calc(2px * var(--random-y4)));
  }
  50% {
    transform: translate(calc(-2px * var(--random-x5)), calc(-2px * var(--random-y5)));
  }
  60% {
    transform: translate(calc(2px * var(--random-x6)), calc(2px * var(--random-y6)));
  }
  70% {
    transform: translate(calc(-2px * var(--random-x7)), calc(-2px * var(--random-y7)));
  }
  80% {
    transform: translate(calc(2px * var(--random-x8)), calc(2px * var(--random-y8)));
  }
  90% {
    transform: translate(calc(-2px * var(--random-x9)), calc(-2px * var(--random-y9)));
  }
}

.random {
  animation: randomMove 5s infinite;
  --random-x1: 1; /* These values should be between -1 and 1 */
  --random-y1: 1;
  --random-x2: -1;
  --random-y2: 1;
  --random-x3: 1;
  --random-y3: -1;

  --random-x4: 1;
  --random-y4: -1;

  --random-x5: 1;
  --random-y5: -1;

  --random-x6: 1;
  --random-y6: -1;

  --random-x7: 1;
  --random-y7: -1;

  --random-x8: 1;
  --random-y: -1;
  /* ... Continue setting variables for each step ... */
}


/* Define the initial sizes of each image using CSS variables */
:root {
  --spray-can-width: 213px;
  --cow-width: 234px;
  --gq-magazine-width: 219px;
  --rabbit-width: 222px;
  --magnet-width: 255px;
  --work-boot-width: 149px;
  --sciencly-happy-width: 182px;
  --bottle-top-width: 201px;
  --aeroplane-width: 338px;
  --chalk-width: 145px;
  --image-scale: 1; /* Default scale */
}

/* Function-like behavior to set image widths */
#spray-can { width: calc(var(--spray-can-width) * var(--image-scale)); }
#cow { width: calc(var(--cow-width) * var(--image-scale)); }
#gq-magazine { width: calc(var(--gq-magazine-width) * var(--image-scale)); }
#rabbit { width: calc(var(--rabbit-width) * var(--image-scale)); }
#magnet { width: calc(var(--magnet-width) * var(--image-scale)); }
#work-boot { width: calc(var(--work-boot-width) * var(--image-scale)); }
#sciencly-happy { width: calc(var(--sciencly-happy-width) * var(--image-scale)); }
#bottle-top { width: calc(var(--bottle-top-width) * var(--image-scale)); }
#aeroplane { width: calc(var(--aeroplane-width) * var(--image-scale)); }
#chalk { width: calc(var(--chalk-width) * var(--image-scale)); }
img.random {
  height: auto; /* Maintains aspect ratio */
}

/* Media query to adjust image scale based on screen size */

@media screen and (max-width: 1366px) {
  #magnet {
    left: calc(15% - 159.5px);
    top: 57%;
  }
  #aeroplane {
    left: 73%;
    top: 77%;
  }
  #bottle-top {
    left: calc(72.66% - 125.5px);
    top: 62%;
  }
  #chalk {
    left: calc(90.33% - 90.5px);
    top: 59%;
  }
}

@media screen and (max-width: 1350px) {
  :root {
      --image-scale: 0.7; /* Scale for screens smaller than 1350px */
  }
}

@media screen and (max-width: 1180px) {
  #spray-can {
    left: calc(20% - 133px);
    top: 15%;
  }
  #cow {
    left: calc(43% - 146.5px);
    top: 6%;
  }
  #gq-magazine {
    left: calc(68% - 137px);
    top: 6%;
  }
  #rabbit {
    left: calc(94% - 139px);
    top: 10%;
  }
  #magnet {
    left: calc(19% - 159.5px);
    top: 57%;
  }
  #sciencly-happy {
    left: calc(32% - 114px);
    top: 60%;
  }
  #bottle-top {
    left: calc(76.66% - 125.5px);
    top: 62%;
  }
  #chalk {
    left: calc(90.33% - 90.5px);
    top: 59%;
  }
  #aeroplane {
    left: 76%;
    top: 77%;
  }
}

@media screen and (max-width: 1024px) {
  h1, .reset-button, .control-button {
    font-size: 7vw;;
  }
  h1, .reset-button, .control-button {
    font-size: 6vw;;
  }
  #spray-can {
    left: calc(20% - 133px);
    top: 15%;
  }
  #cow {
    left: calc(43% - 146.5px);
    top: 6%;
  }
  #chalk {
    left: calc(93.33% - 90.5px);
    top: 62%;
  }
  #bottle-top {
    left: calc(79.5% - 125.5px);
    top: 63%;
  }
  #magnet {
    left: calc(19% - 159.5px);
    top: 55%;
  }
}

@media screen and (max-width: 820px) {
  h1, .reset-button, .control-button {
    font-size: 8vw;;
  }
  #rabbit {
    left: calc(94% - 139px);
    top: 11.5%;
  }
  #gq-magazine {
    left: calc(68% - 137px);
    top: 10%;
  }
  #cow {
    left: calc(43% - 146.5px);
    top: 9%;
  }
  #magnet {
    left: calc(23% - 159.5px);
    top: 57%;
  }
  #sciencly-happy {
    left: calc(37.33% - 93px);
    top: 66%;
  }
  #bottle-top {
    left: calc(77.5% - 125.5px);
    top: 66%;
  }
  #aeroplane {
    left: 68%;
    top: 82%;
  }
}

@media screen and (max-width: 800px) {
  img.random{
    cursor: default !important;
    width: 60% !important;
    margin: 0 auto 40px !important;
    height: auto !important;
    display: block !important;
    position: relative !important;
    left:auto !important;
    top: auto !important;
  }
  .viewport {
    height: auto;
    width: 100vw;
  }
  .footer{
    position: relative;
    padding-bottom: 40px;
    bottom: auto;
  }
  .footer span{
    margin: 0 auto 8px;
    display: block;
  }
  h1, .reset-button, .control-button {
    font-size: 10vw;;
  }
  .reset-button:before, .control-button:before{
    display: none;
  }
  .flex{
    height: auto;
    padding-bottom: 36px;
  }
  .flex-item{
    padding-bottom: 0;
  }
  .logo{
    display: block;
    text-align: center;
    position: relative;
    left: auto;
    top: auto;
    padding-top: 24px;
    font-size: 7.5vw;
  }
  #chalk { 
    width: 40% !important; 
  }
}