html{
    font-size: 18px;
}
body {
    margin: 0;
    background-color: rgb(140, 219, 133);
}

.container{
    width: 100%;
  max-width: 1920px;
  padding: .33rem;
  box-sizing: border-box;
}

/* 1. The Main Header Bar */
.navigation-header {
    display: grid;                /* Turns the header into a Flexbox row */
    grid-template-columns: 1fr auto 1fr;
    /*justify-content: space-between;/* Pushes logo to the left, nav links to the right */
    align-items: center;         /* Vertically centers items inside the header bar */
    background-color: #1e293b;   /* Dark background for the header bar */
    padding: 12px 30px;          /* Inner spacing (top/bottom, left/right) */
    border-bottom: 2px solid #334155;
}
.nav-center{
    display: flex;
    gap:20px;
    justify-content:center;
}
.nav-left{
    display:flex;
    justify-content:flex-start;
    gap:20px
}
.nav-right{
    display:flex;
    justify-content:right;
    gap:20px
}
.buttonPink {
  display: inline-block;
    padding: 12px 24px;
    background-color: #f166cf;  /* Dark button background */
    color: #0a0909;             /* Text color */
    text-decoration: none;      /* Removes the default underline */
    border-radius: 8px;         /* Rounded corners */
    font-weight: bold;
    transition: background 0.3s ease, transform 0.1s ease; /* Smooth hover transition */ 
    

}
.buttonPink:hover{background-color:#a82d67;}

.buttonHeader {
    display: inline-block;
     padding: 12px 24px;
        background-color: #273897;  /* Dark button background */
        color: #fffbfb;             /* Text color */
        text-decoration: none;      /* Removes the default underline */
        font-weight: bold;
        border-radius: 10px;
        font-size: 1.1rem;
        font-weight: 600;
}

.buttonMainPage {
    display: inline-block;
     padding: 12px 24px;
        background-color: #972727;  /* Dark button background */
        color: #fffbfb;             /* Text color */
        text-decoration: none;      /* Removes the default underline */
        border-radius: 10px;         /* Rounded corners */
        font-weight: bold;
        font-size: 1.1rem;
        
}
.buttonHeader:hover {
    background-color: #374151;
    border-color: #4b5563;
}

.buttonMainPage:hover{
    background-color: #3a0e0e;
    border-color: #4b5563;
}


.loginSection {
    display: inline-block;
     padding: 12px 24px;
        background-color: #d8b6b6;
        color: #fffbfb;             /* Text color */
        text-decoration: none;      /* Removes the default underline */
        border-radius: 10px;         /* Rounded corners */
        font-weight: bold;
        font-size: 1.1rem;
        
}
.contactMeButton{
    display: inline-block;
     padding: 12px 24px;
        background-color: #972727;  /* Dark button background */
        color: #fffbfb;             /* Text color */
        text-decoration: none;      /* Removes the default underline */
        border-radius: 10px;         /* Rounded corners */
        font-weight: bold;
        font-size: 1.1rem; 
}
.contactMeButton:hover{
    background-color: #3a0e0e;
    border-color: #4b5563;
}
.userLogin{
    width:100px;
    max-width:200px;
}

.basicText{
    margin-top:0px; /*Can change back, but right now the um padding in the container class does this instead */
    margin-left:45px;
    margin-right:40px;
    margin-bottom:0px;

}
.headerOne{
    margin-left:10px;
}

.headerThree{
    margin-left:20px;
    margin-bottom:0px;
}