:root {
    --main-bg-color: #1b0c7a;
    --main-card-color: #45159e;
    --secondary-card-color: #f216c2;
    --main-accent-color: #1b0c7a;
    --secondary-accent-color: #f216c2;
  }

* {  
    font-family: Verdana, sans-serif !important;
    color: white;
}

body {
    background-color: var(--main-bg-color);
    background-size: 25%;
    background-repeat: repeat;
}

tbody tr:nth-child(odd){
    background: var(--secondary-card-color) !important;
}

tbody tr:nth-child(even){
    background: var(--main-card-color) !important;
}

tbody td {
    border-top: 1px solid #122d16 !important;
}

thead th {
    border-bottom: 1px solid #122d16 !important;
}

.well {
    background: var(--main-card-color) !important;
    border-color: var(--secondary-card-color) !important;
}

.navbar {
    background: var(--main-accent-color) !important;
    border-radius: 0 0 4px 4px;
    border-color: #645918 !important;
}

a {
    color: var(--secondary-accent-color) !important;
}

.btn-primary {
    background-color: var(--main-accent-color) !important;
    border-color: var(--secondary-accent-color) !important;
    color: white !important;
}

.navbar a {
    color: white !important;
}

#announcementBanner {
    animation: append-animate .2s ease-in-out;
    background: var(--secondary-card-color);
    width: 100%;
}

#announcementBanner h1 {
    color: var(--main-accent-color);
    text-align: center;
    padding-bottom: 1.5%;
    padding-top: 1%;
}

#infoBar {
    overflow: hidden;
    width: 45%;
}

.card, #cardcontainer {
    text-align: center;
    margin: 5% 5% 5% 5%;
    background: var(--main-card-color);
}

#contactTable {
    text-align: center;
    background: var(--main-card-color);
}


#game {
    background: lightgray;
}


#contactTable a, #contactTableFullScreen a, #currentMembers a {
    color: white !important;
}

.img-responsive {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@keyframes append-animate {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;	
	}
}