body.Index-Page{
    min-height: 100vh;
    width: 100%;
    overflow-y: hidden;
    background-image: url(Images/HomeImage.jpg);
    background-size: cover;
    background-repeat: no-repeat;

}

body.Donate-Page{
    min-height: 100vh;
    width: 100%;
    overflow-y: hidden;
    background-image: url(Images/DonationImage.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

body.Signup-Page{
    min-height: 100vh;
    width: 100%;
    overflow-y: hidden;
    background-image: url(Images/SignUpImage.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

body.Signin-Page{
    min-height: 100vh;
    width: 100%;
    overflow-y: hidden;
    background-image: url(Images/SignInImage.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

body.WeatherRain{
    min-height: 100vh;
    width: 100%;
    overflow-y: hidden;
    background-image: url(Images/RainImage.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

body.WeatherSunny{
    min-height: 100vh;
    width: 100%;
    overflow-y: hidden;
    background-image: url(Images/SunnyImage.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

body.WeatherSnow{
    min-height: 100vh;
    width: 100%;
    overflow-y: hidden;
    background-image: url(Images/SnowImage.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

body.WeatherNone{
    min-height: 100vh;
    width: 100%;
    overflow-y: hidden;
    background-image: url(Images/WeatherImage.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.Logo {
    width:60px; 
    padding-right: 15px;
}

.Banner {
    max-width: 100%;
    filter: brightness(0.65);
}

 .SettingsDropdown{
    background-color: #194F4E !important;
 }

.ProfilePicture {
    width: 25%;
    padding-right: 15px;
}

.Username {
    width: fit-content;
    padding-left: 10px;
}
.SettingsIcon {
    height: 30px;
}

.dropdown-menu {
    width: 300px !important;
    height: 400px !important;
}

.dropstart {
    position: relative !important;
    left: 150% !important;
}

.Center {
    display: grid !important;
    place-items: center !important;
}

.Label {
    color: white;
}

.ProfileForm {
    align-content: center;
}

.btn-primary {
    align-self: center;
    background-color: #283622 !important;
    border: none !important;
}

.Signika {
  font-family: "Signika", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  font-variation-settings:
    "GRAD" 0;
}
.NavHead {
    background-color: #C0DFA1
}

.NavActive {
    color: #374A2F;
    font-weight: bold;
    font-size: larger;
    text-decoration: none;
    border: 0;
    padding-right: 30px;
}

.NavItem {
    color: #ffffff; 
    font-weight: bold;
    font-size: larger;
    text-decoration: none;
    padding-right: 30px;
}

.ProfileText {
    color: #ffffff; 
    text-decoration: none;
}

.LogOutBackground {
    background-color: crimson;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 3px;
}

.LogOutButton{
    position: relative;
    top: 111px;
    display: grid;
    place-items: center ;
    text-decoration: none;
    color: #ffffff; 
    font-weight: bold;
    font-size: larger;
}

.NavItem:hover {
    color: #f7f2f2;
}
.NavActive:hover{
    color: #283622;
}

.DonateBox {
    background-color: #C0DFA1;
    width: 500px;
    height: 600px;
    padding-left: 10px;
    padding-right: 10px;
    margin: 20px;
    /* align-content: center; */
    position: relative;
    top: 150px;
    left: 50px;
    border-radius: 5px;
}

.HomeBox {
    background-color: #C0DFA1;
    width: 500px;
    height: 200px;
    padding-left: 10px;
    padding-right: 10px;
    margin: 20px;
    /* align-content: center; */
    position: relative;
    top: 250px;
    left: 50px;
    border-radius: 5px;
}

.HomeText {
    margin-top: 30px;
}

.DonateBox2 {
    background-color: #C0DFA1;
    width: 500px;
    height: 600px;
    padding-left: 10px;
    padding-right: 10px;
    margin: 20px;
    /* align-content: center; */
    position: relative;
    top: 150px;
    left: 1200px;
    border-radius: 5px;
}

.CVVEntry {
    width: 30%;
}

.DonationButtons {
    align-content: center;
    width: 80px;
    height: 40px;
    margin-top: 50px;
    margin-left: 30px;
    margin-right: 20px;
    background-color: #ABD482;
    border: #A0CC8A;
    border-radius: 5px;
    display:inline-block;
}

input[type="radio"] {
    display: inline;
    margin-left: 0px !important;
    background-color: #A0CC8A;
    color: #A0CC8A;
    accent-color: #A0CC8A;
}

.SubmitButton {
    width: 200px;
    height: 40px;
    background-color: #ABD482 !important;
    position: relative;
    top: 120px;
    left: 100px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.MainHeader {
    color: black;
    position: relative;
    left: 650px;
    bottom: 70px;
    width: 500px;
}

.MainBody  {
    position: relative;
    left: 650px;
    bottom: 70px;
    width: 850px;
    background-color: rgba(255, 255, 255, 0.25);
}

.DonationInput {
    width: 220px;
    position: relative;
    top: 30px;
}

.WeatherIcon {
    width: 50px !important;
    background-color: #283622;
}