/* No padding and default font for everything */
* { 
  margin: 0;
  padding: 0;
  font-family: Open Sans, Arial, sans-serif;
}

/* Variables */
:root { 
  --Blue : #04275d;
  --Yellow : #fdcc03;
  --Red : #820a0b;
}

/* Overrule font with custom font (if available) for everything */
* {
  font-family:  "Raleway";
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

/* Intro text, bold, margin and slightly bigger */
.content.bold p, 
.content.bold div, 
.content.bold { 
  font-weight: bold!important;
  margin-top:8px;
  margin-bottom:8px;
  font-size:18px;
}

ul { 
  margin-left : 0.8em;
  margin-top : 0.4em;
}


/* Header Logo/mobile - Default layout */
header img { 
  margin: 12px;
  width  : 100px;
  height : 100px;
}

/* Header Menu/mobile - Default layout */
ul.mainMenu {
  list-style: none;
  float: right;
  margin-top : 50px;
}
ul.mainMenu li {
  display: inline-block;
  margin-left : 24px;
}
ul.mainMenu li a {
  font-size: 22px;
  font-weight: bold;
  text-decoration: none;
  color : var(--Red);
  text-transform: uppercase;
}

h1, h2, h3 {
  color : var(--Red);
  text-transform: uppercase;
}

/* Image at top */
.content_image_header {
  border-top : 12px solid var(--Yellow);
  border-bottom : 50px solid var(--Yellow);
  margin-bottom: 24px;
}

.content_image_header.buurthuis_pannehoef_buitenkant {
  background-image: url('/frontend/res/buurthuis_pannehoef_buitenkant.jpeg');
  width : 100%;
  height : 550px;
  background-position: 0% 25%;
  background-size: cover;
}



/* Agenda - Default/mobile layout */
.agenda_item {
  border : 3px solid var(--Yellow);
  margin-bottom : 24px; 
}
.agenda_item_image {
  background-image: var(--bg-image);
  height : 200px;
}
.agenda_item_title {
  color : var(--Red);
  text-transform: uppercase;
  font-size: 22px;
  font-weight: bold;
  padding: 12px;
  background-color: var(--Yellow);
}
.agenda_item_time {
  display: inline-block;
  margin-top: 12px;
  padding: 12px;
  padding: 12px;
  font-weight: bold;
  background-color: var(--Red);
  color : white;
  float: right;
  margin-top:-250px;
}
.agenda_item_date {
  display: inline-block;
  margin-top: 12px;
  background-color: var(--Red);
  padding: 12px;
  color : white;
  float: right;
  margin-top:-250px;
}
.agenda_item_description {
  margin: 12px;
}


/* Static Agenda - Default/mobile layout */
.content_agenda { 
  margin-top : 12px;
}
.static_agenda {
  background-color: var(--Yellow);
  padding: 12px;
}
.static_agenda h3 {
  margin-top: 12px;
}
.static_agenda .time {
  display: inline-block;
  width: 100px;
  padding-right:6px;
  text-align: right ;
}
.static_agenda .time::after { 
  content: " - "; 
}


/* Vrijwilligers - Default/mobile layout */
.content_paragraph.vrijwilligers {
  margin-top : 12px;
}
.vrijwillger_item {
  border : 3px solid var(--Yellow);
  margin-bottom : 24px; 
}
.vrijwillger_item_image {
  background-image: var(--bg-image);
  background-size: contain;
  height: 200px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: silver;
}
.vrijwillger_item_title {
  color : var(--Red);
  text-transform: uppercase;
  font-size: 22px;
  font-weight: bold;
  padding: 12px;
  background-color: var(--Yellow);
}
.vrijwillger_item_description {
  margin: 12px;
}



/* Bestuur - Default/mobile layout */
.content_paragraph.bestuur {
    margin-top : 12px;
}
.bestuur_item {
  border : 3px solid var(--Yellow);
  margin-bottom : 24px; 
}
.bestuur_item:nth-child(3) {
  margin-right:24px;
}

.bestuur_item_image {
  background-image: var(--bg-image);
  background-size: contain;
  height: 200px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: silver;
}
.bestuur_item_title {
  color : var(--Red);
  text-transform: uppercase;
  font-size: 22px;
  font-weight: bold;
  padding: 12px;
  background-color: var(--Yellow);
}
.bestuur_item_description {
  margin: 12px;
}



/* Footer - Default/mobile layout */
footer { 
  background-color : var(--Red);
  padding : 24px;
  color : white;
}
footer h3 { 
  color : var(--Yellow)
}
footer a { 
  color : var(--Yellow)
  
}




/* Applies when the viewport is 1032px wide or smaller */
@media (max-width: 1032px) {
  .contentContainer {
    display: grid;
    grid-template-columns: 16px auto 16px; 
  }
  .content_image_header.buurthuis_pannehoef_buitenkant {
    height : 250px;
  }
  
}


/* Applies at 1025px and wider */
@media (min-width: 1025px) {
  /* Bigger Logo */
   header img {
    width  : 175px;
    height : 175px;
  }

  /* Menu needs more margin to be vertically centered */
  ul.mainMenu {
    margin-top : 75px;
  }
  
  /* Show content with side gutters */
  .contentContainer {
    display: grid;
    grid-template-columns: 1fr 1000px 1fr; 
  }
  
  /* Agenda now shows as a grid */
  .agenda_items {
    display: grid;
    grid-template-columns: auto auto;
  }
  .agenda_item {
    width : 475px;
  }
  .agenda_item:nth-child(odd) {
    margin-right:24px;
  }

  /* Vrijwilligers now shows as a grid */
  .content_vrijwilligers {
    display: grid;
    grid-template-columns: auto auto auto;
  }
  .vrijwillger_item {
    width : 311px;
  }
  .vrijwillger_item:nth-child(3) {
    margin-right:24px;
  }
  
  /* Bestuur now shows as a grid */
  .content_bestuur {
    display: grid;
    grid-template-columns: auto auto auto;
  }
  .bestuur_item {
    width : 311px;
  }
  .bestuur_item:nth-child(3) {
    margin-right:24px;
  }
}

/* Applies at 1600 and wider */
@media (min-width: 1600px) {
  /* Static agenda now shows next to normal agenda */
  
  .contentContainer {
    display: grid;
    grid-template-columns: 1fr 1300px 1fr; 
  }

  .content_agenda { 
    display: grid;
    grid-template-columns: auto 300px;
  }
  .static_agenda  { 
    margin-top : 29px;
    margin-left: 16px;
  }

}






/* Before loading */
h1.placeholder {
    height : 38px;
}

.content.bold.placeholder {
  height : 96px;
}

.content.placeholder {
  height : 140px;
}

/* Shimmer animation */
.placeholder::after {
  height: 100%;
  width: 100%;
  content: '';
  inset: 0;
  background: linear-gradient( 90deg, transparent 0%, #f8fafc 50%, transparent 100% );
  animation: shimmer 1.4s infinite;
  display: block;
}

@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}


#intro-header       { background-color: rgba(255,255,255,0.0); transition: background-color 1s ease-in-out 0s; }
#intro-intro        { background-color: rgba(255,255,255,0.0); transition: background-color 1s ease-in-out 0s; }
#intro-content      { background-color: rgba(255,255,255,0.0); transition: background-color 1s ease-in-out 0s; }
#vrijwillgers       { background-color: rgba(255,255,255,0.0); transition: background-color 1s ease-in-out 0s; }
#vrijwillgers-intro { background-color: rgba(255,255,255,0.0); transition: background-color 1s ease-in-out 0s; }
#bestuur            { background-color: rgba(255,255,255,0.0); transition: background-color 1s ease-in-out 0s; }
#bestuur-intro      { background-color: rgba(255,255,255,0.0); transition: background-color 1s ease-in-out 0s; }#intro-header       { background-color: rgba(255,255,255,0); transition: background-color 1s ease-in-out 0s; }

#intro-header.placeholder       { background-color: rgba(0,0,0,0.0); }
#intro-intro.placeholder        { background-color: rgba(0,0,0,0.0); }
#intro-content.placeholder      { background-color: rgba(0,0,0,0.0); }
#vrijwillgers.placeholder       { background-color: rgba(0,0,0,0.0); }
#vrijwillgers-intro.placeholder { background-color: rgba(0,0,0,0.0); }
#bestuur.placeholder            { background-color: rgba(0,0,0,0.0); }
#bestuur-intro.placeholder      { background-color: rgba(0,0,0,0.0); }