/*CART 351 GAME DEV AND DESIGN 
     BY Mollika Chkaraborty 
     Instructor: Sabine Rosenberg 
     All the sources and Inspirations used 
     in this project will be in the final documentation 
     Code taken from Chat GPT will be mentioned as comments beside the code lines 
*/

/* Font */
@import url('https://fonts.googleapis.com/css2?family=Pangolin&display=swap');


/* General Styling */
body {
    font-family: 'Pangolin', sans-serif;
    background: linear-gradient(135deg, #89cff0, #ffd1dc), 
                url('assets/bg/pinkbunny.png') no-repeat center center;
    background-size: cover, 90%; /* Gradient covers the screen, image is scaled to 90% of container width */
    background-blend-mode: multiply; /* Ensures both layers are visible */
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}


/* #game-container{
    width: 200vw;
} */
#resource{
width: 100vw;
height: 100vh;
background: linear-gradient(135deg, #89cff0, #ffd1dc), 
}


/* Menu and Instructions Containers Styling */
.menu-container, .instructions-container {
    width: 700px;
    background: linear-gradient(135deg, #ffd1dc, #89cff0); /* Gradient matches other sections */
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
    animation: fadeIn 0.5s ease-in-out;
    text-align: center;
    overflow: hidden;
    border: 5px solid #89cff0;
}

/* Shared Header Styling */
.menu-container h1, .instructions-container h2 {
    font-size: 58px;
    color: #ff69b4;
    margin-bottom: 20px;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}

/* Buttons */
.menu-container button, .instructions-button, .back-button  {
    width: 200px;
    padding: 15px;
    margin: 10px;
    font-size: 20px;
    color: white;
    background: linear-gradient(135deg, #ff69b4, #89cff0);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0px 6px 15px rgba(255, 105, 180, 0.4);
}

.menu-container button:hover, .instructions-button:hover {
    background: linear-gradient(135deg, #89cff0, #ff69b4);
    transform: scale(1.1);
}

/* Instructions Text Styling */
.instructions-container p {
    font-size: 30px;
    color: #555555;
    margin-bottom: 20px;
    font-style: italic;
}

.instructions-container {
    text-align: left; /* Aligns all text to the left within the container */
    padding: 30px; /* Add some padding for better appearance */
}

.instructions-container p {
    font-size: 30px;
    color: #555555;
    margin-bottom: 20px;
    font-style: italic;
    text-align: left; /* Ensures the paragraph text aligns left */
}

.instructions-list {
    list-style: none;
    padding: 0;
    font-size: 30px;
    color: #333333;
    text-align: left; /* Align the list items to the left */
}

.instructions-list li {
    margin-bottom: 15px;
    padding-left: 20px;
    position: relative;
    text-align: left; /* list items' text is left-aligned */
}

.instructions-list li::before {
    content: '✨';
    position: absolute;
    left: 0;
    color: #ff69b4;
}

/* Message Box Styling */
.message-box {
    width: 1280px;
    height: 720px;
    background: url('assets/bg/messagebg.png') no-repeat center center / cover;
    display: flex;
    justify-content: flex-end; /* Aligns the box content (text) to the right */
    align-items: center;
    text-align: light; /* Ensure the text inside is aligned right */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px; /* Optional for spacing inside the box */
}

/* Style for the motivational message text at the start*/
.motivational-message {
    font-size: 30px;
    color: #ffffff;
    font-family: 'Pangolin', sans-serif;
    padding: 200px;
    line-height: 1.6;
    text-align: left;
    max-width: 600px;
}

/* Style for the skip buttons */
.skip-button {
    width: 200px;
    padding: 15px;
    margin: 10px;
    font-size: 20px;
    color: white;
    background: linear-gradient(135deg, #ff69b4, #89cff0);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0px 6px 15px rgba(255, 105, 180, 0.4);
}

.skip-button:hover {
    background: linear-gradient(135deg, #89cff0, #ff69b4);
    transform: scale(1.1);
}

/* Survey Container */
.survey-container {
    width: 700px;
    background: #ffffff;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
    animation: fadeIn 0.5s ease-in-out;
    text-align: center;
    overflow: hidden;
}

.survey-container h2 {
    font-size: 32px;
    color: #e20cb7;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.survey-container .intro-text {
    font-size: 18px;
    color: #666666;
    margin-bottom: 20px;
    font-style: italic;
}

/* Survey Form Styling */
#surveyForm {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: left;
}

.question-group {
    background: #fef6e4;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    animation: slideIn 0.5s ease-in-out;
    border: 2px solid #ffe4b2;
}

.question-group label {
    font-size: 20px;
    color: #444444;
    display: block;
    margin-bottom: 10px;
}

.question-group input[type="radio"] {
    accent-color: #ffa07a;
    margin-right: 10px;
    transform: scale(1.2);
    vertical-align: middle;
}

.question-group div {
    margin: 8px 0;
}

/* style the survey form */
form label {
    font-size: 20px;
    color: #333333;
    display: block;
    margin-bottom: 10px;
}

form select {
    font-size: 18px;
    padding: 8px;
    border-radius: 8px;
    border: 2px solid #89cff0;
    margin-bottom: 20px;
    background: #ffffff;
    width: 100%;
}

form button {
    background: linear-gradient(135deg, #ff69b4, #89cff0);
    color: white;
    padding: 15px 30px;
    font-size: 22px;
    font-weight: bold;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0px 10px 20px rgba(255, 105, 180, 0.4);
    display: block;
    margin: 30px auto;
    text-transform: uppercase;
}

form button:hover {
    background: linear-gradient(135deg, #89cff0, #ff69b4);
    transform: scale(1.1);
}



/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        transform: translateX(-100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }


    
}

.disclaimer-box {
    width: 60%;
    background: #ffffff;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
    text-align: center;
    font-family: 'Pangolin', sans-serif;
    color: #444444;
}

.disclaimer-box h2 {
    font-size: 28px;
    color: #ff69b4;
    margin-bottom: 10px;
}

.disclaimer-box p {
    font-size: 18px;
    margin-bottom: 15px;
}

.disclaimer-box ul {
    list-style: none;
    padding: 0;
    font-size: 18px;
}

.disclaimer-box ul li {
    margin: 5px 0;
    padding: 5px;
    background: #89cff0;
    border-radius: 5px;
    color: #ffffff;
}
#usernameInput {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    background: linear-gradient(135deg, #ffd1dc, #89cff0); 
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
    width: 60%; /* Increased width */
    max-width: 500px; /* Larger max width */
    margin: auto; /* Center on page */
    border: 5px solid #89cff0; /* Border for consistency */
    text-align: center;
}

#usernameInput h2 {
    font-size: 50px;
    color: #ff69b4;
    margin-bottom: 20px;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}

#usernameInput input {
    width: 90%; /* Adjusted width to fit the larger box */
    padding: 15px; /* Larger padding for a more comfortable input size */
    margin: 15px 0; /* Increased spacing */
    font-size: 18px; /* Larger font size for readability */
    border: 3px solid #ffd1dc; /* Matching border color */
    border-radius: 10px; /* Softer edges */
    background: #ffffff;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

#usernameInput button {
    width: 60%; /* Button width adjusted to fit styling */
    padding: 15px 20px; /* Larger padding */
    margin-top: 15px; /* Increased spacing */
    font-size: 20px; /* Larger font size for buttons */
    color: white;
    background: linear-gradient(135deg, #ff69b4, #89cff0);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0px 6px 15px rgba(255, 105, 180, 0.4);
    transition: all 0.3s ease;
}

#usernameInput button:hover {
    background: linear-gradient(135deg, #89cff0, #ff69b4); /* Hover effect for consistency */
    transform: scale(1.1); /* Subtle hover scale */
}

/* End Motivational Message Styling */
.end-motivation {
    display: none;
    width: 700px;
    background: linear-gradient(135deg, #ffd1dc, #89cff0);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
    animation: fadeIn 0.5s ease-in-out;
    text-align: center;
    overflow: hidden;
    border: 5px solid #89cff0;
    position: absolute;
    z-index: 10;
    top: calc(50vh - 220px);
    left: calc(50vw - 380px);
}

.end-motivation h2 {
    font-size: 32px;
    color: #e20cb7;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.end-motivation p {
    font-size: 18px;
    color: #555555;
    margin-bottom: 20px;
    font-style: italic;
}