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

/* Global styling */
body {
    font-family: 'Arial', sans-serif;
    display: grid;
    grid-template-areas:
        "top top top"
        "leftPanel main rightPanel"
        "leftPanel search rightPanel"
        "footer footer footer";
    grid-template-columns: 1fr 5fr 1fr;
    grid-template-rows: auto 1fr auto auto;
    gap: 0px;
    min-height: 100vh;
    padding: 0px;
    line-height: 1.6;
    background-color: transparent;
    align-items: stretch; /* Ensures all grid items fill their respective heights */
    overflow-y: auto; /* Ensures the body is scrollable */
    scroll-behavior: smooth;
    transition: scroll-behavior 0.1s, overflow-y 0.1s, transform 0.1s; /* Smooth hover effect */
}
body::-webkit-scrollbar {
    width: 0px;
    transition: all 1s linear infinite;
}

body::-webkit-scrollbar-track {
    border: 0px solid transparent;
    background: transparent;
    transition: all 1s linear infinite;
}

body::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 0px solid rgb(0, 0, 0);
    box-shadow: 0 0 1px 0px black, inset 0 0 3px 0px rgb(255, 255, 255);
    cursor: pointer; /* Set the cursor to hand/finger */
    opacity: 1; /* Initially set opacity to 1 */
    transition: opacity 0.5s ease; /* Add transition to the opacity property */    
}

body.scroll-top::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border: 0px solid rgb(0, 0, 0);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-shadow: 0 0 1px 0px black, inset 0 0 3px 0px rgb(255, 255, 255);
    transition: background-color 0.3s ease-in-out;
}

body.scroll-bottom::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border: 0px solid rgb(0, 0, 0);
    box-shadow: 0 0 1px 0px black, inset 0 0 3px 0px rgb(255, 255, 255);
    transition: background-color 0.3s ease-in-out;
}


/* Top bar styling */
.top_original {
    grid-area: top;
    background-color: #000000;
    color: #fff;
    padding: 3px;
    display: flex; /* Allows content to be side by side */
    align-items: center; /* Vertically centers the content */
    justify-content: flex-start; /* Positions content to the left */
    letter-spacing: 1px;
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For WebKit-based browsers */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older versions of Internet Explorer */    
    cursor:auto;    
    transition: all 0.1s ease;
}

/* Top bar styling */
.top {
    grid-area: top;
    background-color: #000000;
    color: #fff;
    padding: 3px;
    display: flex; /* Allows content to be side by side */
    align-items: center; /* Vertically centers the content */
    justify-content: flex-start; /* Positions content to the left */
    letter-spacing: 1px;
    position:relative; /* Make the top bar fixed */
    top: 0; /* Position at the top */
    left: 0; /* Align to the left */
    right: 0; /* Align to the right */
    width: 100%; /* Full width */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For WebKit-based browsers */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older versions of Internet Explorer */    
    cursor:auto;    
    transition: all 0.1s ease;
}


/* Middle content styling */
.middle-top {
    display: flex; /* Arrange the RZ logo and label side by side */
    align-items: center; /* Center vertically */
    margin: 0 auto; /* Center the entire block */
    align-items: center;
    justify-content: center;
    transition: all 0.1s ease;
}

/* Center label styling */
.RW {
    font-size: 30px; /* Adjust size as needed */
    font-weight: bold; /* Make the text bold */
    color: #fff;
    font-family: 'Verdana';
    letter-spacing: 3px;
    text-shadow: 0px 0px 21px rgba(255, 255, 255);
    margin: 0;
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For WebKit-based browsers */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older versions of Internet Explorer */    
}

/* RZ logo styling */
.RZ {
    flex-shrink: 0;
    display: inline-block;
    width: 73px; /* Set width */
    height: 73px; /* Set height */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 0 0px rgba(255, 255, 255); /* Add glowing effect */
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For WebKit-based browsers */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older versions of Internet Explorer */    
    transition: all 0.1s ease;
}

/* Center label styling */
.ZZ {
    font-size: 30px; /* Adjust size as needed */
    font-weight: bold; /* Make the text bold */
    color: #fff;
    font-family: 'Verdana';
    text-shadow: 0px 0px 21px rgba(255, 255, 255);
    letter-spacing: 3px;
    margin: 0;
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For WebKit-based browsers */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older versions of Internet Explorer */    
}


/* Logo styling */
.FA {
    height: 50px; /* Increase the size for more prominence */
    width: auto; /* Maintain aspect ratio */
    margin-right: 15px; /* Spacing between the logo and text */
    flex-shrink: 0; /* Prevents the logo from shrinking */
    box-shadow: 0 0 0px rgba(255, 255, 255); /* Add glowing effect */
    transition: all 0.1s ease; /* Smooth size transition */
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For WebKit-based browsers */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older versions of Internet Explorer */    
}
/* Top bar styling */



/* Submit button styling */
/* Correct image path */
.submit-button {
    background-color: white;  
    background-image: url('../elements/MPNG.png');  /* Going up one level and accessing elements */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 90%; /* This will make the image cover the entire div */
    background-position: center center; /* Center the image within the div */
    /*box-shadow: 0 0 14px 0px black, inset 0 0 3px 0px rgba(0, 0, 0); Add an inset glowing effect */
    border: none;
    border-radius: 50%; /* Makes it a circle */
    width: 73px; /* Set width */
    height: 73px; /* Set height */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /*box-shadow: 0 0 10px rgba(255, 255, 255, 0.6); /* Glowing shadow effect */
    box-shadow: 0 0 14px 7px rgb(255, 255, 255), inset 0 0 14px 0px rgb(0, 0, 0);    
    transform: scale(1.05); /* Slightly increases size on hover */
    transition: box-shadow 0.1s, transform 0.1s; /* Smooth hover effect */
    margin-left: auto; /* Pushes the button to the right */
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For WebKit-based browsers */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older versions of Internet Explorer */    
}


.submit-button.whitePuts{
    background-color: white;  
    background-image: url('../elements/MPNG.png');  /* Going up one level and accessing elements */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 90%; /* This will make the image cover the entire div */
    background-position: center center; /* Center the image within the div */
    box-shadow: 0 0 14px 7px rgb(255, 255, 255), inset 0 0 14px 0px rgb(0, 0, 0);    
    transform: scale(1.05); /* Slightly increases size on hover */
    transition: box-shadow 0.1s, transform 0.1s; /* Smooth hover effect */    
}



.submit-button.blackPuts{
    background-color: black;  
    background-image: url('../elements/MBPNG.png');  /* Going up one level and accessing elements */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90% 88%; /* This will make the image cover the entire div */
    background-position: 4px 5px; /* Center the image within the div */
    box-shadow: 0 0 7px 3px rgb(255, 255, 255), inset 0 0 7px 3px rgb(255, 255, 255);    
    transform: scale(1.05); /* Slightly increases size on hover */
    transition: box-shadow 0.1s, transform 0.1s; /* Smooth hover effect */
}



/* leftPanel styling */
.leftPanel {
    grid-area: leftPanel;
    background-color: transparent;
    padding: 15px;
    color: #444;
    border-radius: 5px;
    box-shadow: 0 0 0px rgba(0, 0, 0, 0.1);
}

/*
.main {
    grid-area: main;
    background-color: gray;
    padding-left: 3px;
    padding-top: 0px;
    color: #333;
    border-radius: 0px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
    min-height: 100%; 
    display: flex; 
    flex-direction: column;
    justify-content:stretch; 
}
*/

/* Main content styling */
.main {
    grid-area: main;
    background-color: transparent;
    background-image: none;  /* Going up one level and accessing elements */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 55% 85%; /* This will make the image cover the entire div */
    background-position: center center; /* Center the image within the div */
    padding-left: 3px;
    padding-top: 0px;
    color: #333;
    border-radius: 0px;
    /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);*/
    /*box-shadow: 0 0 3px 0px rgb(0, 0, 0), inset 0 0 0px 0px rgb(0, 0, 0);    */
    box-shadow: 0 0 14px 0px rgb(0, 0, 0, 0.10), inset 0 0 0px 0px rgb(0, 0, 0);    
    min-height: 100%; /* Ensures it takes full height */
    max-height: 500px; /* Adjust this value as needed to set the height limit */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligns content at the top */
    overflow-y: scroll; /* Adds vertical scroll when content overflows */
    overflow-x: hidden;
    scroll-behavior: smooth;
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For WebKit-based browsers */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older versions of Internet Explorer */    
    cursor: auto;
    transition: opacity 1s ease-out; /* Smooth transition for opacity */
    transition: background-image 1s ease-out, opacity 1s ease-out;
}
/* Keyframes for the fade-in effect */
@keyframes fadeInBackground {
    0% {
        opacity: 0; /* Start with no opacity */
    }
    100% {
        opacity: 1; /* End with full opacity */
    }
}

.main.fade-in-background{
    background-color: transparent;
    background-image: url('../elements/FAM_PNG.png');  /* Going up one level and accessing elements */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 55% 85%; /* This will make the image cover the entire div */
    background-position: center center; /* Center the image within the div */

    animation: fadeInBackground 3s ease-in;
}

/* Class for triggering the fade-out */
.main.fade-out-background {
    animation: fadeOutBackground 0.3s ease-out; /* Ensure the animation is applied directly to .main */
}

@keyframes fadeOutBackground {
    0% {
        opacity: 1; /* Start with full opacity */
    }
    100% {
        opacity: 0; /* End with no opacity */
    }
}
/* For WebKit-based browsers like Chrome and Safari */
.main::-webkit-scrollbar {
    width: 3px;
    transition: all 1s linear infinite;
}

.main::-webkit-scrollbar-track {
    border: 0px solid transparent;
    background: transparent;
    transition: all 1s linear infinite;
}

.main::-webkit-scrollbar-thumb {
    background-color: black;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border: 1px solid rgb(0, 0, 0);
    border-bottom-color: transparent;
    border-top-color: transparent;
    box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(255, 255, 255);
    cursor:auto; /* Set the cursor to hand/finger */
    opacity: 1; /* Initially set opacity to 1 */
    transition: opacity 0.5s ease; /* Add transition to the opacity property */    
}

.main.scroll-top::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border: 0px solid rgb(0, 0, 0);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(255, 255, 255);
    transition: background-color 0.3s ease-in-out;
}

.main.scroll-bottom::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border: 0px solid rgb(0, 0, 0);
    box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(255, 255, 255);
    transition: background-color 0.3s ease-in-out;
}
/* rightPanel section styling */
.rightPanel {
    grid-area: rightPanel;
    background-color: transparent;
    padding: 15px;
    color: #333;
    border-radius: 5px;
    box-shadow: 0 0 0px rgba(0, 0, 0, 0.1);
}

/* Footer styling */
.footer {
    grid-area: footer;
    background-color: transparent;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}



/*
.footer input {
    width: 100%;
    max-width: 71.5%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    color: rgb(255, 255, 255);
    background-color:transparent;
    border-radius: 0px;
}
*/
/*
.footer textarea {
    width: 100%;
    max-width: 71.5%;
    padding: 0px;
    font-size: 16px; 
    color: rgb(170, 0, 0);
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
    background-color: transparent;
    border: none; 
    border-radius: 0px;
    box-sizing: border-box;
    resize: none; 
    overflow-y: hidden; 
    transition: height 0.1s ease-in-out;
    position: relative; 
}
*/
.footer textarea {
    width: 100%;
    max-width: 71.5%;
    height: 100%;
    max-height: auto;
    padding: 0px;
    font-size: 20px; 
    color: rgb(170, 0, 0);
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
    background-color: transparent;
    border: none; /* Remove all borders */
    border-bottom: 0px solid #000000; /* Add a black bottom border */
    border-top: 0px groove rgb(170, 0, 0);
    border-radius: 0px; /* Remove border radius */
    box-sizing: border-box;
    resize: none; /* Disable manual resizing */
    overflow-y: hidden; /* Adds vertical scroll when content overflows */
    overflow-x: hidden;
    scroll-behavior: smooth;
    transition: height 0.1s ease-in-out, background-color 0.3s ease, color 0.3s ease;
    user-select: text; /* Ensure text is selectable */
    caret-color: rgb(0, 0, 0); /* Change the caret color */
}


/* The class that triggers the glowing border animation */
.footer textarea.glowingBorder {
    animation: borderGlow 0.3s ease-in-out;
}

  /* Define the glowing effect animation */
@keyframes borderGlow {
    0% {
        box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(255, 255, 255);
    }
    50% {
        box-shadow: 0 0 0px 0px black, inset 0 0 7px 0px rgb(0, 0, 0);
    }
    100% {
        box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(130, 0, 0);
    }
}

/* Pseudo-element for text selection */
.footer textarea::selection {
    background-color: rgb(0, 0, 0); /* Background color of selected text */
    color: #ffffff; /* Foreground (text) color of selected text */
    text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5);
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for background and text color */
}



/* Focus state */
.footer textarea:focus {
    outline: none; /* Remove default focus outline */
    border-bottom: 0px solid #000000; /* Ensure the bottom border stays black on focus */
    border-top: 0px groove rgb(170, 0, 0);
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
}



/*  .footer input {
    width: 100%;
    max-width: 71.5%;
    padding: 10px;
    font-size: 16px;    
    border: 1px solid #ccc;
    color: rgb(255, 255, 255);
    background-color: transparent;
    border-radius: 0px;
    box-sizing: border-box;
    resize:vertical;
}
*/



/* Responsive adjustments */

/* Medium devices (up to 1024px) */
@media (min-width: 1025px) and (max-width: 1124px) {
/*@media (max-width: 1024px) {*/
/* Basic reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Global styling */
body {
    font-family: 'Arial', sans-serif;
    display: grid;
    grid-template-areas:
        "top top top"
        "leftPanel main rightPanel"
        "leftPanel search rightPanel"
        "footer footer footer";
    grid-template-columns: 1fr 5fr 1fr;
    grid-template-rows: auto 1fr auto auto;
    gap: 0px;
    min-height: 100vh;
    padding: 0px;
    line-height: 1.6;
    background-color: transparent;
    align-items: stretch; /* Ensures all grid items fill their respective heights */
    overflow-y: auto; /* Ensures the body is scrollable */
    scroll-behavior: smooth;
    transition: scroll-behavior 0.1s, overflow-y 0.1s, transform 0.1s; /* Smooth hover effect */
}
body::-webkit-scrollbar {
    width: 0px;
    transition: all 1s linear infinite;
}

body::-webkit-scrollbar-track {
    border: 0px solid transparent;
    background: transparent;
    transition: all 1s linear infinite;
}

body::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 0px solid rgb(0, 0, 0);
    box-shadow: 0 0 1px 0px black, inset 0 0 3px 0px rgb(255, 255, 255);
    cursor: pointer; /* Set the cursor to hand/finger */
    opacity: 1; /* Initially set opacity to 1 */
    transition: opacity 0.5s ease; /* Add transition to the opacity property */    
}

body.scroll-top::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border: 0px solid rgb(0, 0, 0);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-shadow: 0 0 1px 0px black, inset 0 0 3px 0px rgb(255, 255, 255);
    transition: background-color 0.3s ease-in-out;
}

body.scroll-bottom::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border: 0px solid rgb(0, 0, 0);
    box-shadow: 0 0 1px 0px black, inset 0 0 3px 0px rgb(255, 255, 255);
    transition: background-color 0.3s ease-in-out;
}

/* Top bar styling */
.top {
    grid-area: top;
    background-color: #000000;
    color: #fff;
    padding: 3px;
    display: flex; /* Allows content to be side by side */
    align-items: center; /* Vertically centers the content */
    justify-content: flex-start; /* Positions content to the left */
    letter-spacing: 1px;
    position:relative; /* Make the top bar fixed */
    top: 0; /* Position at the top */
    left: 0; /* Align to the left */
    right: 0; /* Align to the right */
    width: 100%; /* Full width */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For WebKit-based browsers */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older versions of Internet Explorer */    
    cursor:auto;    
    transition: all 0.1s ease;
}


/* Middle content styling */
.middle-top {
    display: flex; /* Arrange the RZ logo and label side by side */
    align-items: center; /* Center vertically */
    margin: 0 auto; /* Center the entire block */
    align-items: center;
    justify-content: center;
    transition: all 0.1s ease;
}

/* Center label styling */
.RW {
    font-size: 30px; /* Adjust size as needed */
    font-weight: bold; /* Make the text bold */
    color: #fff;
    font-family: 'Verdana';
    letter-spacing: 3px;
    text-shadow: 0px 0px 21px rgba(255, 255, 255);
    margin: 0;
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For WebKit-based browsers */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older versions of Internet Explorer */    
}

/* RZ logo styling */
.RZ {
    flex-shrink: 0;
    display: inline-block;
    width: 73px; /* Set width */
    height: 73px; /* Set height */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 0 0px rgba(255, 255, 255); /* Add glowing effect */
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For WebKit-based browsers */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older versions of Internet Explorer */    
    transition: all 0.1s ease;
}

/* Center label styling */
.ZZ {
    font-size: 30px; /* Adjust size as needed */
    font-weight: bold; /* Make the text bold */
    color: #fff;
    font-family: 'Verdana';
    text-shadow: 0px 0px 21px rgba(255, 255, 255);
    letter-spacing: 3px;
    margin: 0;
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For WebKit-based browsers */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older versions of Internet Explorer */    
}


/* Logo styling */
.FA {
    height: 50px; /* Increase the size for more prominence */
    width: auto; /* Maintain aspect ratio */
    margin-right: 15px; /* Spacing between the logo and text */
    flex-shrink: 0; /* Prevents the logo from shrinking */
    transition: all 0.1s ease; /* Smooth size transition */
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For WebKit-based browsers */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older versions of Internet Explorer */    
}
/* Top bar styling */

/* Main content styling */
.main {
    grid-area: main;
    background-color: transparent;
    background-image: none;  /* Going up one level and accessing elements */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 55% 85%; /* This will make the image cover the entire div */
    background-position: center center; /* Center the image within the div */
    padding-left: 3px;
    padding-top: 0px;
    color: #333;
    border-radius: 0px;
    /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);*/
    /*box-shadow: 0 0 3px 0px rgb(0, 0, 0), inset 0 0 0px 0px rgb(0, 0, 0);    */
    box-shadow: 0 0 14px 0px rgb(0, 0, 0, 0.10), inset 0 0 0px 0px rgb(0, 0, 0);    
    min-height: 100%; /* Ensures it takes full height */
    max-height: 500px; /* Adjust this value as needed to set the height limit */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligns content at the top */
    overflow-y: scroll; /* Adds vertical scroll when content overflows */
    overflow-x: hidden;
    transition: opacity 1s ease-out; /* Smooth transition for opacity */
    transition: background-image 1s ease-out, opacity 1s ease-out;
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For WebKit-based browsers */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older versions of Internet Explorer */    
}
/* Keyframes for the fade-in effect */
@keyframes fadeInBackground {
    0% {
        opacity: 0; /* Start with no opacity */
    }
    100% {
        opacity: 1; /* End with full opacity */
    }
}

.main.fade-in-background{
    background-color: transparent;
    background-image: url('../elements/FAM_PNG.png');  /* Going up one level and accessing elements */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 55% 85%; /* This will make the image cover the entire div */
    background-position: center center; /* Center the image within the div */

    animation: fadeInBackground 3s ease-in;
}

/* Class for triggering the fade-out */
.main.fade-out-background {
    animation: fadeOutBackground 0.3s ease-out; /* Ensure the animation is applied directly to .main */
}

@keyframes fadeOutBackground {
    0% {
        opacity: 1; /* Start with full opacity */
    }
    100% {
        opacity: 0; /* End with no opacity */
    }
}
/* For WebKit-based browsers like Chrome and Safari */
.main::-webkit-scrollbar {
    width: 3px;
    transition: all 1s linear infinite;
}

.main::-webkit-scrollbar-track {
    border: 0px solid transparent;
    background: transparent;
    transition: all 1s linear infinite;
}

.main::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 0px solid rgb(0, 0, 0);
    box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(255, 255, 255);
    cursor: pointer; /* Set the cursor to hand/finger */
    opacity: 1; /* Initially set opacity to 1 */
    transition: opacity 0.5s ease; /* Add transition to the opacity property */    
}

.main.scroll-top::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border: 0px solid rgb(0, 0, 0);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(255, 255, 255);
    transition: background-color 0.3s ease-in-out;
}

.main.scroll-bottom::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border: 0px solid rgb(0, 0, 0);
    box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(255, 255, 255);
    transition: background-color 0.3s ease-in-out;
}

/* Submit button styling */
/* Correct image path */
.submit-button {
    background-color: white;  
    background-image: url('../elements/MPNG.png');  /* Going up one level and accessing elements */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 90%; /* This will make the image cover the entire div */
    background-position: center center; /* Center the image within the div */
    /*box-shadow: 0 0 14px 0px black, inset 0 0 3px 0px rgba(0, 0, 0); Add an inset glowing effect */
    border: none;
    border-radius: 50%; /* Makes it a circle */
    width: 73px; /* Set width */
    height: 73px; /* Set height */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /*box-shadow: 0 0 10px rgba(255, 255, 255, 0.6); /* Glowing shadow effect */
    box-shadow: 0 0 14px 7px rgb(255, 255, 255), inset 0 0 14px 0px rgb(0, 0, 0);    
    transform: scale(1.05); /* Slightly increases size on hover */
    transition: box-shadow 0.1s, transform 0.1s; /* Smooth hover effect */
    margin-left: auto; /* Pushes the button to the right */
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For WebKit-based browsers */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older versions of Internet Explorer */    
}


.submit-button.whitePuts{
    background-color: white;  
    background-image: url('../elements/MPNG.png');  /* Going up one level and accessing elements */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 90%; /* This will make the image cover the entire div */
    background-position: center center; /* Center the image within the div */
    box-shadow: 0 0 14px 7px rgb(255, 255, 255), inset 0 0 14px 0px rgb(0, 0, 0);    
    transform: scale(1.05); /* Slightly increases size on hover */
    transition: box-shadow 0.1s, transform 0.1s; /* Smooth hover effect */    
}



.submit-button.blackPuts{
    background-color: black;  
    background-image: url('../elements/MBPNG.png');  /* Going up one level and accessing elements */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90% 88%; /* This will make the image cover the entire div */
    background-position: 4px 5px; /* Center the image within the div */
    box-shadow: 0 0 7px 3px rgb(255, 255, 255), inset 0 0 7px 3px rgb(255, 255, 255);    
    transform: scale(1.05); /* Slightly increases size on hover */
    transition: box-shadow 0.1s, transform 0.1s; /* Smooth hover effect */
}


/* Footer styling */
.footer {
    grid-area: footer;
    background-color: transparent;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer textarea {
    width: 100%;
    max-width: 71.5%;
    height: 100%;
    max-height: auto;
    padding: 0px;
    font-size: 16px; 
    color: rgb(170, 0, 0);
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
    background-color: transparent;
    border: none; /* Remove all borders */
    border-bottom: 0px solid #000000; /* Add a black bottom border */
    border-top: 0px groove rgb(170, 0, 0);
    border-radius: 0px; /* Remove border radius */
    box-sizing: border-box;
    resize: none; /* Disable manual resizing */
    overflow-y: hidden; /* Adds vertical scroll when content overflows */
    overflow-x: hidden;
    scroll-behavior: smooth;
    transition: height 0.1s ease-in-out, background-color 0.3s ease, color 0.3s ease;
    user-select: text; /* Ensure text is selectable */
    caret-color: rgb(0, 0, 0); /* Change the caret color */
}


/* The class that triggers the glowing border animation */
.footer textarea.glowingBorder {
    animation: borderGlow 0.3s ease-in-out;
}

  /* Define the glowing effect animation */
@keyframes borderGlow {
    0% {
        box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(255, 255, 255);
    }
    50% {
        box-shadow: 0 0 0px 0px black, inset 0 0 7px 0px rgb(0, 0, 0);
    }
    100% {
        box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(130, 0, 0);
    }
}

/* Pseudo-element for text selection */
.footer textarea::selection {
    background-color: rgb(0, 0, 0); /* Background color of selected text */
    color: #ffffff; /* Foreground (text) color of selected text */
    text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5);
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for background and text color */
}



/* Focus state */
.footer textarea:focus {
    outline: none; /* Remove default focus outline */
    border-bottom: 0px solid #000000; /* Ensure the bottom border stays black on focus */
    border-top: 0px groove rgb(170, 0, 0);
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
}
}


@media (min-width: 901px) and (max-width: 1024px) {
/* Basic reset */
/* Basic reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Global styling */
body {
    font-family: 'Arial', sans-serif;
    display: grid;
    grid-template-areas:
    "top"
    "main"
    "footer";
    grid-template-columns: 1fr; /* Makes main occupy full width */
    gap: 0px;
    min-height: 100vh;
    padding: 0px;
    line-height: 1.6;
    background-color: transparent;
    align-items: stretch; /* Ensures all grid items fill their respective heights */
    overflow-y: auto; /* Ensures the body is scrollable */
    scroll-behavior: smooth;
    transition: scroll-behavior 0.1s, overflow-y 0.1s, transform 0.1s; /* Smooth hover effect */
}

body::-webkit-scrollbar {
    width: 0px;
    transition: all 1s linear infinite;
}

body::-webkit-scrollbar-track {
    border: 0px solid transparent;
    background: transparent;
    transition: all 1s linear infinite;
}

body::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 0px solid rgb(0, 0, 0);
    box-shadow: 0 0 1px 0px black, inset 0 0 3px 0px rgb(255, 255, 255);
    cursor: pointer; /* Set the cursor to hand/finger */
    opacity: 1; /* Initially set opacity to 1 */
    transition: opacity 0.5s ease; /* Add transition to the opacity property */    
}

body.scroll-top::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border: 0px solid rgb(0, 0, 0);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-shadow: 0 0 1px 0px black, inset 0 0 3px 0px rgb(255, 255, 255);
    transition: background-color 0.3s ease-in-out;
}

body.scroll-bottom::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border: 0px solid rgb(0, 0, 0);
    box-shadow: 0 0 1px 0px black, inset 0 0 3px 0px rgb(255, 255, 255);
    transition: background-color 0.3s ease-in-out;
}


.leftPanel, .rightPanel{
        display:none;
}

/* Top bar styling */
.top {
    grid-area: top;
    background-color: #000000;
    color: #fff;
    padding: 3px;
    display: flex; /* Allows content to be side by side */
    align-items: center; /* Vertically centers the content */
    justify-content: flex-start; /* Positions content to the left */
    letter-spacing: 1px;
    position:relative; /* Make the top bar fixed */
    top: 0; /* Position at the top */
    left: 0; /* Align to the left */
    right: 0; /* Align to the right */
    width: 100%; /* Full width */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For WebKit-based browsers */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older versions of Internet Explorer */    
    cursor:auto;    
    transition: all 0.1s ease;
}


/* Middle content styling */
.middle-top {
    display: flex; /* Arrange the RZ logo and label side by side */
    align-items: center; /* Center vertically */
    margin: 0 auto; /* Center the entire block */
    align-items: center;
    justify-content: center;
    transition: all 0.1s ease;
}

/* Center label styling */
.RW {
    font-size: 30px; /* Adjust size as needed */
    font-weight: bold; /* Make the text bold */
    color: #fff;
    font-family: 'Verdana';
    letter-spacing: 3px;
    text-shadow: 0px 0px 21px rgba(255, 255, 255);
    margin: 0;
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For WebKit-based browsers */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older versions of Internet Explorer */    
}

/* RZ logo styling */
.RZ {
    flex-shrink: 0;
    display: inline-block;
    width: 73px; /* Set width */
    height: 73px; /* Set height */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 0 0px rgba(255, 255, 255); /* Add glowing effect */
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For WebKit-based browsers */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older versions of Internet Explorer */    
    transition: all 0.1s ease;
}

/* Center label styling */
.ZZ {
    font-size: 30px; /* Adjust size as needed */
    font-weight: bold; /* Make the text bold */
    color: #fff;
    font-family: 'Verdana';
    text-shadow: 0px 0px 21px rgba(255, 255, 255);
    letter-spacing: 3px;
    margin: 0;
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For WebKit-based browsers */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older versions of Internet Explorer */    
}


/* Logo styling */
.FA {
    height: 50px; /* Increase the size for more prominence */
    width: auto; /* Maintain aspect ratio */
    margin-right: 15px; /* Spacing between the logo and text */
    flex-shrink: 0; /* Prevents the logo from shrinking */
    transition: all 0.1s ease; /* Smooth size transition */
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For WebKit-based browsers */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older versions of Internet Explorer */    
}
/* Top bar styling */

.main {
        grid-area: main;
        padding-left: 3px;
        padding-top: 0px;
        color: #333;
        border-radius: 0px;
        /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);*/
        /*box-shadow: 0 0 3px 0px rgb(0, 0, 0), inset 0 0 0px 0px rgb(0, 0, 0);    */
        box-shadow: 0 0 14px 0px rgb(0, 0, 0, 0.10), inset 0 0 0px 0px rgb(0, 0, 0);    
        min-height: 100%; /* Ensures it takes full height */
        max-height: 500px; /* Adjust this value as needed to set the height limit */
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Aligns content at the top */
        overflow-y: scroll; /* Adds vertical scroll when content overflows */
        overflow-x: hidden;
        transition: opacity 1s ease-out; /* Smooth transition for opacity */
        transition: background-image 1s ease-out, opacity 1s ease-out;
        user-select: none; /* Prevents text selection */
        -webkit-user-select: none; /* For WebKit-based browsers */
        -moz-user-select: none; /* For Firefox */
        -ms-user-select: none; /* For older versions of Internet Explorer */    
    }
    /* Keyframes for the fade-in effect */
    @keyframes fadeInBackground {
        0% {
            opacity: 0; /* Start with no opacity */
        }
        100% {
            opacity: 1; /* End with full opacity */
        }
    }
    
    .main.fade-in-background{
        background-color: transparent;
        background-image: url('../elements/FAM_PNG.png');  /* Going up one level and accessing elements */
        background-position: center;
        background-repeat: no-repeat;
        background-size: 70% 90%; /* This will make the image cover the entire div */
        background-position: center center; /* Center the image within the div */
    
        animation: fadeInBackground 3s ease-in;
    }
    
    /* Class for triggering the fade-out */
    .main.fade-out-background {
        animation: fadeOutBackground 0.3s ease-out; /* Ensure the animation is applied directly to .main */
    }
    
    @keyframes fadeOutBackground {
        0% {
            opacity: 1; /* Start with full opacity */
        }
        100% {
            opacity: 0; /* End with no opacity */
        }
}

/* For WebKit-based browsers like Chrome and Safari */
.main::-webkit-scrollbar {
    width: 3px;
    transition: all 1s linear infinite;
}

.main::-webkit-scrollbar-track {
    border: 0px solid transparent;
    background: transparent;
    transition: all 1s linear infinite;
}

.main::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 0px solid rgb(0, 0, 0);
    box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(255, 255, 255);
    cursor: pointer; /* Set the cursor to hand/finger */
    opacity: 1; /* Initially set opacity to 1 */
    transition: opacity 0.5s ease; /* Add transition to the opacity property */    
}

.main.scroll-top::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border: 0px solid rgb(0, 0, 0);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(255, 255, 255);
    transition: background-color 0.3s ease-in-out;
}

.main.scroll-bottom::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border: 0px solid rgb(0, 0, 0);
    box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(255, 255, 255);
    transition: background-color 0.3s ease-in-out;
}
/* Submit button styling */
/* Correct image path */
.submit-button {
    background-color: white;  
    background-image: url('../elements/MPNG.png');  /* Going up one level and accessing elements */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 90%; /* This will make the image cover the entire div */
    background-position: center center; /* Center the image within the div */
    /*box-shadow: 0 0 14px 0px black, inset 0 0 3px 0px rgba(0, 0, 0); Add an inset glowing effect */
    border: none;
    border-radius: 50%; /* Makes it a circle */
    width: 73px; /* Set width */
    height: 73px; /* Set height */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /*box-shadow: 0 0 10px rgba(255, 255, 255, 0.6); /* Glowing shadow effect */
    box-shadow: 0 0 14px 7px rgb(255, 255, 255), inset 0 0 14px 0px rgb(0, 0, 0);    
    transform: scale(1.05); /* Slightly increases size on hover */
    transition: box-shadow 0.1s, transform 0.1s; /* Smooth hover effect */
    margin-left: auto; /* Pushes the button to the right */
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For WebKit-based browsers */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older versions of Internet Explorer */    
}


.submit-button.whitePuts{
    background-color: white;  
    background-image: url('../elements/MPNG.png');  /* Going up one level and accessing elements */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 90%; /* This will make the image cover the entire div */
    background-position: center center; /* Center the image within the div */
    box-shadow: 0 0 14px 7px rgb(255, 255, 255), inset 0 0 14px 0px rgb(0, 0, 0);    
    transform: scale(1.05); /* Slightly increases size on hover */
    transition: box-shadow 0.1s, transform 0.1s; /* Smooth hover effect */    
}



.submit-button.blackPuts{
    background-color: black;  
    background-image: url('../elements/MBPNG.png');  /* Going up one level and accessing elements */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90% 88%; /* This will make the image cover the entire div */
    background-position: 4px 5px; /* Center the image within the div */
    box-shadow: 0 0 7px 3px rgb(255, 255, 255), inset 0 0 7px 3px rgb(255, 255, 255);    
    transform: scale(1.05); /* Slightly increases size on hover */
    transition: box-shadow 0.1s, transform 0.1s; /* Smooth hover effect */
}

/* Footer styling */
.footer {
    grid-area: footer;
    background-color: transparent;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer textarea {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: auto;
    padding: 0px;
    font-size: 16px; 
    color: rgb(170, 0, 0);
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
    background-color: transparent;
    border: none; /* Remove all borders */
    border-bottom: 0px solid #000000; /* Add a black bottom border */
    border-top: 0px groove rgb(170, 0, 0);
    border-radius: 0px; /* Remove border radius */
    box-sizing: border-box;
    resize: none; /* Disable manual resizing */
    overflow-y: hidden; /* Adds vertical scroll when content overflows */
    overflow-x: hidden;
    text-align:left;
    scroll-behavior: smooth;
    transition: height 0.1s ease-in-out, background-color 0.3s ease, color 0.3s ease;
    user-select: text; /* Ensure text is selectable */
    caret-color: rgb(0, 0, 0); /* Change the caret color */
}



/* The class that triggers the glowing border animation */
.footer textarea.glowingBorder {
    animation: borderGlow 0.3s ease-in-out;
}

  /* Define the glowing effect animation */
@keyframes borderGlow {
    0% {
        box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(255, 255, 255);
    }
    50% {
        box-shadow: 0 0 0px 0px black, inset 0 0 7px 0px rgb(0, 0, 0);
    }
    100% {
        box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(130, 0, 0);
    }
}


/* Pseudo-element for text selection */
.footer textarea::selection {
    background-color: rgb(0, 0, 0); /* Background color of selected text */
    color: #ffffff; /* Foreground (text) color of selected text */
    text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5);
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for background and text color */
}



/* Focus state */
.footer textarea:focus {
    outline: none; /* Remove default focus outline */
    border-bottom: 0px solid #000000; /* Ensure the bottom border stays black on focus */
    border-top: 0px groove rgb(170, 0, 0);
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
}

    .leftPanel, .rightPanel{
        display:none;
    }
}


/* Small devices (up to 768px) */
/*@media (max-width: 1020px) {*/
@media (min-width: 501px) and (max-width: 900px) {
html, body {
    height: 100%;
    overflow: hidden;
}    
/* Basic reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Global styling */
body {
    font-family: 'Arial', sans-serif;
    display: grid;
    grid-template-areas:
    "top"
    "main"
    "footer";
    grid-template-columns: 1fr; /* Makes main occupy full width */
    gap: 0px;
    min-height: 100vh;
    padding: 0px;
    line-height: 1.6;
    background-color: transparent;
    align-items: stretch; /* Ensures all grid items fill their respective heights */
    overflow-y: auto; /* Ensures the body is scrollable */
    scroll-behavior: smooth;
    transition: scroll-behavior 0.1s, overflow-y 0.1s, transform 0.1s; /* Smooth hover effect */
}
body::-webkit-scrollbar {
    width: 0px;
    transition: all 1s linear infinite;
}

body::-webkit-scrollbar-track {
    border: 0px solid transparent;
    background: transparent;
    transition: all 1s linear infinite;
}

body::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 0px solid rgb(0, 0, 0);
    box-shadow: 0 0 1px 0px black, inset 0 0 3px 0px rgb(255, 255, 255);
    cursor: pointer; /* Set the cursor to hand/finger */
    opacity: 1; /* Initially set opacity to 1 */
    transition: opacity 0.5s ease; /* Add transition to the opacity property */    
}

body.scroll-top::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border: 0px solid rgb(0, 0, 0);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-shadow: 0 0 1px 0px black, inset 0 0 3px 0px rgb(255, 255, 255);
    transition: background-color 0.3s ease-in-out;
}

body.scroll-bottom::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border: 0px solid rgb(0, 0, 0);
    box-shadow: 0 0 1px 0px black, inset 0 0 3px 0px rgb(255, 255, 255);
    transition: background-color 0.3s ease-in-out;
}

    .top {
        grid-area: top;
        background-color: #000000;
        color: #fff;
        padding: 3px;
        display: flex; /* Allows content to be side by side */
        align-items: center; /* Vertically centers the content */
        justify-content: flex-start; /* Positions content to the left */
        letter-spacing: 1px;
        position:relative; /* Make the top bar fixed */
        top: 0; /* Position at the top */
        left: 0; /* Align to the left */
        right: 0; /* Align to the right */
        width: 100%; /* Full width */
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
        user-select: none; /* Prevents text selection */
        -webkit-user-select: none; /* For WebKit-based browsers */
        -moz-user-select: none; /* For Firefox */
        -ms-user-select: none; /* For older versions of Internet Explorer */    
        cursor:auto;    
        transition: all 0.1s ease;
    }
    
    .middle-top {
        display: none;
    }
    
    .leftPanel, .rightPanel{
            display:none;
    }
    
.main {
        grid-area: main;
        padding-left: 3px;
        padding-top: 0px;
        color: #333;
        border-radius: 0px;
        /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);*/
        /*box-shadow: 0 0 3px 0px rgb(0, 0, 0), inset 0 0 0px 0px rgb(0, 0, 0);    */
        box-shadow: 0 0 14px 0px rgb(0, 0, 0, 0.10), inset 0 0 0px 0px rgb(0, 0, 0);    
        /*min-height: 100%; /* Ensures it takes full height */
        /*max-height: 500px; /* Adjust this value as needed to set the height limit */
        min-height: calc(100vh - 60px); /* 60px = estimated footer height */
        max-height: calc(100vh - 60px);
        overflow-y: auto; /* allow scroll */        
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Aligns content at the top */
        overflow-y: scroll; /* Adds vertical scroll when content overflows */
        overflow-x: hidden;
        transition: opacity 1s ease-out; /* Smooth transition for opacity */
        transition: background-image 1s ease-out, opacity 1s ease-out;
        user-select: none; /* Prevents text selection */
        -webkit-user-select: none; /* For WebKit-based browsers */
        -moz-user-select: none; /* For Firefox */
        -ms-user-select: none; /* For older versions of Internet Explorer */    
    }
    /* Keyframes for the fade-in effect */
    @keyframes fadeInBackground {
        0% {
            opacity: 0; /* Start with no opacity */
        }
        100% {
            opacity: 1; /* End with full opacity */
        }
    }
    
    .main.fade-in-background{
        background-color: transparent;
        background-image: url('../elements/FAM_PNG.png');  /* Going up one level and accessing elements */
        background-position: center;
        background-repeat: no-repeat;
        background-size: 90% 90%; /* This will make the image cover the entire div */
        background-position: center center; /* Center the image within the div */
    
        animation: fadeInBackground 3s ease-in;
    }
    
    /* Class for triggering the fade-out */
    .main.fade-out-background {
        animation: fadeOutBackground 0.3s ease-out; /* Ensure the animation is applied directly to .main */
    }
    
    @keyframes fadeOutBackground {
        0% {
            opacity: 1; /* Start with full opacity */
        }
        100% {
            opacity: 0; /* End with no opacity */
        }
}

/* For WebKit-based browsers like Chrome and Safari */
.main::-webkit-scrollbar {
    width: 3px;
    transition: all 1s linear infinite;
}

.main::-webkit-scrollbar-track {
    border: 0px solid transparent;
    background: transparent;
    transition: all 1s linear infinite;
}

.main::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 0px solid rgb(0, 0, 0);
    box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(255, 255, 255);
    cursor: pointer; /* Set the cursor to hand/finger */
    opacity: 1; /* Initially set opacity to 1 */
    transition: opacity 0.5s ease; /* Add transition to the opacity property */    
}

.main.scroll-top::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border: 0px solid rgb(0, 0, 0);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(255, 255, 255);
    transition: background-color 0.3s ease-in-out;
}

.main.scroll-bottom::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border: 0px solid rgb(0, 0, 0);
    box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(255, 255, 255);
    transition: background-color 0.3s ease-in-out;
}
/* Submit button styling */
/* Correct image path */
.submit-button {
    background-color: white;  
    background-image: url('../elements/MPNG.png');  /* Going up one level and accessing elements */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 90%; /* This will make the image cover the entire div */
    background-position: center center; /* Center the image within the div */
    /*box-shadow: 0 0 14px 0px black, inset 0 0 3px 0px rgba(0, 0, 0); Add an inset glowing effect */
    border: none;
    border-radius: 50%; /* Makes it a circle */
    width: 73px; /* Set width */
    height: 73px; /* Set height */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /*box-shadow: 0 0 10px rgba(255, 255, 255, 0.6); /* Glowing shadow effect */
    box-shadow: 0 0 14px 7px rgb(255, 255, 255), inset 0 0 14px 0px rgb(0, 0, 0);    
    transform: scale(1.05); /* Slightly increases size on hover */
    transition: box-shadow 0.1s, transform 0.1s; /* Smooth hover effect */
    margin-left: auto; /* Pushes the button to the right */
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For WebKit-based browsers */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older versions of Internet Explorer */    
}


.submit-button.whitePuts{
    background-color: white;  
    background-image: url('../elements/MPNG.png');  /* Going up one level and accessing elements */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 90%; /* This will make the image cover the entire div */
    background-position: center center; /* Center the image within the div */
    box-shadow: 0 0 14px 7px rgb(255, 255, 255), inset 0 0 14px 0px rgb(0, 0, 0);    
    transform: scale(1.05); /* Slightly increases size on hover */
    transition: box-shadow 0.1s, transform 0.1s; /* Smooth hover effect */    
}



.submit-button.blackPuts{
    background-color: black;  
    background-image: url('../elements/MBPNG.png');  /* Going up one level and accessing elements */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90% 88%; /* This will make the image cover the entire div */
    background-position: 4px 5px; /* Center the image within the div */
    box-shadow: 0 0 7px 3px rgb(255, 255, 255), inset 0 0 7px 3px rgb(255, 255, 255);    
    transform: scale(1.05); /* Slightly increases size on hover */
    transition: box-shadow 0.1s, transform 0.1s; /* Smooth hover effect */
}

/* Footer styling */
.footer {
    grid-area: footer;
    background-color: transparent;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer textarea {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: auto;
    padding: 0px;
    font-size: 16px; 
    color: rgb(170, 0, 0);
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
    background-color: transparent;
    border: none; /* Remove all borders */
    border-bottom: 0px solid #000000; /* Add a black bottom border */
    border-top: 0px groove rgb(170, 0, 0);
    border-radius: 0px; /* Remove border radius */
    box-sizing: border-box;
    resize: none; /* Disable manual resizing */
    overflow-y: hidden; /* Adds vertical scroll when content overflows */
    overflow-x: hidden;
    text-align:left;
    scroll-behavior: smooth;
    transition: height 0.1s ease-in-out, background-color 0.3s ease, color 0.3s ease;
    user-select: text; /* Ensure text is selectable */
    caret-color: rgb(0, 0, 0); /* Change the caret color */
}


/* The class that triggers the glowing border animation */
.footer textarea.glowingBorder {
    animation: borderGlow 0.3s ease-in-out;
}

  /* Define the glowing effect animation */
@keyframes borderGlow {
    0% {
        box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(255, 255, 255);
    }
    50% {
        box-shadow: 0 0 0px 0px black, inset 0 0 7px 0px rgb(0, 0, 0);
    }
    100% {
        box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(130, 0, 0);
    }
}


/* Pseudo-element for text selection */
.footer textarea::selection {
    background-color: rgb(0, 0, 0); /* Background color of selected text */
    color: #ffffff; /* Foreground (text) color of selected text */
    text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5);
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for background and text color */
}



/* Focus state */
.footer textarea:focus {
    outline: none; /* Remove default focus outline */
    border-bottom: 0px solid #000000; /* Ensure the bottom border stays black on focus */
    border-top: 0px groove rgb(170, 0, 0);
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
}

    .leftPanel, .rightPanel{
        display:none;
    }
}



/* Small devices (up to 768px) */
/*@media (max-width: 1020px) {*/
@media (min-width: 401px) and (max-width: 500px) {
/* Basic reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Global styling */
body {
    font-family: 'Arial', sans-serif;
    display: grid;
    grid-template-areas:
    "top"
    "main"
    "footer";
    grid-template-columns: 1fr; /* Makes main occupy full width */
    gap: 0px;
    min-height: 100vh;
    padding: 0px;
    line-height: 1.6;
    background-color: transparent;
    align-items: stretch; /* Ensures all grid items fill their respective heights */
    overflow-y: auto; /* Ensures the body is scrollable */
    scroll-behavior: smooth;
    transition: scroll-behavior 0.1s, overflow-y 0.1s, transform 0.1s; /* Smooth hover effect */
}
body::-webkit-scrollbar {
    width: 0px;
    transition: all 1s linear infinite;
}

body::-webkit-scrollbar-track {
    border: 0px solid transparent;
    background: transparent;
    transition: all 1s linear infinite;
}

body::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 0px solid rgb(0, 0, 0);
    box-shadow: 0 0 1px 0px black, inset 0 0 3px 0px rgb(255, 255, 255);
    cursor: pointer; /* Set the cursor to hand/finger */
    opacity: 1; /* Initially set opacity to 1 */
    transition: opacity 0.5s ease; /* Add transition to the opacity property */    
}

body.scroll-top::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border: 0px solid rgb(0, 0, 0);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-shadow: 0 0 1px 0px black, inset 0 0 3px 0px rgb(255, 255, 255);
    transition: background-color 0.3s ease-in-out;
}

body.scroll-bottom::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border: 0px solid rgb(0, 0, 0);
    box-shadow: 0 0 1px 0px black, inset 0 0 3px 0px rgb(255, 255, 255);
    transition: background-color 0.3s ease-in-out;
}

    .top {
        grid-area: top;
        background-color: #000000;
        color: #fff;
        padding: 3px;
        display: flex; /* Allows content to be side by side */
        align-items: center; /* Vertically centers the content */
        justify-content: flex-start; /* Positions content to the left */
        letter-spacing: 1px;
        position:relative; /* Make the top bar fixed */
        top: 0; /* Position at the top */
        left: 0; /* Align to the left */
        right: 0; /* Align to the right */
        width: 100%; /* Full width */
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
        user-select: none; /* Prevents text selection */
        -webkit-user-select: none; /* For WebKit-based browsers */
        -moz-user-select: none; /* For Firefox */
        -ms-user-select: none; /* For older versions of Internet Explorer */    
        cursor:auto;    
        transition: all 0.1s ease;
    }

    .middle-top {
        display: none;
    }
    
    .leftPanel, .rightPanel{
            display:none;
    }

    .main {
        grid-area: main;
        padding-left: 3px;
        padding-top: 0px;
        color: #333;
        border-radius: 0px;
        /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);*/
        /*box-shadow: 0 0 3px 0px rgb(0, 0, 0), inset 0 0 0px 0px rgb(0, 0, 0);    */
        box-shadow: 0 0 14px 0px rgb(0, 0, 0, 0.10), inset 0 0 0px 0px rgb(0, 0, 0);    
        min-height: 100%; /* Ensures it takes full height */
        max-height: 500px; /* Adjust this value as needed to set the height limit */
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Aligns content at the top */
        overflow-y: scroll; /* Adds vertical scroll when content overflows */
        overflow-x: hidden;
        transition: opacity 1s ease-out; /* Smooth transition for opacity */
        transition: background-image 1s ease-out, opacity 1s ease-out;
        user-select: none; /* Prevents text selection */
        -webkit-user-select: none; /* For WebKit-based browsers */
        -moz-user-select: none; /* For Firefox */
        -ms-user-select: none; /* For older versions of Internet Explorer */    
    }
    /* Keyframes for the fade-in effect */
    @keyframes fadeInBackground {
        0% {
            opacity: 0; /* Start with no opacity */
        }
        100% {
            opacity: 1; /* End with full opacity */
        }
    }
    
    .main.fade-in-background{
        background-color: transparent;
        background-image: url('../elements/FAM_PNG.png');  /* Going up one level and accessing elements */
        background-position: center;
        background-repeat: no-repeat;
        background-size: 90% 70%; /* This will make the image cover the entire div */
        background-position: center center; /* Center the image within the div */
    
        animation: fadeInBackground 3s ease-in;
    }
    
    /* Class for triggering the fade-out */
    .main.fade-out-background {
        animation: fadeOutBackground 0.3s ease-out; /* Ensure the animation is applied directly to .main */
    }
    
    @keyframes fadeOutBackground {
        0% {
            opacity: 1; /* Start with full opacity */
        }
        100% {
            opacity: 0; /* End with no opacity */
        }
}

/* For WebKit-based browsers like Chrome and Safari */
.main::-webkit-scrollbar {
    width: 3px;
    transition: all 1s linear infinite;
}

.main::-webkit-scrollbar-track {
    border: 0px solid transparent;
    background: transparent;
    transition: all 1s linear infinite;
}

.main::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 0px solid rgb(0, 0, 0);
    box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(255, 255, 255);
    cursor: pointer; /* Set the cursor to hand/finger */
    opacity: 1; /* Initially set opacity to 1 */
    transition: opacity 0.5s ease; /* Add transition to the opacity property */    
}

.main.scroll-top::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border: 0px solid rgb(0, 0, 0);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(255, 255, 255);
    transition: background-color 0.3s ease-in-out;
}

.main.scroll-bottom::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border: 0px solid rgb(0, 0, 0);
    box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(255, 255, 255);
    transition: background-color 0.3s ease-in-out;
}


/* Submit button styling */
/* Correct image path */
.submit-button {
    background-color: white;  
    background-image: url('../elements/MPNG.png');  /* Going up one level and accessing elements */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 90%; /* This will make the image cover the entire div */
    background-position: center center; /* Center the image within the div */
    /*box-shadow: 0 0 14px 0px black, inset 0 0 3px 0px rgba(0, 0, 0); Add an inset glowing effect */
    border: none;
    border-radius: 50%; /* Makes it a circle */
    width: 73px; /* Set width */
    height: 73px; /* Set height */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /*box-shadow: 0 0 10px rgba(255, 255, 255, 0.6); /* Glowing shadow effect */
    box-shadow: 0 0 14px 7px rgb(255, 255, 255), inset 0 0 14px 0px rgb(0, 0, 0);    
    transform: scale(1.05); /* Slightly increases size on hover */
    transition: box-shadow 0.1s, transform 0.1s; /* Smooth hover effect */
    margin-left: auto; /* Pushes the button to the right */
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For WebKit-based browsers */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older versions of Internet Explorer */    
}


.submit-button.whitePuts{
    background-color: white;  
    background-image: url('../elements/MPNG.png');  /* Going up one level and accessing elements */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 90%; /* This will make the image cover the entire div */
    background-position: center center; /* Center the image within the div */
    box-shadow: 0 0 14px 7px rgb(255, 255, 255), inset 0 0 14px 0px rgb(0, 0, 0);    
    transform: scale(1.05); /* Slightly increases size on hover */
    transition: box-shadow 0.1s, transform 0.1s; /* Smooth hover effect */    
}



.submit-button.blackPuts{
    background-color: black;  
    background-image: url('../elements/MBPNG.png');  /* Going up one level and accessing elements */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90% 88%; /* This will make the image cover the entire div */
    background-position: 4px 5px; /* Center the image within the div */
    box-shadow: 0 0 7px 3px rgb(255, 255, 255), inset 0 0 7px 3px rgb(255, 255, 255);    
    transform: scale(1.05); /* Slightly increases size on hover */
    transition: box-shadow 0.1s, transform 0.1s; /* Smooth hover effect */
}
/* Footer styling */
.footer {
    grid-area: footer;
    background-color: transparent;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}



.footer textarea {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: auto;
    padding: 0px;
    font-size: 16px; 
    color: rgb(170, 0, 0);
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
    background-color: transparent;
    border: none; /* Remove all borders */
    border-bottom: 0px solid #000000; /* Add a black bottom border */
    border-top: 0px groove rgb(170, 0, 0);
    border-radius: 0px; /* Remove border radius */
    box-sizing: border-box;
    resize: none; /* Disable manual resizing */
    overflow-y: hidden; /* Adds vertical scroll when content overflows */
    overflow-x: hidden;
    text-align:left;
    scroll-behavior: smooth;
    transition: height 0.1s ease-in-out, background-color 0.3s ease, color 0.3s ease;
    /* user-select: text; /* Ensure text is selectable */
    user-select: text !important;
    -webkit-user-select: text !important;
    pointer-events: auto !important;
    touch-action: manipulation;    
    caret-color: rgb(0, 0, 0); /* Change the caret color */
}



/* The class that triggers the glowing border animation */
.footer textarea.glowingBorder {
    animation: borderGlow 0.3s ease-in-out;
}


  /* Define the glowing effect animation */
@keyframes borderGlow {
    0% {
        box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(255, 255, 255);
    }
    50% {
        box-shadow: 0 0 0px 0px black, inset 0 0 7px 0px rgb(0, 0, 0);
    }
    100% {
        box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(130, 0, 0);
    }
}


/* Pseudo-element for text selection */
.footer textarea::selection {
    background-color: rgb(0, 0, 0); /* Background color of selected text */
    color: #ffffff; /* Foreground (text) color of selected text */
    text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5);
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for background and text color */
}



/* Focus state */
.footer textarea:focus {
    outline: none; /* Remove default focus outline */
    border-bottom: 0px solid #000000; /* Ensure the bottom border stays black on focus */
    border-top: 0px groove rgb(170, 0, 0);
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
}

    .leftPanel, .rightPanel{
        display:none;
    }
}

/* Extra small devices (up to 480px) */
/*@media (max-width: 480px) {*/
@media (min-width: 100px) and (max-width: 400px) {
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    
    /* Global styling */
    body {
        font-family: 'Arial', sans-serif;
        display: grid;
        grid-template-areas:
        "top"
        "main"
        "footer";
        grid-template-columns: 1fr; /* Makes main occupy full width */
        gap: 0px;
        min-height: 100vh;
        padding: 0px;
        line-height: 1.6;
        background-color: transparent;
        align-items: stretch; /* Ensures all grid items fill their respective heights */
        overflow-y: auto; /* Ensures the body is scrollable */
        scroll-behavior: smooth;
        transition: scroll-behavior 0.1s, overflow-y 0.1s, transform 0.1s; /* Smooth hover effect */
    }
body::-webkit-scrollbar {
    width: 0px;
    transition: all 1s linear infinite;
}

body::-webkit-scrollbar-track {
    border: 0px solid transparent;
    background: transparent;
    transition: all 1s linear infinite;
}

body::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 0px solid rgb(0, 0, 0);
    box-shadow: 0 0 1px 0px black, inset 0 0 3px 0px rgb(255, 255, 255);
    cursor: pointer; /* Set the cursor to hand/finger */
    opacity: 1; /* Initially set opacity to 1 */
    transition: opacity 0.5s ease; /* Add transition to the opacity property */    
}

body.scroll-top::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border: 0px solid rgb(0, 0, 0);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-shadow: 0 0 1px 0px black, inset 0 0 3px 0px rgb(255, 255, 255);
    transition: background-color 0.3s ease-in-out;
}

body.scroll-bottom::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border: 0px solid rgb(0, 0, 0);
    box-shadow: 0 0 1px 0px black, inset 0 0 3px 0px rgb(255, 255, 255);
    transition: background-color 0.3s ease-in-out;
}    

.top {
    grid-area: top;
    background-color: #000000;
    color: #fff;
    padding: 3px;
    display: flex; /* Allows content to be side by side */
    align-items: center; /* Vertically centers the content */
    justify-content: flex-start; /* Positions content to the left */
    letter-spacing: 1px;
    position:relative; /* Make the top bar fixed */
    top: 0; /* Position at the top */
    left: 0; /* Align to the left */
    right: 0; /* Align to the right */
    width: 100%; /* Full width */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For WebKit-based browsers */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older versions of Internet Explorer */    
    cursor:auto;    
    transition: all 0.1s ease;
}

.middle-top {
    display: none;
}

.leftPanel, .rightPanel{
        display:none;
}

.main {
        grid-area: main;
        padding-left: 3px;
        padding-top: 0px;
        color: #333;
        border-radius: 0px;
        /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);*/
        /*box-shadow: 0 0 3px 0px rgb(0, 0, 0), inset 0 0 0px 0px rgb(0, 0, 0);    */
        box-shadow: 0 0 14px 0px rgb(0, 0, 0, 0.10), inset 0 0 0px 0px rgb(0, 0, 0);    
        min-height: 100%; /* Ensures it takes full height */
        max-height: 500px; /* Adjust this value as needed to set the height limit */
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Aligns content at the top */
        overflow-y: scroll; /* Adds vertical scroll when content overflows */
        overflow-x: hidden;
        transition: opacity 1s ease-out; /* Smooth transition for opacity */
        transition: background-image 1s ease-out, opacity 1s ease-out;
        user-select: none; /* Prevents text selection */
        -webkit-user-select: none; /* For WebKit-based browsers */
        -moz-user-select: none; /* For Firefox */
        -ms-user-select: none; /* For older versions of Internet Explorer */    
}

/* Keyframes for the fade-in effect */
@keyframes fadeInBackground {
        0% {
            opacity: 0; /* Start with no opacity */
        }
        100% {
            opacity: 1; /* End with full opacity */
        }
}

.main.fade-in-background{
        background-color: transparent;
        background-image: url('../elements/FAM_PNG.png');  /* Going up one level and accessing elements */
        background-position: center;
        background-repeat: no-repeat;
        background-size: 90% 57%; /* This will make the image cover the entire div */
        background-position: center center; /* Center the image within the div */
    
        animation: fadeInBackground 3s ease-in;
}

/* Class for triggering the fade-out */
.main.fade-out-background {
        animation: fadeOutBackground 0.3s ease-out; /* Ensure the animation is applied directly to .main */
}

@keyframes fadeOutBackground {
        0% {
            opacity: 1; /* Start with full opacity */
        }
        100% {
            opacity: 0; /* End with no opacity */
        }
}


/* For WebKit-based browsers like Chrome and Safari */
.main::-webkit-scrollbar {
    width: 3px;
    transition: all 1s linear infinite;
}


.main::-webkit-scrollbar-track {
    border: 0px solid transparent;
    background: transparent;
    transition: all 1s linear infinite;
}

.main::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 0px solid rgb(0, 0, 0);
    box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(255, 255, 255);
    cursor: pointer; /* Set the cursor to hand/finger */
    opacity: 1; /* Initially set opacity to 1 */
    transition: opacity 0.5s ease; /* Add transition to the opacity property */    
}

.main.scroll-top::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border: 0px solid rgb(0, 0, 0);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(255, 255, 255);
    transition: background-color 0.3s ease-in-out;
}

.main.scroll-bottom::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border: 0px solid rgb(0, 0, 0);
    box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(255, 255, 255);
    transition: background-color 0.3s ease-in-out;
}
/* Submit button styling */
/* Correct image path */
.submit-button {
    background-color: white;  
    background-image: url('../elements/MPNG.png');  /* Going up one level and accessing elements */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 90%; /* This will make the image cover the entire div */
    background-position: center center; /* Center the image within the div */
    /*box-shadow: 0 0 14px 0px black, inset 0 0 3px 0px rgba(0, 0, 0); Add an inset glowing effect */
    border: none;
    border-radius: 50%; /* Makes it a circle */
    width: 73px; /* Set width */
    height: 73px; /* Set height */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /*box-shadow: 0 0 10px rgba(255, 255, 255, 0.6); /* Glowing shadow effect */
    box-shadow: 0 0 14px 7px rgb(255, 255, 255), inset 0 0 14px 0px rgb(0, 0, 0);    
    transform: scale(1.05); /* Slightly increases size on hover */
    transition: box-shadow 0.1s, transform 0.1s; /* Smooth hover effect */
    margin-left: auto; /* Pushes the button to the right */
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For WebKit-based browsers */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older versions of Internet Explorer */    
}


.submit-button.whitePuts{
    background-color: white;  
    background-image: url('../elements/MPNG.png');  /* Going up one level and accessing elements */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 90%; /* This will make the image cover the entire div */
    background-position: center center; /* Center the image within the div */
    box-shadow: 0 0 14px 7px rgb(255, 255, 255), inset 0 0 14px 0px rgb(0, 0, 0);    
    transform: scale(1.05); /* Slightly increases size on hover */
    transition: box-shadow 0.1s, transform 0.1s; /* Smooth hover effect */    
}



.submit-button.blackPuts{
    background-color: black;  
    background-image: url('../elements/MBPNG.png');  /* Going up one level and accessing elements */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90% 88%; /* This will make the image cover the entire div */
    background-position: 4px 5px; /* Center the image within the div */
    box-shadow: 0 0 7px 3px rgb(255, 255, 255), inset 0 0 7px 3px rgb(255, 255, 255);    
    transform: scale(1.05); /* Slightly increases size on hover */
    transition: box-shadow 0.1s, transform 0.1s; /* Smooth hover effect */
}



/* Footer styling */
.footer {
    grid-area: footer;
    background-color: transparent;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer textarea {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: auto;
    padding: 0px;
    font-size: 16px; 
    color: rgb(170, 0, 0);
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
    background-color: transparent;
    border: none; /* Remove all borders */
    border-bottom: 0px solid #000000; /* Add a black bottom border */
    border-top: 0px groove rgb(170, 0, 0);
    border-radius: 0px; /* Remove border radius */
    box-sizing: border-box;
    resize: none; /* Disable manual resizing */
    overflow-y: hidden; /* Adds vertical scroll when content overflows */
    overflow-x: hidden;
    text-align: left;
    scroll-behavior: smooth;
    transition: height 0.1s ease-in-out, background-color 0.3s ease, color 0.3s ease;
    user-select: text; /* Ensure text is selectable */
    caret-color: rgb(0, 0, 0); /* Change the caret color */
}


/* The class that triggers the glowing border animation */
.footer textarea.glowingBorder {
    animation: borderGlow 0.3s ease-in-out;
}

  /* Define the glowing effect animation */
@keyframes borderGlow {
    0% {
        box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(255, 255, 255);
    }
    50% {
        box-shadow: 0 0 0px 0px black, inset 0 0 7px 0px rgb(0, 0, 0);
    }
    100% {
        box-shadow: 0 0 0px 0px black, inset 0 0 0px 0px rgb(130, 0, 0);
    }
}


/* Pseudo-element for text selection */
.footer textarea::selection {
    background-color: rgb(0, 0, 0); /* Background color of selected text */
    color: #ffffff; /* Foreground (text) color of selected text */
    text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5);
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for background and text color */
}



/* Focus state */
.footer textarea:focus {
    outline: none; /* Remove default focus outline */
    border-bottom: 0px solid #000000; /* Ensure the bottom border stays black on focus */
    border-top: 0px groove rgb(170, 0, 0);
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
}
}

/* Placeholder and hover effects
.footer textarea::placeholder {
    color: #999;
    opacity: 1;
}

.footer textarea:hover,
.footer:hover,
.top:hover {
    cursor: text;
    filter: brightness(1.05);
}
*/