body, html {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 10px;
    display: flex;
    justify-content: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    background-color: #121212; /* Dark background */
    color: #E0E0E0; /* Light text */
}

.container {
    text-align: center;
    padding: 10px 50px;
    border-radius: 8px;
    background-color: #1E1E1E; /* Slightly lighter dark shade for the container */
    max-width: 600px; /* Set a max-width for the container */
    width: 100%; /* Make the container width responsive */
    box-sizing: border-box; /* Include padding in the container's total width and height */
}

input, button {
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #333;
    background-color: #333;
    color: #fff; /* White text */
}

input {
    background-color: #333; /* Dark input field */
    color: #fff; /* White text */
}

button {
    cursor: pointer;
    background-color: #f2a900; /* Green button */
    border: none;
}

h2 {
    margin: 10px 0 20px; /* Adjust spacing as needed */
    font-size: 1.2em; /* Adjust size as needed */
}

#results p {
    margin: 15px 0;
}

#results {
    margin-top: 20px;
}

.price-container {
    margin-bottom: 15px;
}

.price-container p {
    margin: 0;
    font-weight: bold;
    color: #E0E0E0; /* Adjust if you're using a different color scheme */
}

#fairPrice, #bottomPrice, #bitcoinPrice {
    display: block; /* Makes the price appear below the label */
    font-size: 24px; /* Larger font size for emphasis */
    color: #4CAF50; /* Green color to match the theme, adjust as needed */
}

#bottomPrice {
    color: #DC143C; /* Red color for bottom price */
}

#bitcoinPrice {
    color: #308fe1;
}

#comparison {
    margin-block: 8px 16px;
    font-weight: bold;
}

#faq {
    margin-top: 40px;
    text-align: left;
    border-top: 2px solid #333; /* Subtle line color */
    margin-top: 40px; /* Add some space above the divider */
    padding-top: 20px; /* Add some space below the divider */
}



.faq-title {
    font-size: 1.5em;
    text-align: center;

}


.faq-item {
    margin-bottom: 20px;
    word-wrap: break-word;
}


.faq-item p {
    color: #E0E0E0; /* Light text for answers */
    line-height: 24px;
    /*margin-left: 20px;*/
}

.faq-item h3 {
    margin-top: 40px;
    margin-bottom: 20px;
}

/* Non-Visited Links */
a:link {
    color: #008080; /* Vivid green for non-visited links */
    text-decoration: none; /* Optional: Removes underline */
}

/* Visited Links */
a:visited {
    color: #008080; /* Teal for visited links */
    text-decoration: none; /* Optional: Removes underline */
}

/* Hover and Active States for Interactivity */
a:hover, a:active {
    color: #FFD700; /* Gold color for hover and active states */
    text-decoration: underline; /* Optional: Adds underline on hover */
}


/* Responsive adjustments */
@media (max-width: 896px) {

    body, html {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    
    .container {
        width: 100vw;
        margin: 0;
        padding: 20px 20px 40px 20px;
        box-sizing: border-box; /* Ensures padding does not add to the width or height */
        position: relative; /* Adjusts positioning context */
    }
    
}