@font-face {
    font-family: 'Lemon/Milk Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Lemon/Milk Regular'), url('LemonMilk.woff') format('woff');
}

@font-face {
    font-family: 'Lemon/Milk Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Lemon/Milk Bold'), url('LemonMilkbold.woff') format('woff');
}

* {
	box-sizing: border-box;
}

body, html {
	font-family: 'Lemon/Milk Bold', sans-serif;
	height: 100%;
	margin: 0;
	-ms-overflow-style: none;
    scrollbar-width: none !important;
}

::-webkit-scrollbar {
    display: none;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: 1.5px;
}

p, #wrapper li, ol, .section--content ul {
    font-family: 'Roboto', sans-serif;
}

#wrapper {
	max-width: 800px;
	padding: 25px 0;
	margin: auto;
}

#main {
	padding-bottom: 2rem;
}

.redtitle {
    color: #db2b39;
    font-size: 2em;
    letter-spacing: 1.5px;
}

.subtitle {
    font-family: 'Lemon/Milk Regular', sans-serif;
    font-size: 1.2em;
    font-weight: 400;
    letter-spacing: 1.5px;
}

hr {
	margin: auto;
	width: 40%;
}

header {
    overflow: hidden;
    position: fixed;
    background-color: #eee;
    padding: 5px 16px 5px 25px;
    display: table;
    width: 100%;
    height: 60px;
    z-index: 99;
}

video {
    min-height: 100%;
    min-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

nav {
    padding: 0;
}

nav #logo {
    float: left;
}

nav, #logo {
    vertical-align: middle;
    display: table-cell;
}

nav ul {
    text-align: right;
    margin: 0;
}

nav ul li {
    display: inline-block;
    vertical-align: middle;
    /*padding: 7px 16px;*/
}

nav ul li a {
    color: #db2b39;
    font-size: 13px;
	letter-spacing: 0.1rem;
    text-decoration: none;
    /* padding: 10px 16px; */
	margin-left: 0.2rem;
	border-radius: 0.2rem;
    transition: 0.3s;
}

nav ul li i {
	font-size: 24px;
}

nav ul li a:hover {
    /* background-color: #db2b39; */
    color: #262626;
    transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

nav .icon {
    display: none;
}

.homepage-video {
    position: relative;
    height: 100vh;
    overflow: hidden;
    z-index: 0;
}

.homepage-text {
    position: relative;
    max-width: 900px;
	padding: 4rem;
    /* margin: auto; */
    top: 50%;
    transform: translate(0, -50%);
    z-index: 1;
    text-align: left;
}

.homepage-text h1 {
	font-size: 3rem;
	color: #eee;
	letter-spacing: 0.2rem;
}

.landing {
	position: relative;
	background-image: url("images/biggerimg.png");
	height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #eee;
}

.middle {
	position: absolute;
	/*top: 47%;*/
	left: 50%;
    transform: translate(-50%, -50%);
	text-align: center;
}

.middle img {
	width: 150px;
}

.centre-text {
	text-align: center;
}

.head-pad {
	margin: 60px 0 0 0;
}

.dark i {
	font-size: 1.2rem;
}

.dark button {
	font-family: 'Lemon/Milk Regular', sans-serif;
	letter-spacing: 0.07rem;
	background-color: #eee;
	font-size: 1em;
	color: #db2b39;
	padding: 0.6rem 1.4rem;
    margin-bottom: 5px;
	border: none;
	border-radius: 0.2rem;
	transition: 0.3s;
	cursor: pointer;
}

.dark button:hover {
	background-color: #db2b39;
	color: #eee;
	transform: translateY(-3px);
	box-shadow: 0 6px 11px 0 rgba(0, 0, 0, 0.2);
	transition: 0.3s;
}

.cta-button {
    font-family: 'Lemon/Milk Regular', sans-serif;
	letter-spacing: 0.07rem;
	background-color: #db2b39;
	font-size: 1em;
	color: #eee;
	padding: 0.7rem 1.8rem;
    margin-bottom: 5px;
	border: none;
	border-radius: 0.2rem;
	transition: 0.3s;
	cursor: pointer;
}

.tab-button {
	display: inline-block;
    font-family: 'Lemon/Milk Regular', sans-serif;
	letter-spacing: 0.07rem;
	background-color: #db2b39;
	font-size: 0.7em;
	color: #eee;
	padding: 0.5rem 1.2rem;
	margin-bottom: 5px;
	border: none;
	border-radius: 0.2rem;
	transition: 0.3s;
	cursor: pointer;
}

.cta-button:hover, .tab-button:hover {
	transform: translateY(-3px);
	transition: 0.3s;
}

.cta-button:hover, .tab-button:hover, .tablinks.tab-button.active {
	background-color: #eee;
	color: #db2b39;
	box-shadow: 0 6px 11px 0 rgba(0, 0, 0, 0.2);
}

.slider {
	position: relative;
	padding: 50px 0;
}

.slider .slider-title {
	color: #db2b39;
	text-align: center;
}

.slider .post {
	width: 250px;
	height: auto;
	margin: 20px;
	opacity: 75%;
	display: inline-block;
	background: #db2b39;
	transition: 0.5s;
}

.slider .post:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	opacity: 100%;
	transition: 0.5s;
}

.slider .post .slider-image {
	width: 100%;
}

#snackbar {
    visibility: hidden;
    min-width: 220px;
    /*margin-left: -125px;*/
	font-family: 'Lemon/Milk Regular', sans-serif;
	letter-spacing: 0.07rem;
    margin: auto;
    background-color: #191919;
	border-radius: 0.2rem;
    color: #eee;
    text-align: center;
    padding: 0.7rem 1.5rem;
    position: fixed;
    z-index: 1;
    left: 50%;
    transform: translate(-50%, -50%);
    bottom: 32px;
    font-size: 14px;
}

#snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 32px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 32px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 32px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 32px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

.dark {
	background-color: #191919;
	background-image: linear-gradient(to right, #191919, #262626);
	color: white;
	padding: 50px;
}

.remove-padding {
	padding-top: 0px;
}

.row-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 3rem;
}

.row-container div img {
	width: 100%;
}

#wrapper h1, .section--flex-50 h1, .section--content h1 {
	font-family: 'Lemon/Milk Bold', sans-serif;
	margin-top: 10px;
    font-size: 2em;
    color: #db2b39;
}

#wrapper p, #wrapper li, .section--flex-50 p, .section--content p, .section--content li {
    color: #777;
    font-size: 1.2em;
    font-weight: 400;
}

.section--content li {
	padding-bottom: 0.6rem;
}

.tab {
	position: sticky;
	top: 0.2rem;
	padding-top: 10px;
	padding-bottom: 5px;
	margin: 0 auto 2rem auto;
	border-radius: 0.2rem;
	z-index: 99;
}

.tab > div {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
}

.tabcontent {
	display: none;
	margin: auto;
	padding-top: 4rem;
	-webkit-animation: fadeEffect 0.5s;
	animation: fadeEffect 0.5s;
}

@-webkit-keyframes fadeEffect {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes fadeEffect {
	from { opacity: 0; }
	to { opacity: 1; }
}

.tabcontent, .tab {
	max-width: 780px;
	padding-left: 25px;
	padding-right: 25px;
}

.section--content img {
	width: 100%;
	border-radius: 0.2rem;
	filter: sepia(30%);
}

.section--content div {
	padding-top: 1.5rem;
	padding-bottom: 5rem;
}

.section--flex-50 i, .section--content i {
    color: #db2b39;
}

.section--flex-50 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.section--flex-50 > div {
	flex: 50%;
	padding: 50px;
}

.section--flex-50 > div:last-child {
	text-align: right;
	background-position: right;
}

.about, .claims, .currency, .discord, .donations {
	height: 100vh;
	background-repeat: no-repeat;
	background-size: cover;
}

/* FOOTER STUFF */
.footer-distributed {
	background-color: #191919;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	width: 100%;
	font: bold 16px sans-serif;
	text-align: left;
	margin-top: 5rem;
	padding: 50px 60px 40px;
	overflow: hidden;
}

/* Footer Left */
.footer-distributed .footer-left {
	float: left;
}

/* Footer Page Links */
.footer-distributed .footer-links {
	color:  #ffffff;
	margin: 0 0 10px;
	padding: 0;
}

.footer-distributed .footer-links a {
	display:inline-block;
	line-height: 1.8;
	text-decoration: none;
	color:  inherit;
}

.footer-distributed .footer-company-name {
	color:  #8f9296;
	font-size: 14px;
	font-weight: normal;
	margin: 0;
}

/* Footer Right */
.footer-distributed .footer-right {
	float: right;
}

.footer-distributed .footer-right p {
	display: inline-block;
	vertical-align: top;
	margin: 15px 42px 0 0;
	color: white;
}

/* Contact Form */
.footer-distributed form {
	display: inline-block;
}

.footer-distributed form input, .footer-distributed form textarea {
	display: block;
	box-sizing: border-box;
	background-color:  #2a2b2e;
	border: none;
	border-radius: 0.2rem;
	resize: none;

	font: inherit;
	font-size: 14px;
	font-weight: normal;
	color:  #d1d2d2;

	width: 400px;
	padding: 18px;
}

.footer-distributed ::-webkit-input-placeholder {
	color:  #5c666b;
}

.footer-distributed ::-moz-placeholder {
	color:  #5c666b;
	opacity: 1;
}

.footer-distributed :-ms-input-placeholder {
	color:  #5c666b;
}


.footer-distributed form input {
	border: 1px solid #262626;
	height: 35px;
	margin-bottom: 10px;
}

.footer-distributed form textarea {
	border: 1px solid #262626;
	height: 70px;
	margin-bottom: 15px;
}

.footer-distributed form button {
	font-family: 'Lemon/Milk Regular', sans-serif;
	letter-spacing: 0.08rem;
	background-color: #db2b39;
	float: right;
	color: #eee;
	padding: 0.7rem 1.5rem;
	border: none;
	border-radius: 0.2rem;
	transition: 0.3s;
	cursor: pointer;
}

.footer-distributed form button:hover {
	background-color: #eee;
	color: #db2b39;
	box-shadow: 0 6px 11px 0 rgba(0, 0, 0, 0.2);
	transform: translateY(-3px);
	transition: 0.3s;
}

/* If you don't want the footer to be responsive, remove these media queries */

@media (max-width: 1000px) {
	.section--flex-50 > div {
		flex: 100%;
		padding: 25px;
	}

	.section--flex-50 h1, .section--content h1 {
		font-size: 1.5em;
	}

	.row-container {
		grid-template-columns: repeat(2, 1fr);
	}

	.dark i {
		font-size: 0.9rem;
	}

	.dark button {
		padding: 0.7rem 1.7rem;
		font-size: 0.7rem;
	}

	.cta-button {
		padding: 0.7rem 1.7rem;
		font-size: 0.7rem;
	}

	.dark {
		padding: 25px;
	}

	.slider {
		padding: 25px 0;
	}

	.footer-distributed {
		font: bold 14px sans-serif;
	}

	.footer-distributed .footer-company-name {
		font-size: 12px;
	}

	.footer-distributed form input, .footer-distributed form textarea {
		width: 250px;
	}

	.footer-distributed form button {
		padding: 10px 35px;
	}

}

@media (max-width: 800px) {

	.footer-distributed {
		padding: 30px;
	}

	.footer-distributed .footer-left, .footer-distributed .footer-right {
		float: none;
		max-width: 300px;
		margin: 0 auto;
	}

	.footer-distributed .footer-left {
		margin-bottom: 40px;
	}

	.footer-distributed form {
		margin-top: 30px;
	}

	.footer-distributed form {
		display: block;
	}

	.footer-distributed form button {
		float: none;
	}
}

@media screen and (max-width: 700px) {
	.row-container {
		grid-template-columns: repeat(1, 1fr);
	}
}

@media screen and (max-width: 1122px) {
	.middle-left h1, .middle-right h1 {
		font-size: 2.4em;
	}

	.middle-left p, .middle-right p {
		font-size: 1.2em;
	}
}

@media screen and (max-width: 960px) {
	.column-three {
		width: 100%;
		padding-left: 0;
	}
}

@media screen and (max-width: 814px) {
	.modal-content {
  		width: 80%;
  		padding: 10px;
	}
}

@media screen and (max-width: 600px) {
	.tab {
		background-color: #eee;
		top: 3.5rem;
		z-index: 10;
	}
}

@media screen and (max-width: 592px) {
	.middle-left {
		transform: translate(-50%, -50%);
		width: 70%;
		left: 50%;
	}

	.middle-right {
		transform: translate(-50%, -50%);
		width: 70%;
		left: 50%;
		text-align: left;
	}

	.homepage-text {
		padding: 3rem;
	}

	.homepage-text h1 {
		font-size: 2rem;
	}
}

@media screen and (max-width: 398px) {
	.middle-left h1, .middle-right h1 {
		font-size: 1.7em;
	}

	.middle-left p, .middle-right p {
		font-size: 1em;
	}

    .redtitle {
        font-size: 1em;
    }

    .subtitle {
        font-size: 0.9em;
    }
}

@media screen and (max-width: 320px) {
	.middle-left h1, .middle-right h1 {
		font-size: 1em;
	}

	.middle-left p, .middle-right p {
		font-size: 0.9em;
	}

	.homepage-text {
		padding: 1.5rem;
	}
}

@media screen and (max-height: 567px) {
	.bottom-middle p, .bottom-middle i {
		display: none;
	}
}

@media screen and (max-height: 565px) {
	.middle h2, .middle hr {
		display: none;
	}
}

@media screen and (max-height: 540px) {
	.middle-left h2, .middle-left i, .middle-right h2, .middle-right i {
		display: none;
	}
}