@font-face {
    font-family: 'Poppin';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
         url('./fonts/Poppins/Poppins-Regular.woff') format('woff'), /* Pretty Modern Browsers */
         url('./fonts/Poppins/Poppins-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
  }

 /* https://coder-coder.com/responsive-navigation-bar-flexbox-vs-css-grid/ */


/* Set the global variables for everything. Change these to use your own fonts/colours. */
:root {

    /* Set sans-serif & mono fonts */
    --sans-font:  "Poppin", -apple-system, BlinkMacSystemFont, "Poppin","Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif;
    --mono-font:  "Poppin", Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
    /* Body font size. By default, effectively 18.4px, based on 16px as 'root em' */
    --base-fontsize: 1.15rem;
    /* Major third scale progression - see https://type-scale.com/ */
    --header-scale: 1.25;
    /* Line height is set to the "Golden ratio" for optimal legibility */
    --line-height: 1.618;
    /* Default (light) theme */
    --bg: rgb(233, 233, 233);
    --accent-bg: #F5F7FF;
    --accent-bg-stronger: #E8E8E8;
    --text: rgb(55, 55, 55);
    --text-light: #585858;
    --border: #D8DAE1;
    --accent: #0D47A1;
    --accent-light: #90CAF9;
    --code: #D81B60;
    --preformatted: #444;
    --marked: #FFDD33;
    --disabled: #EFEFEF;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #212121;
        --accent-bg: #2B2B2B;
        --accent-bg-stronger: #444;
        --text: #DCDCDC;
        --text-light: #ABABAB;
        --border: #666;
        --accent: #FFB300;
        --accent-light: #FFECB3;
        --code: #F06292;
        --preformatted: #CCC;
        --disabled: #111;
    }

    img, video {
        opacity: .6;
    }
}

* {
    /* Set the font globally */
    font-family: var(--sans-font);
    font-family: Poppin;
}

html {
    font-size: 16px;
}

/* Make the body a nice central block */
body {
    color: var(--text);
    background: var(--bg);
    font-size: var(--base-fontsize);
    line-height: var(--line-height);
    margin: 0;
    min-height: 100vh;
}

/* Make the header bg full width, but the content inline with body */
header {
  width:80%;
  margin: 1rem auto 5rem auto;
}

/* Make the main element a nice central block */
main {
    margin: 1rem auto 5rem auto;
    max-width:80%;
    padding: 1rem 0 1rem 0;
}

p{
  font-size:1.5rem;
}
 .inside{
     width:100%;
     height:100%;
 }
   
  .figure {
    display: block;
    width: 100%;
    height: auto;
    padding-left:0;
    margin-left:0; 
  }

  nav{
    display: flex;
    font-size: 1.5rem;
    align-items: center;
    justify-content: space-between;
    width:100% !important;
    }
  
  nav a{
   color: var(--text) !important; 
    text-decoration: none;
  }

  nav a:hover {
    color: var(--accent) !important;
    border-color: var(--accent);
}

nav a.current:hover {
    text-decoration: underline;
    color: blue;
}

/* Full width for images in projects */
/* source: https://css-tricks.com/full-width-containers-limited-width-parents/ */
  .full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }

  .full-width img{
      width:100%;

  }

  .teaser{
      text-align: center !important;
      font-size: 1.4rem;
      margin: 7rem 0 7rem 0;
  }


  /* Next Before project in Project detail */
.nextbefore{
    padding-bottom: 8rem;
    padding-top:4rem;
}

  .nextbefore a {
    /* font-size: 2.4rem; */
    text-decoration: none !important;
  }
  .nextbefore a:hover{
    text-decoration: underline !important;

  }


/* Format headers */
h1 {
    font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale) * var(--header-scale));
    margin-top: calc(var(--line-height) * 1.5rem);
    text-align: center;
}

/* Format links & buttons */
a,
a:visited {
    color: var(--accent);
}

a:hover {
    text-decoration: underline;
}

/* Lists */
ol,
ul {
    padding-left: 3rem;
}

/* Some tweaks to keep Symfony dumps in check */
.sf-dump {
    font-size: 1rem !important;
    line-height: 1.4rem !important;
}


.container {
    display: flex; /* or inline-flex */
  }

  .credits{
    font-size: 3rem !important;
}


/* Flexbox column system */
  .row {
    display: flex;
    flex-wrap: wrap;
    width: 100%; 
    padding-bottom:4rem;
    justify-content: space-evenly;
  }
  
  .column {
    display: flex;
    flex-direction: column;
    flex: 0 1 90%;
    padding-bottom:3.5rem;
  }

  .column img {
    vertical-align: middle;
    width:100%;   
  }

 .wrapper{
    position: relative;
    width:100%;
  }

  .wrapper:hover .overlay-image {
    opacity: 0.9;
  } 

    .image {
      display: block;
      width: 100%;
      height: auto;
    }
  
    .overlay-image {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height:100%;
      opacity: 0;
      transition: .5s ease;
      background-color: #585858;
  
    }
  
    
    .text {
      position: absolute;
      color: white;
      font-size: 20px;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      text-align: center;
    }

      .overlay {
        height: 100%;
        width: 100%;
        display: none;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0, 0.9);
      }
      
      .overlay-content {
        position: relative;
        top: 25%;
        width: 100%;
        text-align: center;
        margin-top: 30px;
      }
      
      .overlay a {
        padding: 8px;
        text-decoration: none;
        font-size: 36px;
        color: #818181;
        display: block;
        transition: 0.3s;
      }
      
      .overlay a:hover, .overlay a:focus {
        color: #f1f1f1;
      }
      
      .overlay .closebtn {
        position: absolute;
        top: 20px;
        right: 45px;
        font-size: 60px;
      }




    .first, .last, .mailto {
      display:none;
    }


footer {
  margin: 1rem auto 0;
  color: var(--text-light);
  font-size: rem;
  text-align: center;
}

img {
  max-width: 100%;
}


      /* Tablet */
      @media screen and (max-height: 450px) {
        .overlay a {font-size: 20px}
        .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
        }

      }

      .motto p{
        font-size: 2.5rem !important;
        text-align: center;
        padding-bottom: 5rem;
      }

        /* Tablet Styles + */
      @media only screen and (min-width: 480px) {
      }
             
      /* Desktop styles */
      @media only screen and (min-width: 1024px) {
          .column {
            flex: 0 1 48%;
            padding-bottom:0rem;
          }
          .row{
            justify-content: space-between;
          }

          .first, .last, .mailto {
            display:block;
          }

          .first, .last{
            width:10%;
          }
          .mailto{
            width:20%;
          }
          nav {
            justify-content: center;
          }
          .burger{
            display: none;
          }

          #logo{
            font-size: 2.5rem;
            width:60%;
            text-align: center;
          }
      }