/* Üldine stiil kogu lehe jaoks */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0; /* Fallback background color */
    background-image: url('./img/taustapilt.jpg'); /* Add your image path here */
    background-size: cover; /* Ensures the image covers the entire background */
    background-position: center top; /* Centers the image */
    background-attachment: fixed; /* Makes the background image stay fixed while scrolling */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    margin: 0;
    padding-top: 20px;
}

/* Header has no background image */
header {
    text-align: center;
    width: 100%;
    height: 50px; 
    position: absolute;
    top: 0px;
    background-color: rgba(255, 255, 255, 0.8); 
    padding: 0; /* Adjusted padding to reduce space */
    color: #333; /* Text color */
}

header h1 {
    color: #1b25b1;
    font-size: 2.5rem; /* Reduced font size from 4rem to 2.5rem */
    font-weight: bold;
    letter-spacing: 2px; 
    padding: 0; /* Removed padding to make text fit better */
    margin: 0; /* Removed margin to reduce extra space */
    line-height: 1.2; /* Adjust line-height if needed for better vertical alignment */
}


/* Container (content below the header) */
.container {
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8); 
    padding: 80px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    height: 540px; /* Adjust height as needed */
    max-width: 900px; /* Set a maximum width to keep the container from stretching too wide */
    width: 100%; /* Make the container take the full width until it reaches the max-width */
    box-sizing: border-box; /* Ensures padding is included in the width calculation */

    display: flex; /* Enable flexbox */
    flex-direction: column; /* Align children vertically */
    justify-content: center; /* Vertically center the text */
    align-items: center; /* Horizontally center the text */
}
/* Mängu sisu tekst (Paragraph) inside the container */
.container p {
    font-size: 18px; /* Adjust this value to make the paragraph text bigger */
    color: #333; /* Keep the text color */
    line-height: 1.6; /* Optional: Adjust line height for better readability */
}

/* Mängu sisu pealkiri (h2) inside the container */
.container h2 {
    font-size: 36px; /* Increase the font size for the h2 tag */
    color: #333; /* Set text color */
    font-weight: bold; /* Make the heading bold */
    margin-bottom: 20px; /* Add some space below the heading */
}

.desktop-container {
    text-align: center;
    background-image: url('./img/desktop.jpg'); /* Path to your image */
    background-size: contain; /* Make sure the whole image is visible */
    background-position: center; /* Keep the image centered */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    padding: 80px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    height: 540px; /* Fixed height to match the container */
    max-width: 900px; /* Fixed max width */
    width: 100%; /* Ensure the width is 100% up to the max-width */
    box-sizing: border-box; /* Ensure padding is included in width/height calculation */

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.desktop-container h2 {
    text-align: center;
    font-size: 50px;
    color: #f0f0f0;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    padding: 20px; /* Adds space around the text */
    border-radius: 10px; /* Optional: rounded corners */
}
.desktop-container p {
    text-align: center;
    font-size: 20px;
    color: #f0f0f0;
    background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent black */
    padding: 10px; /* Adds space around the text */
    border-radius: 10px; /* Optional: rounded corners */
}


/* Right-side panel styles */
.right-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 250px;
    height: 100%;
    background-color: #333;
    color: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.right-panel h3 {
    margin-bottom: 20px;
}

.right-panel ul {
    list-style: none;
    width: 100%;
}

.right-panel li {
    margin: 10px 0;
}

/* Nupu stiil */
.startButton {
    background-color: #0c0b4d;
    color: white;
    font-size: 20px; /* Increase the font size to make the text bigger */
    padding: 15px 30px; /* Increase padding to make the button bigger */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 30px; /* Move the button lower by adding margin at the top */
}

.startButton:hover {
    background-color: #1c551f;
}

.task-btn {
    background-color: #be1f14;
    color: white;
    font-size: 20px; /* Increase the font size to make the text bigger */
    padding: 15px 30px; /* Increase padding to make the button bigger */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 30px; /* Move the button lower by adding margin at the top */
}

.task-btn:hover {
    background-color: #1c551f;
}

/* General modal overlay */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4); /* Black background with transparency */
    padding-top: 10%; /* Adjusted to center the modal more vertically */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto; /* Center the modal horizontally */
    padding: 20px;
    border: 1px solid #888;
    width: 50%; /* Set the width of the modal */
    max-width: 600px; /* Max width to prevent it from being too wide */
    border-radius: 10px; /* Optional: rounded corners for a more modern look */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Optional: add a shadow effect for better visibility */
}

/* Close Button */
.close {
    color: #f50404;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Wi-Fi Button (visible by default) */
.wifi-container {
    position: relative;
}

/* Wi-Fi Button (visible by default) */
#wifi-button {
    position: absolute; /* Position the button relative to .desktop-container */
    bottom: 40px; /* Distance from the bottom of the container */
    right: 400px; /* Distance from the right of the container */
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent background */
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 30px; /* Adjust size of the icon */
    cursor: pointer;
    z-index: 900; /* Ensure the button is above other content */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

#wifi-button:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Change background on hover */
}

#wifi-button:focus {
    outline: none; /* Remove outline on focus for cleaner appearance */
}

/* Wi-Fi Network Dropdown */
.wifi-dropdown {
    display: none; /* Hide by default */
    position: absolute;
    bottom: 60px; /* Place dropdown above the button */
    left: 690px; /* Align with the button */
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    width: 200px;
    z-index: 999; /* Ensure it's above other content */
}

.wifi-dropdown button {
    padding: 10px;
    background: #fff;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
    width: 100%;
}

.wifi-dropdown button:hover {
    background-color: #12e912;
}

.wifi-dropdown button:last-child {
    border-bottom: none; /* Remove border on last item */
}

/* Hidden class to hide Wi-Fi dropdown when the modal is shown */
.wifi-button.hidden {
    display: none;
}

#wifi1,
#wifi2,
#wifi3 {
    display: none;
    position: fixed;
    background-color: #fefefe;
    margin: auto; /* Center the modal horizontally */
    padding: 20px;
    border: 1px solid #888;
    width: 50%; /* Set the width of the modal */
    max-width: 600px; /* Max width to prevent it from being too wide */
    border-radius: 10px; /* Optional: rounded corners for a more modern look */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Optional: add a shadow effect for better visibility */
}
/*Task2.email diasin*/
#inbox {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;  /* Align left to simulate email box structure */
    min-width: 45vw;
    height: 80vh;
    margin-top: 50px;  /* Reduced margin for a more compact layout */
    background-color: #f4f6f9;  /* Soft background color for better contrast */
    padding: 20px 30px;  /* Padding adjusted to give the inbox more breathing space */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);  /* Soft shadow to give depth */
    overflow-y: auto;  /* Allows scrolling if emails exceed available space */
}

#inboxTitle {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

.email {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 10px;
    height: 50px;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 6px;  /* Slightly rounded edges for emails */
    transition: background-color 0.3s ease, transform 0.2s ease;
    color: #333;  /* Darker text color for better readability */
}

.email:hover {
    background-color: #f5f5f5;  /* Light gray background on hover */
    transform: translateX(5px);  /* Slight right shift on hover to simulate interaction */
}

.email .email-sender,
.email .email-topic {
    flex-grow: 1;
    font-size: 16px;
    font-weight: 500;
    padding-right: 10px;
}

.email .email-sender {
    color: #5a5a5a;
    font-size: 14px;  /* Slightly smaller sender text for distinction */
}

.email .email-topic {
    font-weight: bold;
    color: #2d2d2d;
}

.deleteEmailButton {
    color: #df0a0a;
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    padding: 5px 10px;
    transition: color 0.2s ease;
}

.deleteEmailButton:hover {
    color: #b30a0a;  /* Darker red for delete button hover */
    text-decoration: underline;
}

/* Styling the email labels for "From" and "Subject" */
.email-label {
    font-weight: bold;
    color: #888;
}

.email-text {
    color: #333;
}

/* Add a separator line between the email list and the header */
.email-header {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #444;
}

/* Panga disain*/
.main-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;  /* Align left to simulate email box structure */
    min-width: 45vw;
    height: 80vh;
    margin-top: 50px;  /* Reduced margin for a more compact layout */
    background-color: #f4f6f9;  /* Soft background color for better contrast */
    padding: 20px 30px;  /* Padding adjusted to give the inbox more breathing space */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);  /* Soft shadow to give depth */
    overflow-y: auto;  /* Allows scrolling if emails exceed available space */
}

.hidden {
    display: none;
}
.message {
    margin-top: 20px;
    padding: 10px;
    border-radius: 5px;
}
.safe {
    background-color: lightgreen;
    color: black;
}
.warning {
    background-color: lightcoral;
    color: black;
}
.search-result {
    text-align: left;
    margin: 15px 0;
    font-size: 40px;
}
.search-result a {
    color: #0458df;
    font-size: 20px;
}
.search-result p {
    font-size: 10px;
    color: #0d0d0e;
}
.bank-container {
    width: 400px; /* Set the width of the container */
    height: 500px; /* Optionally, set a fixed height */
    margin: 20px auto; /* Horizontally center and add margin on top and bottom */
    background: white;
    max-width: 400px;
    margin: auto;
    background: white;
    color: black;
    padding: 20px;
    border-radius: 8px;
    display: center;
     
}
.bank-container input {
    width: 90%;
    padding: 8px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.bank-container button {
    background: orange;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
}

.login-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: relative;
}