/* 
 * Main CSS Stylesheet for Fawaz's Portfolio Website
 * Updated to overlay captions over image cards with adjustable font sizes,
 * and to fix issues with card sizing on small screens.
 */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anta&family=Kode+Mono:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400..700&display=swap');

/* Reset default margins and paddings for all elements */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Basic HTML and Body Styles */
html, body {
    height: 100%;
    margin: 0;
}

body {
    position: relative; /* For pseudo-element positioning */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    min-height: 100vh;
    padding: 1.25em; /* 20px / 16px */
    opacity: 0; /* Initially transparent for transition effect */
    transition: opacity 0.5s ease-in-out;
    overflow: auto; /* Allows scrolling */
}

/* Background Gradient Overlay */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.7) 80%);
    z-index: -1; /* Ensures gradient is behind content */
}

/* Background Image with Subtle Animation */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../assets/background.jpg') repeat;
    background-size: 10% 10%;
    background-attachment: fixed; /* Keeps background fixed during scroll */
    opacity: 0.2; /* Transparency for soft background effect */
    animation: moveBackground 60s linear infinite; /* Subtle, long animation for floating effect */
    z-index: -2; /* Ensures background image is behind gradient */
}

/* Keyframes for Background Animation */
@keyframes moveBackground {
    0% { background-position: 0 0; }
    100% { background-position: 62.5em 0; } /* 1000px / 16px */
}

/* Typography Styles */
h1, h2, h3 {
    text-align: center;
    color: rgba(0, 0, 0, 0.8);
    font-family: "Anta", sans-serif;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

h1 {
    font-size: 3rem;
    margin-top: 2rem;
}

h2, h3 {
    font-size: 2rem;
}

/* Main Menu Styles */
.main-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    list-style-type: none;
    margin: 0;
    padding-top: 1.875em; /* 30px / 16px */
}

.main-menu li {
    position: relative;
    margin-left: 1.25em; /* 20px / 16px */
}

.main-menu li::before {
    content: ""; /* Necessary for the pseudo-element to be generated */
    position: absolute;
    left: -2.5em; /* -40px / 16px */
    top: 50%;
    transform: translateY(-50%) rotate(-90deg); /* Centers the triangle vertically and rotates it */
    border-left: 0.9375em solid transparent; /* 15px / 16px */
    border-right: 0.9375em solid transparent; /* 15px / 16px */
    border-top: 0.9375em solid red; /* The color and size of the triangle */
    opacity: 0; /* Start invisible */
    transition: opacity 0.3s ease; /* Smooth transition for the hover effect */
}

.main-menu li:hover::before {
    opacity: 1; /* Show the triangle on hover */
}

.main-menu li a {
    font-size: 2.5rem;
    text-decoration: none;
    color: rgba(0, 0, 0, 1.0);
    font-weight: bold;
    font-family: "Anta", sans-serif;
    display: inline-block;
}

/* Content Area Styles */
.content {
    text-align: center;
    flex: 1; /* Fill the remaining space */
    width: 100%; /* Ensure content spans full width */
    max-width: 75em; /* 1200px / 16px */
    padding: 1.25em; /* Added padding for content */
    font-family: "Roboto", sans-serif;
    font-size: 1.25rem; /* 20px / 16px */
}

/* Footer Styles */
footer {
    border-top: 0.125em solid #ccc; /* 2px / 16px */
    padding: 1.25em 0; /* 20px / 16px */
    text-align: center;
    width: 100%; /* Ensure it spans the full width */
}

footer .footer-menu {
    display: flex;
    justify-content: space-around; /* Evenly space items without specifying a gap */
    list-style-type: none;
    padding: 0;
    margin: 0;
}

footer .footer-menu li a {
    text-decoration: none;
    font-family: "Anta", sans-serif;
    color: #000;
    font-weight: bold;
}

/* Image Styles */
img {
    max-height: 31.25em; /* 500px / 16px */
    max-width: 31.25em; /* 500px / 16px */
    height: auto;
    width: auto;
    margin: 1.25em 0; /* Added margin to separate images from text */
}

/* Small Title Styles */
.small-title {
    position: fixed; /* Keep it fixed at the top left */
    top: 0.625em; /* 10px / 16px */
    left: 0.625em; /* 10px / 16px */
    font-size: 1.125rem; /* 18px / 16px */
    font-family: "Anta", sans-serif;
    color: rgba(0, 0, 0, 0.8);
    z-index: 1000; /* Ensure it is on top of other elements */
    background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
    padding: 0.3125em 0.625em; /* 5px / 16px and 10px / 16px */
    border-radius: 0.3125em; /* 5px / 16px */
    box-shadow: 0px 0px 0.3125em rgba(0, 0, 0, 0.3); /* 5px / 16px */
}

.small-title a {
    text-decoration: none;
    color: inherit;
}

/* Paragraph Styles */
p {
    font-size: 1.2rem;  /* Base font size */
    line-height: 1.6;   /* Improve readability */
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Gallery and Card Container Styles */
.card-column, .all-photos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Card Styles */
.card {
    position: relative; /* For positioning caption over image */
    margin: 1.25em; /* 20px / 16px */
    border-radius: 0.9375em; /* 15px / 16px */
    overflow: hidden;
    /* Remove background to prevent white borders */
    background: none;
    /* Remove any borders */
    border: none;
    box-shadow: 0px 0px 0.625em rgba(0,0,0,0.2); /* 10px / 16px */
    cursor: pointer;
    /* Animation properties are set inline */
    will-change: transform;
    flex: 1 1 calc(33.333% - 2.5em); /* Adjusted for consistent sizing, margin accounted */
    max-width: 25em; /* 400px / 16px */
    min-width: 15.625em; /* 250px / 16px */
    aspect-ratio: 1 / 1; /* Maintain a square aspect ratio */
}

/* Remove default margins and paddings from links */
.card a {
    text-decoration: none;
    color: inherit;
    display: block;
    margin: 0;
    padding: 0;
}

/* Image within the card */
.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
    display: block;
    /* Position image absolutely to fill the card */
    position: absolute;
    top: 0;
    left: 0;
}

/* Ensure the card is a positioned container for absolute positioning */
.card {
    position: relative;
}

/* Card Hover Effect */
.card:hover img {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* Overlay Caption Styles */
.card .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Caption height can be adjusted as needed */
    height: 20%; /* Caption takes up 20% of the card's height */
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0.625em; /* 10px / 16px */
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
}

/* Caption Text Styles */
.card .caption-text {
    font-family: "Roboto", sans-serif;
    font-size: 1rem; /* Default font size */
    line-height: 1.2;
    margin: 0;
    padding: 0;
    word-break: break-word;
}

/* Main Options Styles on Index Page */
.main-options {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 2.5em; /* 40px / 16px */
    margin-top: 2.5em; /* 40px / 16px */
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
}

/* Option Card Styles */
.option-card {
    flex: 1 1 12.5em; /* 200px / 16px */
    max-width: 18.75em; /* 300px / 16px */
    height: 7.5em; /* 120px / 16px */
    background: rgba(255, 255, 255, 0.8);
    border-radius: 0.9375em; /* 15px / 16px */
    box-shadow: 0px 0.25em 0.375em rgba(0,0,0,0.1); /* 4px and 6px / 16px */
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.option-card:hover {
    transform: translateY(-0.3125em); /* -5px / 16px */
    box-shadow: 0px 0.375em 0.5em rgba(0,0,0,0.15); /* 6px and 8px / 16px */
}

.option-card a {
    text-decoration: none;
    color: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.option-card h2 {
    font-family: "Anta", sans-serif;
    font-size: 2rem;
    text-align: center;
    margin: 0;
    color: rgba(0, 0, 0, 0.85);
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    background-color: rgba(0,0,0,0.8);
}

.modal-content {
    margin: auto;
    display: block;
    width: auto;
    height: auto;
    max-width: 90vw;
    max-height: 90vh;
}

.modal .caption {
    text-align: center;
    color: white;
    font-size: 1.2em;
    margin-top: 0.625em; /* 10px / 16px */
}

/* Close Button Styles */
.close {
    position: absolute;
    top: 1.25em; /* 20px / 16px */
    right: 1.875em; /* 30px / 16px */
    color: white;
    font-size: 2.5rem; /* 40px / 16px */
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #bbb;
}

/* Media Queries for Responsive Design */

/* Medium Devices */
@media (max-width: 56.25em) { /* 900px / 16px */
    .card {
        flex: 1 1 calc(50% - 2.5em); /* Two cards per row */
        max-width: calc(50% - 2.5em);
    }
}

/* Small Devices */
@media (max-width: 37.5em) { /* 600px / 16px */
    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2rem;
    }

    p {
        font-size: 1rem;
        line-height: 1.4;
        text-align: center;
    }

    .main-menu li a {
        font-size: 40px;
    }

    .content {
        padding: 0.625em; /* 10px / 16px */
    }

    /* Updated selector to target images within .content only */
    .content .content-image,
    .content img:not(.card-image) {
        height: auto;
        max-width: 70%;
        display: block;
        width: 100%;
        margin: 0.5rem auto;
    }

    .card {
        flex: 1 1 calc(100% - 2.5em); /* One card per row */
        max-width: calc(100% - 2.5em);
        min-width: 15em; /* Set a minimum width */
    }

    /* Adjust caption height on small screens */
    .card .caption {
        height: 25%; /* Increase caption height for readability */
    }

    footer {
        flex-direction: column;
    }

    footer .footer-menu {
        flex-direction: column;
    }

    footer .footer-menu li {
        margin-bottom: 0.625em; /* 10px / 16px */
    }
}

/* Extra Small Devices */
@media (max-width: 30em) { /* 480px / 16px */
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    p {
        font-size: 0.9rem;
        line-height: 1.4;
        text-align: center;
    }

    .main-menu li a {
        font-size: 30px;
    }

    /* Updated selector to target images within .content only */
    .content .content-image,
    .content img:not(.card-image) {
        height: auto;
        max-width: 70%;
        display: block;
        width: 100%;
        margin: 0.5rem auto;
    }

    .small-title {
        font-size: 0.875rem; /* 14px / 16px */
    }

    .card {
        flex: 1 1 calc(100% - 2.5em);
        max-width: calc(100% - 2.5em);
        min-width: 12.5em; /* Approximately 200px */
    }

    /* Further adjust caption height */
    .card .caption {
        height: 30%; /* Further increase caption height */
    }
}

@keyframes float1 {
    0.0% { transform: translate(0.00px, 19.26px) rotate(0.00deg); }
    5.0% { transform: translate(5.95px, 18.31px) rotate(1.25deg); }
    10.0% { transform: translate(11.32px, 15.58px) rotate(2.02deg); }
    15.0% { transform: translate(15.58px, 11.32px) rotate(2.02deg); }
    20.0% { transform: translate(18.31px, 5.95px) rotate(1.25deg); }
    25.0% { transform: translate(19.26px, 0.00px) rotate(0.00deg); }
    30.0% { transform: translate(18.31px, -5.95px) rotate(-1.25deg); }
    35.0% { transform: translate(15.58px, -11.32px) rotate(-2.02deg); }
    40.0% { transform: translate(11.32px, -15.58px) rotate(-2.02deg); }
    45.0% { transform: translate(5.95px, -18.31px) rotate(-1.25deg); }
    50.0% { transform: translate(0.00px, -19.26px) rotate(-0.00deg); }
    55.0% { transform: translate(-5.95px, -18.31px) rotate(1.25deg); }
    60.0% { transform: translate(-11.32px, -15.58px) rotate(2.02deg); }
    65.0% { transform: translate(-15.58px, -11.32px) rotate(2.02deg); }
    70.0% { transform: translate(-18.31px, -5.95px) rotate(1.25deg); }
    75.0% { transform: translate(-19.26px, -0.00px) rotate(0.00deg); }
    80.0% { transform: translate(-18.31px, 5.95px) rotate(-1.25deg); }
    85.0% { transform: translate(-15.58px, 11.32px) rotate(-2.02deg); }
    90.0% { transform: translate(-11.32px, 15.58px) rotate(-2.02deg); }
    95.0% { transform: translate(-5.95px, 18.31px) rotate(-1.25deg); }
    100.0% { transform: translate(-0.00px, 19.26px) rotate(-0.00deg); }
}
@keyframes float2 {
    0.0% { transform: translate(0.00px, 14.24px) rotate(0.00deg); }
    5.0% { transform: translate(4.40px, 13.55px) rotate(1.63deg); }
    10.0% { transform: translate(8.37px, 11.52px) rotate(2.63deg); }
    15.0% { transform: translate(11.52px, 8.37px) rotate(2.63deg); }
    20.0% { transform: translate(13.55px, 4.40px) rotate(1.63deg); }
    25.0% { transform: translate(14.24px, 0.00px) rotate(0.00deg); }
    30.0% { transform: translate(13.55px, -4.40px) rotate(-1.63deg); }
    35.0% { transform: translate(11.52px, -8.37px) rotate(-2.63deg); }
    40.0% { transform: translate(8.37px, -11.52px) rotate(-2.63deg); }
    45.0% { transform: translate(4.40px, -13.55px) rotate(-1.63deg); }
    50.0% { transform: translate(0.00px, -14.24px) rotate(-0.00deg); }
    55.0% { transform: translate(-4.40px, -13.55px) rotate(1.63deg); }
    60.0% { transform: translate(-8.37px, -11.52px) rotate(2.63deg); }
    65.0% { transform: translate(-11.52px, -8.37px) rotate(2.63deg); }
    70.0% { transform: translate(-13.55px, -4.40px) rotate(1.63deg); }
    75.0% { transform: translate(-14.24px, -0.00px) rotate(0.00deg); }
    80.0% { transform: translate(-13.55px, 4.40px) rotate(-1.63deg); }
    85.0% { transform: translate(-11.52px, 8.37px) rotate(-2.63deg); }
    90.0% { transform: translate(-8.37px, 11.52px) rotate(-2.63deg); }
    95.0% { transform: translate(-4.40px, 13.55px) rotate(-1.63deg); }
    100.0% { transform: translate(-0.00px, 14.24px) rotate(-0.00deg); }
}
@keyframes float3 {
    0.0% { transform: translate(0.00px, 12.12px) rotate(0.00deg); }
    5.0% { transform: translate(3.74px, 11.52px) rotate(1.71deg); }
    10.0% { transform: translate(7.12px, 9.80px) rotate(2.77deg); }
    15.0% { transform: translate(9.80px, 7.12px) rotate(2.77deg); }
    20.0% { transform: translate(11.52px, 3.74px) rotate(1.71deg); }
    25.0% { transform: translate(12.12px, 0.00px) rotate(0.00deg); }
    30.0% { transform: translate(11.52px, -3.74px) rotate(-1.71deg); }
    35.0% { transform: translate(9.80px, -7.12px) rotate(-2.77deg); }
    40.0% { transform: translate(7.12px, -9.80px) rotate(-2.77deg); }
    45.0% { transform: translate(3.74px, -11.52px) rotate(-1.71deg); }
    50.0% { transform: translate(0.00px, -12.12px) rotate(-0.00deg); }
    55.0% { transform: translate(-3.74px, -11.52px) rotate(1.71deg); }
    60.0% { transform: translate(-7.12px, -9.80px) rotate(2.77deg); }
    65.0% { transform: translate(-9.80px, -7.12px) rotate(2.77deg); }
    70.0% { transform: translate(-11.52px, -3.74px) rotate(1.71deg); }
    75.0% { transform: translate(-12.12px, -0.00px) rotate(0.00deg); }
    80.0% { transform: translate(-11.52px, 3.74px) rotate(-1.71deg); }
    85.0% { transform: translate(-9.80px, 7.12px) rotate(-2.77deg); }
    90.0% { transform: translate(-7.12px, 9.80px) rotate(-2.77deg); }
    95.0% { transform: translate(-3.74px, 11.52px) rotate(-1.71deg); }
    100.0% { transform: translate(-0.00px, 12.12px) rotate(-0.00deg); }
}
@keyframes float4 {
    0.0% { transform: translate(0.00px, 16.31px) rotate(0.00deg); }
    5.0% { transform: translate(5.04px, 15.51px) rotate(1.71deg); }
    10.0% { transform: translate(9.59px, 13.19px) rotate(2.76deg); }
    15.0% { transform: translate(13.19px, 9.59px) rotate(2.76deg); }
    20.0% { transform: translate(15.51px, 5.04px) rotate(1.71deg); }
    25.0% { transform: translate(16.31px, 0.00px) rotate(0.00deg); }
    30.0% { transform: translate(15.51px, -5.04px) rotate(-1.71deg); }
    35.0% { transform: translate(13.19px, -9.59px) rotate(-2.76deg); }
    40.0% { transform: translate(9.59px, -13.19px) rotate(-2.76deg); }
    45.0% { transform: translate(5.04px, -15.51px) rotate(-1.71deg); }
    50.0% { transform: translate(0.00px, -16.31px) rotate(-0.00deg); }
    55.0% { transform: translate(-5.04px, -15.51px) rotate(1.71deg); }
    60.0% { transform: translate(-9.59px, -13.19px) rotate(2.76deg); }
    65.0% { transform: translate(-13.19px, -9.59px) rotate(2.76deg); }
    70.0% { transform: translate(-15.51px, -5.04px) rotate(1.71deg); }
    75.0% { transform: translate(-16.31px, -0.00px) rotate(0.00deg); }
    80.0% { transform: translate(-15.51px, 5.04px) rotate(-1.71deg); }
    85.0% { transform: translate(-13.19px, 9.59px) rotate(-2.76deg); }
    90.0% { transform: translate(-9.59px, 13.19px) rotate(-2.76deg); }
    95.0% { transform: translate(-5.04px, 15.51px) rotate(-1.71deg); }
    100.0% { transform: translate(-0.00px, 16.31px) rotate(-0.00deg); }
}
@keyframes float5 {
    0.0% { transform: translate(0.00px, 14.37px) rotate(0.00deg); }
    5.0% { transform: translate(4.44px, 13.67px) rotate(0.65deg); }
    10.0% { transform: translate(8.45px, 11.63px) rotate(1.05deg); }
    15.0% { transform: translate(11.63px, 8.45px) rotate(1.05deg); }
    20.0% { transform: translate(13.67px, 4.44px) rotate(0.65deg); }
    25.0% { transform: translate(14.37px, 0.00px) rotate(0.00deg); }
    30.0% { transform: translate(13.67px, -4.44px) rotate(-0.65deg); }
    35.0% { transform: translate(11.63px, -8.45px) rotate(-1.05deg); }
    40.0% { transform: translate(8.45px, -11.63px) rotate(-1.05deg); }
    45.0% { transform: translate(4.44px, -13.67px) rotate(-0.65deg); }
    50.0% { transform: translate(0.00px, -14.37px) rotate(-0.00deg); }
    55.0% { transform: translate(-4.44px, -13.67px) rotate(0.65deg); }
    60.0% { transform: translate(-8.45px, -11.63px) rotate(1.05deg); }
    65.0% { transform: translate(-11.63px, -8.45px) rotate(1.05deg); }
    70.0% { transform: translate(-13.67px, -4.44px) rotate(0.65deg); }
    75.0% { transform: translate(-14.37px, -0.00px) rotate(0.00deg); }
    80.0% { transform: translate(-13.67px, 4.44px) rotate(-0.65deg); }
    85.0% { transform: translate(-11.63px, 8.45px) rotate(-1.05deg); }
    90.0% { transform: translate(-8.45px, 11.63px) rotate(-1.05deg); }
    95.0% { transform: translate(-4.44px, 13.67px) rotate(-0.65deg); }
    100.0% { transform: translate(-0.00px, 14.37px) rotate(-0.00deg); }
}
@keyframes float6 {
    0.0% { transform: translate(0.00px, 18.91px) rotate(0.00deg); }
    5.0% { transform: translate(5.84px, 17.98px) rotate(0.73deg); }
    10.0% { transform: translate(11.12px, 15.30px) rotate(1.19deg); }
    15.0% { transform: translate(15.30px, 11.12px) rotate(1.19deg); }
    20.0% { transform: translate(17.98px, 5.84px) rotate(0.73deg); }
    25.0% { transform: translate(18.91px, 0.00px) rotate(0.00deg); }
    30.0% { transform: translate(17.98px, -5.84px) rotate(-0.73deg); }
    35.0% { transform: translate(15.30px, -11.12px) rotate(-1.19deg); }
    40.0% { transform: translate(11.12px, -15.30px) rotate(-1.19deg); }
    45.0% { transform: translate(5.84px, -17.98px) rotate(-0.73deg); }
    50.0% { transform: translate(0.00px, -18.91px) rotate(-0.00deg); }
    55.0% { transform: translate(-5.84px, -17.98px) rotate(0.73deg); }
    60.0% { transform: translate(-11.12px, -15.30px) rotate(1.19deg); }
    65.0% { transform: translate(-15.30px, -11.12px) rotate(1.19deg); }
    70.0% { transform: translate(-17.98px, -5.84px) rotate(0.73deg); }
    75.0% { transform: translate(-18.91px, -0.00px) rotate(0.00deg); }
    80.0% { transform: translate(-17.98px, 5.84px) rotate(-0.73deg); }
    85.0% { transform: translate(-15.30px, 11.12px) rotate(-1.19deg); }
    90.0% { transform: translate(-11.12px, 15.30px) rotate(-1.19deg); }
    95.0% { transform: translate(-5.84px, 17.98px) rotate(-0.73deg); }
    100.0% { transform: translate(-0.00px, 18.91px) rotate(-0.00deg); }
}
@keyframes float7 {
    0.0% { transform: translate(0.00px, 19.75px) rotate(0.00deg); }
    5.0% { transform: translate(6.10px, 18.78px) rotate(1.67deg); }
    10.0% { transform: translate(11.61px, 15.98px) rotate(2.71deg); }
    15.0% { transform: translate(15.98px, 11.61px) rotate(2.71deg); }
    20.0% { transform: translate(18.78px, 6.10px) rotate(1.67deg); }
    25.0% { transform: translate(19.75px, 0.00px) rotate(0.00deg); }
    30.0% { transform: translate(18.78px, -6.10px) rotate(-1.67deg); }
    35.0% { transform: translate(15.98px, -11.61px) rotate(-2.71deg); }
    40.0% { transform: translate(11.61px, -15.98px) rotate(-2.71deg); }
    45.0% { transform: translate(6.10px, -18.78px) rotate(-1.67deg); }
    50.0% { transform: translate(0.00px, -19.75px) rotate(-0.00deg); }
    55.0% { transform: translate(-6.10px, -18.78px) rotate(1.67deg); }
    60.0% { transform: translate(-11.61px, -15.98px) rotate(2.71deg); }
    65.0% { transform: translate(-15.98px, -11.61px) rotate(2.71deg); }
    70.0% { transform: translate(-18.78px, -6.10px) rotate(1.67deg); }
    75.0% { transform: translate(-19.75px, -0.00px) rotate(0.00deg); }
    80.0% { transform: translate(-18.78px, 6.10px) rotate(-1.67deg); }
    85.0% { transform: translate(-15.98px, 11.61px) rotate(-2.71deg); }
    90.0% { transform: translate(-11.61px, 15.98px) rotate(-2.71deg); }
    95.0% { transform: translate(-6.10px, 18.78px) rotate(-1.67deg); }
    100.0% { transform: translate(-0.00px, 19.75px) rotate(-0.00deg); }
}
@keyframes float8 {
    0.0% { transform: translate(0.00px, 17.46px) rotate(0.00deg); }
    5.0% { transform: translate(5.40px, 16.60px) rotate(1.45deg); }
    10.0% { transform: translate(10.26px, 14.12px) rotate(2.34deg); }
    15.0% { transform: translate(14.12px, 10.26px) rotate(2.34deg); }
    20.0% { transform: translate(16.60px, 5.40px) rotate(1.45deg); }
    25.0% { transform: translate(17.46px, 0.00px) rotate(0.00deg); }
    30.0% { transform: translate(16.60px, -5.40px) rotate(-1.45deg); }
    35.0% { transform: translate(14.12px, -10.26px) rotate(-2.34deg); }
    40.0% { transform: translate(10.26px, -14.12px) rotate(-2.34deg); }
    45.0% { transform: translate(5.40px, -16.60px) rotate(-1.45deg); }
    50.0% { transform: translate(0.00px, -17.46px) rotate(-0.00deg); }
    55.0% { transform: translate(-5.40px, -16.60px) rotate(1.45deg); }
    60.0% { transform: translate(-10.26px, -14.12px) rotate(2.34deg); }
    65.0% { transform: translate(-14.12px, -10.26px) rotate(2.34deg); }
    70.0% { transform: translate(-16.60px, -5.40px) rotate(1.45deg); }
    75.0% { transform: translate(-17.46px, -0.00px) rotate(0.00deg); }
    80.0% { transform: translate(-16.60px, 5.40px) rotate(-1.45deg); }
    85.0% { transform: translate(-14.12px, 10.26px) rotate(-2.34deg); }
    90.0% { transform: translate(-10.26px, 14.12px) rotate(-2.34deg); }
    95.0% { transform: translate(-5.40px, 16.60px) rotate(-1.45deg); }
    100.0% { transform: translate(-0.00px, 17.46px) rotate(-0.00deg); }
}
@keyframes float9 {
    0.0% { transform: translate(0.00px, 14.60px) rotate(0.00deg); }
    5.0% { transform: translate(4.51px, 13.88px) rotate(1.20deg); }
    10.0% { transform: translate(8.58px, 11.81px) rotate(1.94deg); }
    15.0% { transform: translate(11.81px, 8.58px) rotate(1.94deg); }
    20.0% { transform: translate(13.88px, 4.51px) rotate(1.20deg); }
    25.0% { transform: translate(14.60px, 0.00px) rotate(0.00deg); }
    30.0% { transform: translate(13.88px, -4.51px) rotate(-1.20deg); }
    35.0% { transform: translate(11.81px, -8.58px) rotate(-1.94deg); }
    40.0% { transform: translate(8.58px, -11.81px) rotate(-1.94deg); }
    45.0% { transform: translate(4.51px, -13.88px) rotate(-1.20deg); }
    50.0% { transform: translate(0.00px, -14.60px) rotate(-0.00deg); }
    55.0% { transform: translate(-4.51px, -13.88px) rotate(1.20deg); }
    60.0% { transform: translate(-8.58px, -11.81px) rotate(1.94deg); }
    65.0% { transform: translate(-11.81px, -8.58px) rotate(1.94deg); }
    70.0% { transform: translate(-13.88px, -4.51px) rotate(1.20deg); }
    75.0% { transform: translate(-14.60px, -0.00px) rotate(0.00deg); }
    80.0% { transform: translate(-13.88px, 4.51px) rotate(-1.20deg); }
    85.0% { transform: translate(-11.81px, 8.58px) rotate(-1.94deg); }
    90.0% { transform: translate(-8.58px, 11.81px) rotate(-1.94deg); }
    95.0% { transform: translate(-4.51px, 13.88px) rotate(-1.20deg); }
    100.0% { transform: translate(-0.00px, 14.60px) rotate(-0.00deg); }
}
@keyframes float10 {
    0.0% { transform: translate(0.00px, 17.64px) rotate(0.00deg); }
    5.0% { transform: translate(5.45px, 16.78px) rotate(1.63deg); }
    10.0% { transform: translate(10.37px, 14.27px) rotate(2.64deg); }
    15.0% { transform: translate(14.27px, 10.37px) rotate(2.64deg); }
    20.0% { transform: translate(16.78px, 5.45px) rotate(1.63deg); }
    25.0% { transform: translate(17.64px, 0.00px) rotate(0.00deg); }
    30.0% { transform: translate(16.78px, -5.45px) rotate(-1.63deg); }
    35.0% { transform: translate(14.27px, -10.37px) rotate(-2.64deg); }
    40.0% { transform: translate(10.37px, -14.27px) rotate(-2.64deg); }
    45.0% { transform: translate(5.45px, -16.78px) rotate(-1.63deg); }
    50.0% { transform: translate(0.00px, -17.64px) rotate(-0.00deg); }
    55.0% { transform: translate(-5.45px, -16.78px) rotate(1.63deg); }
    60.0% { transform: translate(-10.37px, -14.27px) rotate(2.64deg); }
    65.0% { transform: translate(-14.27px, -10.37px) rotate(2.64deg); }
    70.0% { transform: translate(-16.78px, -5.45px) rotate(1.63deg); }
    75.0% { transform: translate(-17.64px, -0.00px) rotate(0.00deg); }
    80.0% { transform: translate(-16.78px, 5.45px) rotate(-1.63deg); }
    85.0% { transform: translate(-14.27px, 10.37px) rotate(-2.64deg); }
    90.0% { transform: translate(-10.37px, 14.27px) rotate(-2.64deg); }
    95.0% { transform: translate(-5.45px, 16.78px) rotate(-1.63deg); }
    100.0% { transform: translate(-0.00px, 17.64px) rotate(-0.00deg); }
}