/*
Full page styling
*/
* {
 /* transition: 1s; */
font-family: 'DM Sans', sans-serif;
}

body,
html {
  margin: 0;
  height: 100%;
  font-family: sans-serif;
  font-size: 1.1em;
}

.fullwidth {
  width: 100%
}

.container {
  margin: 10px;
  margin-top: 2em;
  height: 100%;
}

/*
Header styling 
*/
#fplogo {
    outline-style: solid;
    color: white;
    /* background-color: rgb(0 0 0 / 60%); */
    mix-blend-mode: difference;
}

#fplogo>h1 {
    margin: 0.6em;
    font-size: 4em;
    font-weight: 900;
	   -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#bannerimg {
  height: 20em;
  background-color: black;
  background-image: url('/img/background.jpg');
  background-size: cover;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  animation: filter-animation 120s infinite;
}

#banner {
  height: 20em;
  display: flex;
  align-items: center;
  justify-content: center;
}


@keyframes filter-animation {
  0% {
    filter: hue-rotate(0deg);
  }
  
  50% {
    filter: hue-rotate(360deg);
  }
  
  100% {
    filter: hue-rotate(0deg);
  }
}


/* 
Cookie banner styling 
*/
#cookies {
  padding: 10px;
  background-color: lightblue;
  position: fixed;
  bottom: 0;
  left: 0;
}

.cookie-close{
  cursor: pointer;
  top:5px;
  right:5px;
  padding:5px;
  border:1px solid black;
  border-radius:.5em;
}
/* 
Main content styling 
*/
.main-container {
  display: grid;
  grid-template-areas: "intro" "portfolio";
}

.main-intro {
  grid-area: intro;
}

.main-portfolio {
  grid-area: portfolio;
}

.portfolio-container {
  display: grid;
  grid-template-columns: 1fr;
  perspective: 1000px;
}

.portfolio-container>div {
  min-width: 100%;
  margin-bottom: 10px;
  background-color: rgba(100, 100, 100, 0.2);
  border-radius: 0.5em;
}

.portfolio-container>div>img {
  padding: 5% 5% 0 5%;
  width: 90%;
}

.portfolio-container>div>h4 {
  text-align: center;
}

.portfolio-container>div>p {
  text-align: justify;
  padding: 5% 5% 0 5%;
}

.portfolio-container>div>p>a:link,
.portfolio-container>div>p>a:visited {
  background-color: rgba(100, 100, 100, 1);
  border-radius: 0.5em;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: block;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

.portfolio-container>div>p>a:hover,
.portfolio-container>div>p>a:active {
  background-color: rgba(100, 100, 100, 0.8);
}

.employment {
  border-collapse: collapse;
}

.employment tr:nth-child(even) {
  background-color: rgba(100, 100, 100, 0.2)
}

.employment th,
.employment td {
  border: 1px solid #ddd;
}

/*
Media Queries for Mobile Phones 
*/
@media (min-width: 1300px) {
  .main-container {
    grid-template-columns: 45% 55%;
    grid-template-areas: "intro portfolio";
  }
  .portfolio-container {
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 1em;
    margin-left: 5px;
  }
}


div.nav {
    margin-top: 40px;
	text-align: center;
    background-color: rgba(0,0,0,0.2);
    padding: 20px;
    margin: 20px;
	border-radius:5px;
}
ul.nav > li {
    display: inline;
    padding: 20px;
    border: 2px solid rgba(0,0,0,0.2);
    border-radius: 5px;
	background-color:white;
}



.cert-badge {
width: 150px; height: 270px;
}