/* this is also defined in common.css. I want to override it just for the home page*/
body {
   padding-top: 0 !important;
   width: 100% !important;
}



.cardContainer {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   align-content: center;
   margin-top: 2em;
   margin-left: 0;
   margin-right: 0;
}

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 20rem;
  margin: 2rem;
  background: rgb(63,67,74);
  border-radius: 0.2em;
  max-width: 90vw;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.4);
  background-color: rgb(55,60,65);
  text-decoration: none;
  /*background: rgb(49,49,49);*/
}

a:hover .card {
   text-decoration: none;
}

article a  {
   text-decoration: none;
   color: #ffffff;
}

article a:hover  {
   text-decoration: none;
}

/* Add some padding inside the card container */
.cardBottom {
   padding: 2px 16px;
}

.cardTitle {
   font-weight: bold;
   text-transform: capitalize;
   font-size: 100%;
}

.cardImage {
   width: 100%;
   height: auto;
   border-radius: 0.2em 0.2em 0 0;
   background-color: white;
}

a:hover .cardColor {
   opacity: 0.85;
}

.cardDesc {
   font-size: 80%;
}

#profileLinks {
   text-align: center;
   font-size: 80%;
}

.center {
   text-align: center;
}

@font-face {
   font-family: 'BebasNeue-Regular';
   src: url('./fonts/BebasNeue-Regular.ttf');
}

@font-face {
   font-family: 'Oswald-Medium';
   src: url('./fonts/Oswald-Medium.ttf');
}

@font-face {
   font-family: 'Roboto-Light';
   src: url('./fonts/Roboto-Light.ttf');
}

@font-face {
   font-family: 'Roboto-Thin';
   src: url('./fonts/Roboto-Thin.ttf');
}

#homeTitle {
   font-size: 200%;
   margin-bottom: 0;
   padding-top: 0;
   padding-bottom: 0;
   font-family: "BebasNeue-Regular", "Source Sans Pro", Helvetica, sans-serif;
   text-transform: uppercase;
}

#homeHeader {
   width: 100vw;
   position: relative;
   left: calc(-50vw + 50%);
   margin-top: 0;
   background-image:
      linear-gradient(
         to bottom,
         rgba(0,0,0,0),
         rgba(0,0,0,0.6),
         rgba(0,0,0,0.7)
      ),
      url(images/PCB.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;

   padding-top: 2em;
   padding-bottom: 1em;
   /*! padding-bottom: 2em; */
   /*! color: black; */
   -webkit-animation: fadeIn 0.6s forwards;
   animation: fadeIn 0.6s forwards;
   transition-timing-function: ease;
   box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2);


   display: flex;
   flex-direction: column;
   justify-content: center;
   align-content: center;

   font-family: "Roboto-Light", "Source Sans Pro", Helvetica, sans-serif;
}


@keyframes fadeIn {
   0% { opacity: 0}
   100% { opacity: 1}
}

@-webkit-keyframes appear {
   0% { opacity: 0}
   100% { opacity: 1}
}
#profilePic {
   /*circle*/
   border-radius: 50%;

   border-width: 3px;
   border-color: white;
   border-style: solid;

   height: 5em;
   width: 5em;
   overflow: hidden;

   box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2);
}
#myRole {
   /*margin-top: 0;*/
   color: rgb(235,235,240);

}

@media (min-width:45em)  {
   #myRole {
      word-spacing: 20px;
   }
}

#homeDesc {
   /*margin-top: 1.5em;*/
   padding-left: 1em;
   padding-right: 1em;
   font-family: "Source Sans Pro", Helvetica, sans-serif;
}

/*[data-politics="true"]  {
    display:none;
}*/

#rss-para {
   margin-right: 1em;
}