@import url('https://fonts.googleapis.com/css2?family=PP+Cirka&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');



html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-y: auto; /* Allow vertical scrolling on the page */
    cursor: url('images/star.png'), auto; 
}

body {
    font-family: 'PP Cirka', Arial, sans-serif;
    background: url('images/dark.png') no-repeat center center fixed;
    background-size: cover;
    color: white;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 16px;
    box-sizing: border-box;
    position: relative;
    z-index: 0;
}




.outer-container {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(100% - 8px);
    display: flex;
    flex-direction: column; /* Ensure vertical stacking of rows */
    padding-top: 8px;
    position: relative; /* Make the outer container a positioned element */
    z-index: 1;
}

.inner-container {
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    padding: 40px 0;
    flex-grow: 1; /* Allow the inner container to grow and fill the remaining space */
}

.centered-view {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    z-index: 2;
}

.content-container {
    padding: 20px;
    max-width: 400px;
    margin: 0 auto;
    box-sizing: border-box;
}

.header-container,
.input-text-section {
    margin-bottom: 24px; /* Add bottom margin to the header container */
}

.header-container h1,
.input-text-section h1 {
    margin: 0 0 8px 0; /* 8px spacing below the title */
    font-size: 2em; /* Adjust font size if needed */
}

.header-container p,
.input-text-section p {
    margin: 0; /* Reset margin */
    font-family: 'JetBrains Mono', monospace;
    color: white;
}

.input-section {
    padding: 20px 0;
}

.input-container {
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.decision-container .header-container h1 {
    margin-bottom: 20px; /* Adjust the spacing as needed */
}

.decision-container .input-field {
    margin-bottom: 16px; /* Adjust the spacing as needed */
}

.input-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
    position: relative;
}

.input-field {
    padding: 10px;
    border: 1px solid white;
    border-radius: 32px;
    background: transparent;
    color: white;
    width: 100%;
    text-align: left; /* Align text to the left */
    box-sizing: border-box;
    margin-bottom: 20px; /* Add margin for spacing */
    padding-left: 14px;
    padding-right: 60px; /* Ensure space for the remove button */
}

input {
    padding: 10px;
    padding-left: 14px;
    padding-right: 60px; /* Ensure space for the remove button */
    border: 1px solid white;
    border-radius: 32px;
    background: transparent;
    color: white;
    width: 100%;
    text-align: left; /* Align text to the left */
    box-sizing: border-box;
}

/* Placeholder text styling */
.input-field::placeholder,
input::placeholder {
    color: rgba(255, 255, 255, 0.5); /* White with 50% opacity */
}

/* Focus state styling */
.input-field:focus,
input:focus {
    outline: none; /* Remove default outline */
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3); /* White outline at 30% opacity */
}

.text-button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: white;
    cursor: pointer;
    box-sizing: border-box;
    font-size: 1.2em; /* Adjust icon size if needed */
    transition: color 0.3s ease-in-out; /* Smooth transition for hover effect */
}

.text-button:hover {
    color: hotpink; /* Bright pink color on hover */
}

.add-button {
    width: 100%;
    padding: 10px 20px;
    border: 1px solid white;
    border-radius: 32px;
    background-color: transparent; 
    color: white;
    cursor: pointer;
    margin-bottom: 10px;
    box-sizing: border-box;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.decide-button, #continueButton, #mainDecisionContinueButton, .try-again-button {
    width: 100%;
    padding: 10px 20px;
    border: 1px solid white;
    border-radius: 32px;
    background-color: transparent;
    color: white;
    cursor: pointer;
    margin-bottom: 10px;
    box-sizing: border-box;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.add-button:hover, .decide-button:hover, #continueButton:hover, #mainDecisionContinueButton:hover, .try-again-button:hover {
    background-color: rgba(255, 255, 255, 0.6);
    color: white;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

.back-button {
    background: none; /* No background */
    border: none; /* No border/stroke */
    color: white; /* White text color */
    font-size: 14px; /* Adjust font size as needed */
    cursor: pointer; /* Pointer cursor on hover */
    margin-top: 10px; /* Add margin to separate from other buttons */
    transition: color 0.3s ease-in-out; /* Smooth transition for hover effect */
}

.back-button:hover {
    color: rgba(255, 255, 255, 0.7); /* Slightly dimmed color on hover */
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

li {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid white;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    background: black;
}

li button {
    background-color: black;
    padding: 5px 10px;
    border: 1px solid white;
    color: white;
}

#result {
    margin-top: 20px;
    font-size: 1.2em;
    color: white;
}

#resultText {
    margin: 20px 0 10px 0; /* Margin for spacing */
    font-family: 'PP Cirka', Arial, sans-serif;
}

#resultReasoning {
    margin: 0 0 24px 0; /* Margin for spacing */
    font-family: 'PP Cirka', Arial, sans-serif;
    font-size: 1em; /* Adjust the font size as needed */
}

.gif-container {
    margin-top: 20px;
    text-align: center;
}

.giphy-image {
    width: 300px; /* Set the desired width */
}

.icon-container {
    display: flex;
    flex-direction: column; /* Stack icons vertically */
    align-items: flex-end; /* Align icons to the right */
    position: absolute; /* Position absolutely to place at the top-right */
    top: 8px; /* Adjust the top position as needed */
    right: 16px; /* Adjust the right position as needed */
    
   
}

#musicIcon, #mode {
    cursor: url('images/star.png'), auto;
    padding: 12px; /* Add padding around the container */
    
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    /* Ensure PP Cirka font loads on Safari */
    h1 {
        font-family: 'PP Cirka', Arial, sans-serif !important;
    }

    /* Move the toggle icons to the top and place them side by side */
    .icon-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        gap: 10px; /* Adjust the gap as needed */
        padding: 8px;
       
    }

    /* Prevent auto zoom on input focus on Safari */
    input, textarea, select {
        font-size: 16px; /* Set the font size to prevent auto-zoom on focus */
    }
}