@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam&display=swap');
*
{
  margin: 0;
  padding: 0;
}
body
{
  font-family: 'Be Vietnam', sans-serif;
  color: #888;
  background: #555;
/*  margin: 1em;*/
}

.portfolio
{
  padding: 1em;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 5px;/*1em;*/
}

.portfolio-title
{
  text-align: center;
  color: #e0f7ff;
  grid-column: 1 / -1;
}

.portfolio-card
{
  background: #777;
  text-align: center;
  /*padding: 1em;*/
/*  border: solid 4px #123;*/
/*  border-radius: 1em;*/

  /*margin: 0 1.5rem 1.5rem 0;*/
  border: solid 2px black;
  padding: 5px;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
  border-radius: 5px;
  transition: all .25s ease-in-out;
}

.portfolio-card img
{
  max-width: 100%;
  filter: grayscale(100%);
  border-radius: 5px;
  transition: all .25s ease-in-out;
}

.portfolio-card:hover img { filter: grayscale(0); }
.portfolio-card:hover
{
  border-color: #004;
  box-shadow: 5px 5px 5px rgba(0,0,1,0.8);
  background: #447;
}

.portfolio-card img.animated-preview
{
  display:none
}
.portfolio-card:hover img.animated-preview
{
  display:block
}

.portfolio-card img.still-preview
{
  display:block
}
.portfolio-card:hover img.still-preview
{
  display:none
}


.portfolio-card p
{
  margin: 5px 0;
  padding: 0;
  text-align: center;
  font-style: italic;
  color: #fff
}

.portfolio a
{
  margin: 5px 0;
  padding: 0;
  text-align: center;
  font-style: italic;
  font-weight: bold;
  text-decoration: none;
  text-transform: capitalize;
  color: #ffe
}



footer
{
  /*display: absolute;*/
  position: fixed;
  bottom: 0;
  left:0;
  right:0;
  background-color: black;
  font-weight: bolder;
}
footer p
{
  background-color: black;
  padding: .2em
}
footer .twitter a
{
  color: #00acee;
  text-decoration: none
}
footer .twitter a:visited
{
  color: #00acee;
  text-decoration: none
}
footer .twitter a:hover
{
  color: #009cde;
  text-decoration: dashed underline
}
footer .twitch a
{
  color: #6441a5;
  text-decoration: none
}
footer .twitch a:visited
{
  color: #6441a5;
  text-decoration: none
}
footer .twitch a:hover
{
  color: #543195;
  text-decoration: dashed underline
}
footer .mail a
{
  color: #fff;
  text-decoration: none
}
footer .mail a:visited
{
  color: #fff;
  text-decoration: none
}
footer .mail a:hover
{
  color: #eee;
  text-decoration: dashed underline
}
footer span
{
  margin-left: 1em;
  margin-right: 1em
}