* {
    margin: 0;
}

body {
    background-color: #b86262;
    width: 100vw;
    height: 100%;
}



/* ----- ICONS ----- */
.icons {
    position: absolute;  /* Takes it out of flow */
    top: 0; left: 0;     /* Position over page */
    width: 100%; height: 100%;
    z-index: 10;
    pointer-events: none;
}

.icon-absolute {
    position: absolute;
    z-index: 5;
}

/* Same positioning as Option 1 */
.icon-absolute:nth-child(1) { top: 10%; left: 7%; } /* Heart */
.icon-absolute:nth-child(2) { top: 12%; right: 27%; } /* Smile */
.icon-absolute:nth-child(3) { top: 28%; right: 30%; transform: rotate(10deg);} /* Comment */
.icon-absolute:nth-child(4) { top: 35%; left: 13%; transform: rotate(-10deg);} /* Camera */
.icon-absolute:nth-child(5) { top: 39%; right: 15%; } /* Star */
.icon-absolute:nth-child(6) { top: 10%; right: 15%; transform: rotate(-4deg);} /* Lightbulb */
/* etc... */



/* ----- IMAGES SECTION ----- */
.top-images {
    position: relative;
    height: 200px;  /* Adjust height as needed */
    margin: 5vh auto .5rem;
    max-width: 400px;
}

.top-image {
    position: absolute;
    width: 160px;   /* Size each image */
    height: auto;
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
/*
.image-section {
    width: 35vw;
    border-radius: 10px;
}
    */

.top-image__left {
    left: 0;
    transform: rotate(-10deg);  /* Angle LEFT */
    z-index: 1;
}

.top-image__center {
    left: 50%;
    transform: translateX(-50%);  /* Perfect center */
    z-index: 3;  /* TOP LAYER! */
}

.top-image__right {
    right: 0;
    transform: rotate(10deg);  /* Angle RIGHT */
    z-index: 1;
}


/* ----- ADVERTISEMENT SECTION----- */
.advertisement {
    text-align: center;
    color: #ffffff;
    font-size: 1.25rem;
    margin-top: 4rem;
    font-family: 'Great Vibes', cursive;
    font-weight: bold;
    text-shadow: 0 0 10px currentColor;
    border: 2px solid transparent;
}



/* ----- LOGIN SECTION----- */
.login-section {
    margin: 0 auto;
    padding: 2rem;
}

.login-section__title {
    text-align: center;
    font-size: 3.5rem;
    margin-bottom: 2rem;
    color: #ffffff;
    font-family: 'Great Vibes', cursive;
    font-weight: 700;
    /*
    text-shadow: 0 0 10px currentColor;
    border: 2px solid transparent;*/
}

.login-section__detail {
    text-align: center;
    margin-top: 1rem;
    color: #ffffff;
}

.login-section__signup {
    color: #007bff;
    text-decoration: none;
    margin-left: 0.25rem;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group {
    margin-bottom: .1rem;
    background-color: #1a1a1a;
    border: 3px solid transparent;  /* ← THICK BORDER */
    border-image: linear-gradient(45deg, #ff6a00, #fffc41) 1;  /* Starting color */
    animation: rainbow 40s ease-in-out infinite;  /* ← CHANGES EVERY 3s! */
}

.form-group input {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    background: transparent;
    box-sizing: border-box;
}

.form-group input:focus {
    outline: none;
    border-color: #007bff;
    background: #f8f9fa;
}

.submit-btn {
    width: 100%;
    padding: 0.75rem;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    margin-top: 0.5rem;

    /* ← RAINBOW PULSE MAGIC! */
    animation: pulse 2s ease-in-out infinite;
    transform-origin: center;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }  /* GROWS 5%! */
}

.submit-btn:hover {
    background: #0056b3;
}

.error-message {
    color: #dc3545;
    background: #f8d7da;
    padding: 0.75rem;
    border-radius: 0.25rem;
    margin-bottom: 1rem;
}

/* RAINBOW ANIMATED BORDER */
@keyframes rainbow {
    0%   { border-image: linear-gradient(45deg, #ff6a00, #ff8c00) 1; }     /* Warm Orange */
    6%   { border-image: linear-gradient(45deg, #ff8c00, #ffb347) 1; }     /* Soft Orange */
    12%  { border-image: linear-gradient(45deg, #ffb347, #fffc41) 1; }     /* Golden */
    18%  { border-image: linear-gradient(45deg, #fffc41, #f0ff8c) 1; }     /* Pale Yellow */
    25%  { border-image: linear-gradient(45deg, #f0ff8c, #d4f4dd) 1; }     /* Light Yellow */
    31%  { border-image: linear-gradient(45deg, #d4f4dd, #b8f2d0) 1; }     /* Mint */
    37%  { border-image: linear-gradient(45deg, #b8f2d0, #63E6BE) 1; }     /* Soft Teal */
    43%  { border-image: linear-gradient(45deg, #63E6BE, #8ae6d1) 1; }     /* Teal Glow */
    50%  { border-image: linear-gradient(45deg, #8ae6d1, #B197FC) 1; }     /* Teal-Purple */
    56%  { border-image: linear-gradient(45deg, #B197FC, #a68eff) 1; }     /* Soft Purple */
    62%  { border-image: linear-gradient(45deg, #a68eff, #7a5cff) 1; }     /* Medium Purple */
    68%  { border-image: linear-gradient(45deg, #7a5cff, #5a4de8) 1; }     /* Deep Purple */
    75%  { border-image: linear-gradient(45deg, #5a4de8, #0433ff) 1; }     /* Purple-Blue */
    81%  { border-image: linear-gradient(45deg, #0433ff, #3366ff) 1; }     /* Soft Blue */
    87%  { border-image: linear-gradient(45deg, #3366ff, #6699ff) 1; }     /* Sky Blue */
    93%  { border-image: linear-gradient(45deg, #6699ff, #ff6a00) 1; }     /* Blue-Orange */
    100% { border-image: linear-gradient(45deg, #ff6a00, #ff8c00) 1; }     /* → Warm Orange */
}
/*
@keyframes rainbow {
    0%   { border-image: linear-gradient(45deg, #ff6a00, #ff8c00) 1; }     
    4%   { border-image: linear-gradient(45deg, #ff8c00, #ff9a2e) 1; }    
    8%   { border-image: linear-gradient(45deg, #ff9a2e, #ffb347) 1; }    
    12%  { border-image: linear-gradient(45deg, #ffb347, #ffbf66) 1; }    
    16%  { border-image: linear-gradient(45deg, #ffbf66, #fffc41) 1; }     
    20%  { border-image: linear-gradient(45deg, #fffc41, #f7ff5e) 1; }     
    25%  { border-image: linear-gradient(45deg, #f7ff5e, #f0ff8c) 1; }    
    29%  { border-image: linear-gradient(45deg, #f0ff8c, #e6ffb3) 1; }     
    33%  { border-image: linear-gradient(45deg, #e6ffb3, #d4f4dd) 1; }     
    37%  { border-image: linear-gradient(45deg, #d4f4dd, #c8f0ca) 1; }     
    41%  { border-image: linear-gradient(45deg, #c8f0ca, #b8f2d0) 1; }     
    45%  { border-image: linear-gradient(45deg, #b8f2d0, #a8f4d6) 1; }     
    50%  { border-image: linear-gradient(45deg, #a8f4d6, #63E6BE) 1; }     
    54%  { border-image: linear-gradient(45deg, #63E6BE, #7be8c9) 1; }     
    58%  { border-image: linear-gradient(45deg, #7be8c9, #8ae6d1) 1; }    
    62%  { border-image: linear-gradient(45deg, #8ae6d1, #B197FC) 1; }     
    66%  { border-image: linear-gradient(45deg, #B197FC, #b8a6ff) 1; }    
    70%  { border-image: linear-gradient(45deg, #b8a6ff, #a68eff) 1; }   
    75%  { border-image: linear-gradient(45deg, #a68eff, #7a5cff) 1; }   
    79%  { border-image: linear-gradient(45deg, #7a5cff, #6a4cee) 1; }     
    83%  { border-image: linear-gradient(45deg, #6a4cee, #5a4de8) 1; }    
    87%  { border-image: linear-gradient(45deg, #5a4de8, #0433ff) 1; }    
    91%  { border-image: linear-gradient(45deg, #0433ff, #1a5fff) 1; }     
    95%  { border-image: linear-gradient(45deg, #1a5fff, #3366ff) 1; }     
    100% { border-image: linear-gradient(45deg, #3366ff, #ff6a00) 1; }     
}
*/

/* ----- DESKTOP LAYOUT (768px+) ----- */
@media (min-width: 768px) {
    body {
        display: grid;
        grid-template-columns: 1fr 1fr;  /* 2/3 LEFT | 1/3 RIGHT */
        gap: 2rem;
        padding: 2rem;
        min-height: 100vh;
    }
    
    .top-images {
        margin: 0;
        width: 500px;       /* ← FIXED WIDTH! */
        height: 300px;
        max-width: none;
    }
    
    .advertisement {
        grid-column: 1;
        grid-row: 2;
        margin-top: 1rem;    /* ← FIXED 1rem BELOW images */
        margin-bottom: 0;    /* ← NO extra space below */
        font-size: 1.5rem;
        width: 500px;        /* ← SAME WIDTH as images! */
    }
    
    .login-section {
        grid-column: 2;
        grid-row: 1 / 3;
        width: 350px;        /* ← FIXED WIDTH! */
        margin: 0 auto;      /* ← Centers in right column */
        padding: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .top-images {
        margin: 0;
        max-width: none;
        height: 300px;
    }
    
    .top-image {
        width: 180px;
    }
    
    .advertisement {
        margin: 1rem 0;
        font-size: 1.5rem;
    }
    
    .login-section__title {
        font-size: 4.5rem;
    }
}