.bar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #140a2c;
    text-align: center;
    border-style: solid;
    border-width: 1px;
    border-color: #140a2c;
    z-index: 1;
}

@import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cabin+Sketch&display=swap');
* {
    font-family: 'Neucha', cursive;
    /* font-family: 'Cabin Sketch', cursive; */
}

body {
    margin: 0;
    padding: 0;
    color: white;
    min-height: 100%;
    background-color: #14081a;
    background-image: linear-gradient(147deg, #732e8f 0%, #4e2161 21%, #431c53 32%, #321441 52%, #14081a 89%);
    overflow: auto;
    background-attachment: fixed;
    background-size: cover;
    background-position: left bottom;
}

.main {
    background-image: url('049d7634b324eabfcc231d60da63ce3e.gif');
}

.upload {
    background-image: /* top, transparent black, faked with gradient */
    linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), /* bottom, image */
    url('bg1.gif');
}

.banner-logo {
    float: left;
}

div.bar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

div.bar ul li {
    margin: 0;
    padding: 0px 5px 0px 5px;
    float: right;
    height: 28px;
    line-height: 28px;
    text-align: center;
}

div.bar ul a:link {
    margin: 0;
    padding: .3em .4em .3em .4em;
    text-decoration: none;
    font-weight: bold;
    font-size: large;
    color: #FFFFFF;
}

div.bar ul a:visited {
    margin: 0;
    padding: .3em .4em .3em .4em;
    text-decoration: none;
    font-weight: bold;
    font-size: large;
    color: #FFFFFF;
}

div.bar ul a:active {
    margin: 0;
    padding: .3em .4em .3em .4em;
    text-decoration: none;
    font-weight: bold;
    font-size: large;
    color: #FFFFFF;
}

div.bar ul a:hover {
    margin: 0;
    padding: .4em .4em .4em .4em;
    text-decoration: none;
    font-weight: bold;
    font-size: large;
    color: #FFFFFF;
    background-color: #331c68;
}

.center {
    text-align: center;
    display: block;
    margin: 15px auto 0;
}

.card {
    background-color: rgba(255, 255, 255, 0.6)!important;
}

.megubox-logo {
    width: 55% !important;
    height: auto;
}

@media only screen and (max-width: 600px) {
    .megubox-logo {
        width: 100% !important;
    }
}

.main-box {
    border: 2px solid #b1a3ff;
    background-color: rgba(255, 255, 255, 0.3) !important;
    width: 100%;
    padding-top: 20px;
    padding: 50px
}
.mail {
    color: #b1a3ff;
}
.mail:hover {
    color: #cfc7fd;
}
.mail:visited {
    color: #b1a3ff;
}
.display-4, .display-5, .display-3 {
    color: white;
    font-family: "Cabin Sketch", cursive;
}

.stars {
    width: 11%;
}

.night {
    z-index: -100;
    top: 10%;
    position: fixed;
}

.lead-site {
    color: white;
    font-family: "Neucha", cursive;
    font-size: 120%;
    padding-bottom: 10px;
}

.sub-site {}

hr {
    border-top: 1px solid white !important;
}

.shape {
    border-radius: 555px 25px 15px 25px/25px 5px 35px 555px !important;
}

.invite-button {
    font-size: 20px !important;
    padding: 10px !important;
}
.code-request {
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    letter-spacing: 2px;
    background-color: #8d83c9;
}
table, th, td {
    border: 1px solid #8d83c9;
    text-align: center;
}
td {
    padding: 6px;
}
.donate-box {
    display: inline-block;
    padding: 1rem;
    border: 2px solid #b1a3ff;
    width: 100%;
    border-radius: 6px;
    margin-bottom: 1rem;
}
.donate-box .name {
    font-size: 120%;
    font-weight: bold;
}
.donate-box .message {
    font-size: 100%;
}
.donate-box .amount {
    font-size: 100%;
}
.donate-box .date {
    font-size: 75%;
}
.donate-box .method {
    font-size: 75%;
}
.donate-box br {
    clear: both;
}
.right{
    float:right;
}

.left{
    float:left;
}