@charset "UTF-8";

body {
 background-color:#0F0F0F;
	background-image: linear-gradient(to top, rgba(255,0,0,0.5), rgba(255,0,0,0)); 
background-attachment: fixed;
 background-size: cover;
}
#wrapper {
	max-width: 60%;
	height: auto;
	margin: 0 auto;
	background-color: #000;
}

header {
	/* height: 5em; */
	width: 100%;
	margin: 0 auto;
	font-variant: smail-caps;
	overflow: auto;
}
nav a:hover {
	color:#FF00C5;
}

nav {
	padding-right: 1em;
	padding-top: 0.5em;
	width: 70%;
	float: right;
	padding-bottom: 0.5em;
}

nav ul {
	margin: 0;
	padding: 0;
}

nav li {
	display: inline-block;
	padding-left: 3.8em;
	color: #FFFFFF;
	font-family: "Reggae One", serif;
	font-size: 1em;
}

nav ul li a {
	text-decoration: inline;
	color: #ff2200;
	font-variant: small-caps;
	font-family:"Reggae One", serif;
  font-weight: 400;
  font-style: normal;
}

#GG {
	width: 14%; 
	float: left;
	padding-top: 35px;
	padding-left: auto;
}

h5, h6{
	font-family:"Reggae One", serif;
	color: red;
}

main {
	background-size: cover;
	background-image: url("Images/footprint.png");
	width: 100%;
	clear:both;
	padding-top: 2em;
}

h1 {
	margin: 0;
	color: #fff;
	object-fit: cover;
	float:center;
	padding-left: 5em;
	padding-top: 1.5em;
	font-family:"Reggae One", serif;
  font-weight: 400;
  font-style: normal;
}

h2 {
	font-family:"Reggae One", serif;
	font-size: 1em;
	text-align: center;
	color: white;
}
h4 {font-family:"Reggae One", serif;
	font-size: .8em;
	text-align: center;
	color: white;
	padding: 2em;
}
p{
	font-family:"Reggae One", serif;
	font-size: 1em;
	text-align: center;
	color: red
}
h3 {
	font-family:"Reggae One", serif;
	font-size: 1.1em;
	text-align: center;
	color: white; 
}
p a:hover {
  color: #FF00F0;
  text-decoration: underline;
}
footer {
	clear: both;
	background: #000;
	color: #fff;
	padding: .2em;
	font-family:"Reggae One", serif;
}
@-webkit-keyframes colorchangeFooter {
       0% {background: rgb(163, 43, 8,);}
     25% {background: rgb(232, 67, 12);}
     50% {background: rgb(232, 90, 155);}
     75% {background-color: #99D2E4;}
     100% {background: rgb(48, 97, 105);}
}

@-moz-keyframes colorchangeFooter {
      0% {background: rgba(122, 122, 122, 0.8);}
     25% {background: rgba(13, 237, 255, 0.8);}
     50% {background: rgb(232, 90, 155);}
     75% {background-color: #949494;}
     100% {background: rgba(122, 122, 122, 0.8);}	
}

@-o-keyframes colorchangeFooter {
       0% {background: rgba(122, 122, 122, 0.8);}
     25% {background: rgba(13, 237, 255, 0.8);}
     50% {background: rgb(232, 90, 155);}
     75% {background-color: #949494;}
     100% {background: rgba(122, 122, 122, 0.8);}
}

@keyframes colorchangeFooter {
      0% {background: rgba(122, 122, 122, 0.8);}
     25% {background: rgba(13, 237, 255, 0.8);}
     50% {background: rgb(232, 90, 155);}
     75% {background-color: #949494;}
     100% {background: rgba(122, 122, 122, 0.8);}
}

footer {
    background: rgba(122, 122, 122, 0.8);  
     -webkit-animation: colorchangeFooter 30s infinite alternate;
     -moz-animation: colorchangeFooter 30s infinite alternate;
     -o-animation: colorchangeFooter 30s infinite alternate;
     animation: colorchangeFooter 30s infinite alternate;
     height: 30px;
	padding: 15px 0 0 2%;
	font: "Reggae One", serif;
	
	
}
/* Make sure the parent container is correctly sized */
.container {
  display: flex;
  justify-content: center;  /* Centers horizontally */
  align-items: center;      /* Centers vertically */
  height: 22vh;            /* Full viewport height */
  width: 100%;              /* Full viewport width */
  margin: 0;                /* Remove any default margin */
  padding: 0;               /* Remove any default padding */
}

/* The flip card container */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid blue;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* Flip card inner and other styles remain unchanged */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #FF0000;
  color: black;
}

.flip-card-back {
  background-color: black;
  color: white;
  transform: rotateY(180deg);
}