/* ** VARIABLES *************************************************************************** */
/* Colors from black to white
01  #000000     02  #101010     03  #101010     04  #303030     accent-1    #567aad
05  #404040     06  #505050     07  #606060     08  #707070     accent-1    #214761
09  #808080     10  #8f8f8f     11  #9f9f9f     12  #afafaf
13  #bfbfbf     14  #cfcfcf     16  #dfdfdf     16  #efefef
*/
:root {
  /* Colors */
  --color-background-site:	#101010;
  --color-background-accent:	#FAB005; /*orange*/
  --color-text-normal:	#dfdfdf;
  --color-text-dark:	#101010;
  --color-text-accent:	#FAB005; /*orange*/
  --color-text-accent2:	#9f9f9f; /*gray*/
  --color-text-accent3:	#404040; /*dark gray*/
  /* Sizes */
  --textsize-big: 18px;
  --textsize-normal: 16px;
  --textsize-small: 12px;
  --font-main: "arial", sans-serif;
}

/* ** HEADERS ************************************************************************ */
body {
  font-family: var(--font-main);
  color: var(--color-text-normal);
  background-color: var(--color-background-site);
  max-width: 1150px;
  margin: auto;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

body.portfolio {
  font-family: var(--font-main);
  color: var(--color-text-normal);
  background-color: var(--color-background-site);
  max-width: 1299px;
  margin: auto;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

h1 {
  margin: 0;
}

h2 {
  margin: 0;
}

h3 {
  margin: 0;
}

a {
  color: var(--color-text-accent);
  text-decoration-line: none;
  font-weight: normal;
}

a:hover {
  color: var(--color-text-accent);
  text-decoration-line: underline;
}

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

.bloglist {
  width: 100%;
  height: 100px;
  border: none;
}

.entry-meta {
  font-size: 10px;
  font-style: italic;
  vertical-align: middle;
}

.entry-meta-photo {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.welcome-photo {
  width: 100px;
  height: 100px;
  float: right;
  margin: 15px;
}

.button {
  position: fixed;
  bottom: 0px;
  left: 10px;
  width: 100%;
  background-color: var(--color-background-site);
  text-align: center;
}

.p-job-title {
  color: var(--color-text-normal);
  font-size: var(--textsize-big);
  font-weight: bold;
  font-variant: normal;
  font-style: normal;
}

.dt-start {
  font-size: var(--textsize-small);
}

.dt-end {
  font-size: var(--textsize-small);
}

smallcaps-normal {
  color: var(--color-text-normal);
  font-size: var(--textsize-normal);
  font-weight: bold;
  font-variant: small-caps;
  font-style: normal;
}

smallcaps-small {
  color: var(--color-text-accent2);
  font-size: var(--textsize-small);
  font-weight: bold;
  font-variant: small-caps;
  font-style: normal;
}

tag-header {
  border-style: solid;
  border-radius: 25px;
  border-color: var(--color-text-accent);
  border-width: 1px;
  color: var(--color-text-accent);
  font-variant: small-caps;
  font-weight: bold;
  padding-left: 10px;
  padding-right: 10px;
}

tag-link {
  border-style: solid;
  border-radius: 25px;
  border-color: var(--color-text-accent);
  border-width: 1px;
  color: var(--color-text-accent);
  font-variant: small-caps;
  font-weight: bold;
  padding-left: 10px;
  padding-right: 10px;
}

tag-link:hover {
  background-color: var(--color-text-accent);
}

a.tag-link {
  color: var(--color-text-accent);
  text-decoration-line: none;
  font-weight: bold;
}

a.tag-link:hover {
  color: var(--color-text-dark);
  background-color: var(--color-text-accent);
  text-decoration-line: none;
}

/* ** NAV MENU ****************************************************************** */
nav.primary-navigation {
  margin: 0 auto;
  display: block;
  text-align: center;
  font-size: 16px;
}
nav.primary-navigation ul li {
  list-style: none;
  margin: 0 auto;
  display: inline-block;
  padding: 0 5px;
  position: relative;
  text-decoration: none;
  text-align: center;
}
nav.primary-navigation li a {
  color: var(--color-text-accent);
}
nav.primary-navigation li a:hover {
  color: var(--color-text-accent);
}
nav.primary-navigation li:hover {
  cursor: pointer;
}
nav.primary-navigation ul li ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  padding-left: 0;
  left: 0;
  display: none;
  background: var(--color-background-site);
  z-index: 999;
}
nav.primary-navigation ul li:hover > ul,
nav.primary-navigation ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
  min-width: 250px;
  text-align: left;
  padding-top: 20px;
}
nav.primary-navigation ul li ul li {
  clear: both;
  width: 100%;
  text-align: left;
  margin-bottom: 20px;
  border-style: none;
}
nav.primary-navigation ul li ul li a:hover {
  transition: all 0.3s ease;
}

ul li ul li a {
  transition: all 0.5s ease;
}

/* ** PORTFOLIO   *************************************************************** */
.float-container {
  position: relative;
}

.image-container {
  position: relative;
  width: 250px; /* Set width as per your requirement */
  height: 250px; /* Set height as per your requirement */
  display: inline-block;
  border-style: solid;
  border-color: white;
  border-width: 0px;
}

.background-image {
  width: 100%;
  height: 100%;
  padding: 3px;
  float: left;
  object-fit: cover;
}

.overlay-image {
  position: absolute;
  top: 0px; /* Adjust as needed */
  left: 0px; /* Adjust as needed */
  z-index: 10; /* Ensures the overlay image is on top */
  object-fit: cover;
  width: 250px; /* Set width as per your requirement */
  height: 250px; /* Set height as per your requirement */
}

a.portfolio {
  color: inherit;
}

a.portfolio:hover {
  color: #bbb;
}

/** LIGHTBOX MARKUP **/
.lightbox {
  /* Default to hidden */
  display: none;
  /* Overlay entire screen */
  position: fixed;
  z-index: 990;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* A bit of padding around image */
  padding: 1em;
  /* Translucent background */
  background: rgba(0, 0, 0, 0.8);
}

/* Unhide the lightbox when it's the target */
.lightbox:target {
  display: block;
}

.lightbox span {
  /* Full width and height */
  display: block;
  width: 100%;
  height: 100%;
  /* Size and position background image */
  background-position: center;
  background-repeat: no-repeat;
  background-size: none;
}

@media only screen and (max-width: 750px) {
  .lightbox span {
    background-size: contain;
  }
}
@media only screen and (max-height: 750px) {
  .lightbox span {
    background-size: contain;
  }
}
/* ** GRID VIEW   ******************************************************************* */
* {
  box-sizing: border-box;
}

.grid-container {
  display: grid;
  grid-template-areas: "header" "content" "recent_posts" "elsewhere" "copyright";
  background-color: var(--color-background-site);
  row-gap: 15px;
  column-gap: 50px;
}

.header {
  grid-area: header;
  font-size: var(--textsize-normal);
}

.content {
  grid-area: content;
  font-size: var(--textsize-normal);
  max-width: 850px;
}

.recent_posts {
  grid-area: recent_posts;
  font-size: var(--textsize-small);
  color: var(--color-text-accent2);
}

.contact {
  grid-area: contact;
  font-size: var(--textsize-small);
  color: var(--color-text-accent2);
  width: 350px;
}

.elsewhere {
  grid-area: elsewhere;
  font-size: var(--textsize-small);
  color: var(--color-text-accent2);
  width: 350px;
}

.copyright {
  grid-area: copyright;
  font-size: var(--textsize-small);
  color: var(--color-text-accent2);
}

/* ** @MEDIA RESPONCIVE GRID ********************************************************* */
@media (min-width: 800px) {
  .header {
    grid-area: 1/1/span 1/span 10;
  }
  .content {
    grid-area: 2/1/span 1/span 10;
  }
  .recent_posts {
    grid-area: 3/1/span 1/span 10;
  }
  .copyright {
    grid-area: 4/1/span 1/span 10;
  }
}
@media (min-width: 1000px) {
  .header {
    grid-area: 1/1/span 1/span 10;
  }
  .content {
    grid-area: 2/1/span 8/span 8;
  }
  .recent_posts {
    grid-area: 2/9/span 1/span 2;
  }
  .copyright {
    grid-area: 11/1/span 1/span 10;
  }
}
/* ** @MEDIA RULES ******************************************************************* */
/*@media screen {
    .noshow {
        display: none;
    }
}*/
@media print {
  .noprint {
    display: none;
  }
  .content {
    grid-area: 1/1/span 1/span 1;
  }
  a {
    color: var(--color-text-normal);
  }
}
@page {
  size: A4 portrait;
  margin-top: 2cm;
  margin-right: 2cm;
  margin-bottom: 2cm;
  margin-left: 2cm;
}
li {
  break-inside: avoid;
  /* break-after: page;*/
}

/*# sourceMappingURL=styles.css.map */