IEEEstyle.css

*{
	font-family: 'Courier Prime', monospace;
}
body{
	position: relative;
}
nav{
	position:sticky;
	display: flex;
	justify-content: space-between;
}

.row:hover{
	cursor: pointer;
}


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

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

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

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background: rgb(2,0,36);
  background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(9,11,121,0.9925012241224614) 34%, rgba(0,212,255,1) 100%);
  color: white;
  transform: rotateY(180deg);
}

/*.cards{
	display: flex;
	justify-content: space-around;
   width:100%;  
}
.card1 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: left;
}
.card1:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.card2 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: left;
}
.card2:hover {
  box-shadow: 0 8px 4px 0 rgba(0,0,0,0.2);
}*/

.column1 {
  float: left;
  width: 50%;
  padding: 0 10px;
}
.row1 {margin: auto;}

.row1:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 33.3%;
  padding: 0 10px;
}
/* Remove extra left and right margins, due to padding in columns */

.row {margin: 0 -5px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.column2 {
  float: left;
  width: 25%;
  padding: 0 10px;
}
.column3 {
  float:center;
  width: 50%;
  padding: 0 10px;
}

/* Style the counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
  padding: 8px;
  text-align: center;
  background-color: #f1f1f1;
}
/* Responsive columns - one column layout (vertical) on small screens */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

.container1{
  position: relative;
  text-align: center;
  color: white;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pics{ width:100%; margin:0 auto; text-align:center}
.pics span{ width:20%; margin:0 1%;  }
.pics0{ width:75%; margin:0 auto; text-align:center}
.pics0 span{ width:20%; margin:0 1%;  }
.pics1{ width:75%; margin:0 auto; text-align:center}
.pics1 span{ width:20%; margin:0 1%;  }
a {
  text-decoration: none;
  font-size: 22px;
  color: black;
}
footer{
	background-color: rgb(200, 198, 205);
	color:white;
	padding: 20px;
}
.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
}

/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}
.fa-facebook {
  color: black;
}
.fa-instagram {
  color: black;
}
.fa-linkedin {
  color: black;
}
.fa-twitter {
  color: black;
}
.fa-youtube {
  color: black;
}