﻿.nav_donate { color: white !important; background: var(--titletext) !important;}
body { 
    background-image: url(/assets/images/background_tileable_blue.png);
    background-repeat: repeat;
        background-size: 164px !important;

}

h1 { color: var(--titletext); margin-top: 0px;}

.logo { background: black !important; filter: invert(1) !important;}
.container {display: flex; gap: 30px; height: 800px; width: fit-content; margin: auto auto 300px auto; margin-top: 220px;}
.container img {height: auto; border-radius: 15px; width: 49%; object-fit: cover;}
.container form {width: 450px; background: white; border-radius: 15px; padding: 15px;}

.container form div div {display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-bottom: 30px;}
.container form div:nth-child(2n+3) {display: flex;}

form { display: flex; flex-direction: column; height: auto;}

.donate_label {
    display: block;
    width: 180px;
    height: 40px;
    border: 2px solid #4590FF;
    backdrop-filter: blur(10px);
    text-align: center; 
    font-size: 18px;
    line-height: 40px;
    vertical-align: central;
    border-radius: 15px;
    font-weight: bold;

}
input[type=checkbox]+label {
  color: var(--titletext);
  user-select: none;
  cursor: pointer;
  background: white;
  transition: 0.2s;
}

input[type=checkbox]:checked+label {
  user-select: none;
  cursor: pointer;
  transition: 0.2s;
  color: white;
  background: #4590FF;
}
input[type=number]::placeholder { font-weight: normal; }
input[type=number] {
    width: 100%;
    text-indent: 15px;
    height: 45px;
    font-weight: bold;
    background: rgba(245, 245, 245, 0.25);
    border: 1px solid #C2C2C2;
    border-radius: 15px;
}
button {
    padding: 16px 10px;
    margin-top: 25px;
    gap: 10px;
    width: 100%;
    border: none;
    cursor: pointer;
    height: 45px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    line-height: 50%;
    background: #4590FF;
    border-radius: 15px;
}

@media (max-width: 1260px) {
    .container img { display: none;}
    input[type=number] { text-indent: 15px; }
    .container form  {width: 70%; margin: auto;}
    .container { margin-top: 200px;}
}
@media (max-width: 705px) {
    .container { margin-top: 150px;}
}
@media (max-width: 505px) {
    .container { margin-top: 100px;}
}