@font-face {
    font-family: Selawik;
    src: url(./selawk.ttf);
}

@font-face {
    font-family: SelawikBold;
    src: url(./selawkb.ttf);
}

@font-face {
    font-family: SelawikLight;
    src: url(./selawkl.ttf);
}

.font-selawik {
    font-family: Selawik, 'Segoe UI', Helvetica !important;
}

.font-selawik-bold {
    font-family: SelawikBold, 'Segoe UI', Helvetica !important;
}

.font-selawik-light {
    font-family: SelawikLight, 'Segoe UI', Helvetica !important;
}

.font-glow{
    text-shadow: 0 0 10px #ffffff99, 0 0 30px #ffffff99 !important;
}

html {
    height: 100%;
    width: auto;
}

body {
    background-image: url("./assets/imgs/aero_glass.png");
    transition: all 0.3s ease;
}

#my-name {
    text-shadow: 0 0 10px #ffffff99, 0 0 30px #ffffff99;
}

#col-1 {
    box-shadow: 
        rgba(0, 0, 0, 0.3) 0px 10px 15px, 
        rgba(255, 255, 255, 0.3) 0px 2px 1px inset, 
        rgba(0, 0, 0, 0.4) 0px -2px 1px inset;
    
    /* background: linear-gradient(
        rgba(90, 95, 99, 0.7) 0%, 
        rgba(0, 0, 0, 0.68) 10%, 
        rgba(0, 0, 0, 0.68) 90%, 
        rgba(62, 65, 67, 0.7) 100%
    ); */

    background: linear-gradient(180deg,
        rgba(83, 120, 87, 0.8) 10%, 
        rgba(14, 60, 15, 0.8) 100%
    );

}

#col-2 {
    box-shadow: 
        rgba(0, 0, 0, 0.3) 0px 10px 15px, 
        rgba(255, 255, 255, 0.3) 0px 2px 1px inset, 
        rgba(0, 0, 0, 0.4) 0px -2px 1px inset;
    
    /* background: linear-gradient(
        rgba(0, 0, 0, 0.68) 50%, 
        rgba(62, 65, 67, 0.7) 100%
    ); */

    background: linear-gradient(180deg,
        rgba(83, 85, 120, 0.8) 10%, 
        rgba(14, 15, 60, 0.8) 100%
    );
}

/* ### Link ### */

a {
    display: inline-block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

#socials a {
    width: 80%; /* Set a fixed width for all buttons */
    padding: 6px; /* Ensure consistent padding */
}

#socials-mobile a {
    width: 120%; /* Set a fixed width for all buttons */
    padding: 10px 25px; /* Ensure consistent padding */
}

/* ### Bubbles ### */
.bubble {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #d0f0ff66, #a0e0ff66);
  box-shadow: inset -10px -10px 20px rgba(255, 255, 255, 0.6),
              inset 5px 5px 15px rgba(0, 0, 0, 0.2),
              0 10px 20px rgba(0, 0, 0, 0.3);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* border: 2px solid rgba(255, 255, 255, 0.4); */
}

/* Add reflection overlay */
.bubble::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.7), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.bubble img {
  max-width: 70%;
  max-height: 70%;
  z-index: 1;
  opacity: 0.65;
}