@font-face {
  font-family: 'SNPro';
  src: url(../assets/SNPro-VariableFont_wght.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --baseopacity: .3;
}

body{
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    overflow-y: hidden;
}

.background-elements {
    /*content: '';*/
    position: relative;
    z-index: 1;
    /*transform: translate(var(--bg-x, 0px), var(--bg-y, 0px));*/
    top: 0%;
    left: 0%;
}

h1{
    text-align: center;
    color: #1A1A1A;
    perspective: 1000px;
    font-family: "SNPro";
    z-index: 3;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(-3deg) translateZ(-80px) scaleX(0.95);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-15px) rotate(3deg) translateZ(80px) scaleX(1.05);
        opacity: 1;
    }
}

.float-char {
    display: inline-block;
    animation: float 3s ease-in-out infinite;
}

video{
    margin-top: 20px;
    pointer-events: auto
}

.video-frame-container {
    position: fixed;
    top: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    pointer-events: auto; /* <-- Change 'none' to 'auto' */
    z-index: 2;
}

.video {
    position: relative;
    z-index: 2;
    transform: rotate(1deg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transition: transform 0.06s ease-out;
    cursor: pointer;
}

.video:hover {
    transform: rotate(1deg) scale(1.08);

}

/* .cool-buttons {
    position: absolute;
    z-index: 0;
    display: inline-block;
    padding: 0;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;

}

.aboutme-button {

    top: -80%;
    left: -30%;

}

.aboutme-button img {
    mix-blend-mode: multiply;
    opacity:var(--baseopacity);
    width: 1100px;
    height: auto;
    --rotation: -20deg;
    transform: rotate(var(--rotation));

}

.works-button {

    top: -15%;
    left: 70%;

}

.works-button img {
    mix-blend-mode: multiply;
    opacity:var(--baseopacity);
    width: 900px;
    height: auto;
    --rotation: 27deg;
    transform: rotate(var(--rotation));
}

.reel-button {

    top: 0%;
    left: 15%;

}

.reel-button img {
    mix-blend-mode: multiply;
    opacity:var(--baseopacity);
    width: 450px;
    height: auto;
    --rotation: 4deg;
    transform: rotate(var(--rotation));
}

.blog-button {

    top: 3%;
    left: -12%;

}

.blog-button img {
    mix-blend-mode: multiply;
    opacity:var(--baseopacity);
    width: 650px;
    height: auto;
    --rotation: 34deg;
    transform: rotate(var(--rotation));
}

.cool-buttons:hover img {
    transform: rotate(calc(var(--rotation) + 2deg)) scale(1.08);
    opacity: 1;
} */

.no-select {

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

}