body 
{
    background-color: skyblue;
}
/* previous background:  background-color: #707070; */

/*dark box*/

.container-box {
    background-color: #2c3e50; /* Darker blue */
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    margin: 40px auto;
    max-width: 900px;
    padding: 40px;
    border: 2px solid #34495e;
}

.homepage-title {
    font-size: 40px;
    font-family: 'Ubuntu', sans-serif;
    color:white;
    text-align: center;
    margin-top: 40px;
}

.homepage-buttons-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-top: 40px;
}

.homepage-buttons-wrapper .buttons {
    width: auto;
    margin-left: 0;
    min-width: 140px;
    width: 40%;
}

#title 
{
    font-size: 40px;
    width: 100%;
    margin: 2% 0%;
    text-align: center;
    font-family: 'Ubuntu', sans-serif;
    color: #FFFFFF;
}

#loginDiv
{
    font-size: 30px;
    width: 70%;
    margin: 25px auto;
    padding: 25px;
}

#loggedInDiv
{
    font-size: 30px;
    width: 70%;
    margin-left: 15%;
    padding: 25px;
}

#accessUIDiv
{
    font-size: 30px;
    width: 70%;
    margin-left: 15%;
    padding: 25px;
    /* background-color: #b2b2b2; */
}

.buttons
{
    font-size: 30px;
    border-radius: 25px;
    width: 50%;
    margin-left: 25%;
    font-family: 'Ubuntu', sans-serif;
    cursor: pointer;
}

.buttons:hover{
    background-color: #00d5124f;
    color: #FFFFFF;
    opacity: 50%;
}

#loginName
{
	font-size: 30px;
}
#loginPassword
{
	font-size: 30px;
}
#searchText
{
	font-size: 30px;
}
#colorText
{
	font-size: 30px;
}

input[type="text"],input[type="password"]{
    border-radius: 25px;
    text-align: center;
    width: 80%;
    margin-left: 10%;
    margin-bottom: 2%;
    font-family: 'Ubuntu', sans-serif;
}

#inner-title{
    display: inline-block;
    font-size: 0.8em;
    width: 90%;
    text-align: center;
    margin-left: 5%;
    margin-bottom: 2%;
    font-family: 'Ubuntu', sans-serif;
    /*chnaged from red to white*/
    color: white;
}

#loginResult{
    display: inline-block;
    font-size: 0.8em;
    width: 90%;
    text-align: center;
    margin-left: 5%;
    margin-bottom: 2%;
    font-family: 'Ubuntu', sans-serif;
    color: #95060a;
}

#userName{
    display: inline-block;
    width: 80%;
    margin-left: 10%;
    text-align: center;
}

#logoutButton{
    width: 20%;
    margin-left: 40%;
}

select{
    width: 30%;
    margin-left: 35%;
    margin-top: 2%;
    font-size: 0.75em;
    font-family: 'Ubuntu', sans-serif;
}

#colorSearchResult{
    display: none;
}

#colorAddResult{
    display: inline-block;
    font-size: 0.8em;
    width: 90%;
    text-align: center;
    margin-left: 5%;
    margin-top: 2%;
    margin-bottom: 1%;
    font-family: 'Ubuntu', sans-serif;
    color: #95060a;
}

/* CSS for logging in */


#firstname
{
	font-size: 30px;
}
#lastname
{
	font-size: 30px;
}

#email
{
    font-size: 30px;
}

#phone-number
{
  font-size: 30px;
}

#registerResult{
    display: inline-block;
    font-size: 0.8em;
    width: 90%;
    text-align: center;
    margin-left: 5%;
    margin-bottom: 2%;
    font-family: 'Ubuntu', sans-serif;
    color: #95060a;
}

.grid-container {
    display: flex;
    gap: 10px;
    width: 80%; 
    margin-left: 10%; 
    margin-bottom: 2%;
}

.grid-container input[type="text"] {
    width: 100%; 
    margin-left: 0; 
    flex: 1; 
}

#add-contact{
     display: inline-block;
    font-size: 0.8em;
    width: 90%;
    text-align: center;
    margin-left: 5%;
    margin-bottom: 2%;
    font-family: 'Ubuntu', sans-serif;
    color: pink;
}

#link-logout-homepage{
     width: 20%;
    
}

#link-to-add-page{
    width: 20%;
    
}

.buttons-for-homepage{
      font-size: 30px;
    border-radius: 25px;
    flex: 1;
    font-family: 'Ubuntu', sans-serif;
    cursor: pointer;
    border: 2px outset #ccc;
    padding: 10px 20px;
}

.buttons-for-homepage:hover {
    background-color: #00d5124f;
    color: #FFFFFF;
    opacity: 50%;
}
   /* Contact Card */
    .contact-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 80%;
      margin: 20px auto;
      padding: 20px;
      background-color: #f0f0f0;
      border: 2px solid #ccc;
      border-radius: 15px;
      font-family: 'Ubuntu', sans-serif;
    }

    .contact-info {
      flex-grow: 1;
    }

    .contact-name {
      font-size: 24px;
      margin-bottom: 8px;
      color: #333;
      font-family: 'Ubuntu', sans-serif;
    }

    .contact-details {
      font-size: 16px;
      color: #666;
      line-height: 1.4;
      font-family: 'Ubuntu', sans-serif;
    }

    .contact-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .action-btn {
      display: inline-block;
      text-decoration: none;
      font-size: 16px;
      border-radius: 20px;
      padding: 10px 20px;
      font-family: 'Ubuntu', sans-serif;
      text-align: center;
      min-width: 80px;
      color: white;
    }

    .edit-btn {
      background-color: #4CAF50;
    }

    .edit-btn:hover {
      background-color: #45a049;
    }

    .delete-btn {
      background-color: #f44336;
      border-radius: 20px;
      color: white;
      cursor: pointer;
      border: none;
      font-family: 'Ubuntu' , sans-serif;
      font-size: 16px;
      display: inline-block;

    }

    .delete-btn:hover {
      background-color: #da190b;
    }

    /* Edit/Delete Forms (Hidden by default) */
    .edit-form,
    .delete-confirmation {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: white;
      padding: 30px;
      border-radius: 15px;
      border: 3px solid #ccc;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      z-index: 1000;
      font-family: 'Ubuntu', sans-serif;
      min-width: 300px;
    }

    /* Show forms when targeted */
    .edit-form:target,
    .delete-confirmation:target {
      display: block;
    }

    .edit-form h3,
    .delete-confirmation h3 {
      margin-top: 0;
      color: #333;
      text-align: center;
      font-family: 'Ubuntu', sans-serif;
    }

    .edit-form label {
      display: block;
      margin: 15px 0 5px;
      font-weight: bold;
      color: #333;
      font-family: 'Ubuntu', sans-serif;
    }

    .edit-form input[type="text"] {
      width: 90%;
      padding: 10px;
      border: 2px solid #ccc;
      border-radius: 10px;
      font-size: 16px;
      margin-bottom: 10px;
      font-family: 'Ubuntu', sans-serif;
    }

    .delete-confirmation p {
      font-family: 'Ubuntu', sans-serif;
      text-align: center;
      font-size: 16px;
      color: #333;
    }

    .form-buttons {
      text-align: center;
      margin-top: 20px;
      display: flex;
      gap: 15px;
      justify-content: center;
    }

    .save-btn {
      background-color: #4CAF50;
      color: white;
      border: none;
      padding: 12px 25px;
      border-radius: 20px;
      cursor: pointer;
      font-family: 'Ubuntu', sans-serif;
      font-size: 16px;
    }

    .save-btn:hover {
      background-color: #45a049;
    }

    .cancel-btn {
      background-color: #f44336;
      color: white;
      text-decoration: none;
      padding: 12px 25px;
      border-radius: 20px;
      font-family: 'Ubuntu', sans-serif;
      font-size: 16px;
      display: inline-block;
    }

    .cancel-btn:hover {
      background-color: #da190b;
    }

    /* Backdrop */
    .edit-form:target::before,
    .delete-confirmation:target::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: -1;
    }