/* 
CSS variables.
*/

:root {
    --color-nickel:#74776B; 
    --color-snow:#FFF9FB;
    --color-raisin:#1E212B;
    --color-cinnabar: #CA2A1C; /*#DD462D;*/
    --color-safrin:#F8C425;
    --color-green-sheen:#70B49E;
    --color-alice-blue:#F6FCFF;
    --color-silver-foil:#ACB6A8;
    --color-incremental-blue:#153157;
    
    
    
    --forground-color:var(--color-raisin);
    --background-color:var(--color-alice-blue);
    --header-color:var(--color-incremental-blue);
    --header-for-color:var(--color-alice-blue);
    --footer-color:var(--color-incremental-blue);
    --footer-for-color:var(--color-alice-blue);
    --bar-color:var(--color-incremental-blue);
    --bar-for-color:var(--color-incremental-blue);
    
    --link-color:var(--color-cinnabar);
    
    --headerheight:54px;
    --bar-width:18px;
    --content-width:1050px;
    --col-width:250px;
    --col-large-width:600px;
    
    --basefont:'Tajawal', sans-serif;
    --accentfont: 'Source Sans Pro', sans-serif;
}

/*Colors sections*/

html {
    background: var(--background-color);
    color: var(--forground-color);
}

/*#aboutme {
    --forground-color: var(--color-rasin);
    --background-color: var(--color-snow);
}*/

#what {
    --forground-color: var(--color-raisin);
	--background-color: var(--color-green-sheen);
}

/*#how {
    --forground-color: var(--color-rasin);
    --background-color: var(--color-snow);
}*/

#examples {
    --forground-color:var(--color-raisin);
	--background-color: var(--color-silver-foil);
}

card {
    --background-color: var(--color-alice-blue);
    --forground-color: var(--color-raisin);
}

/*#contact {
    --forground-color:var(--color-raisin);
	--background-color: var(--color-snow);
}*/


/* 
Fonts & stijlen
*/
body {
	margin:0px;
	font-family: var(--basefont);
	font-weight: 100;
	font-size:18px;
    line-height:26px;
}

h1 {
	font-family: var(--basefont);
	font-weight:500;
	font-size:32px;
    margin-top:14px;
    margin-bottom:8px;
}

h2 {
	font-family: var(--basefont);
	font-weight:700;
	font-size:28px;
    margin-top:32px;
    margin-bottom:0px;
}

h3 {
	font-family: var(--basefont);
	font-weight:500;
	font-size:22px;
}

h4 {
	font-family: var(--accentfont);
	font-weight:400;
	font-size:14px;
    margin-top:-16px;
    margin-bottom:0px;
}

h5 {
	font-family: var(--accentfont);
	font-weight:400;
	font-size:18px;
	margin-bottom: 0px;
}

a {
	font-family: var(--basefont);
	font-weight:400;
	color: var(--link-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Text with line in front and back*/
.emph:before,
.emph:after {
  content: "";
  display: inline-block;
  height: 3px;
  background: var(--forground-color);
  position: relative;
  vertical-align: middle;
  width: 2.5em;
}

.emph:before {
  right: 0.5em;
}

.emph:after {
  left: 0.5em;
}

/* 
Lay-out algemeen
*/

/* |<-          Section 100%            ->|
   |<-  Bar     Content max:1050px      ->|
        88px |<-          Row 100%      ->|
             |<-   Col max | col Large  ->|
                   250px       600px
                   */

content {
	display: flex;
	justify-content: space-between;
	box-sizing:border-box;
	flex-flow:row wrap;
	margin:auto;
	width:100%;
	max-width:var(--content-width);
	padding:8px 32px 32px 32px;
}

.row {
	flex:0 0 100%;
    display:flex;
    flex-flow:row wrap;
    gap:0px 32px;
    align-items: center; /* align vertical */
}

.col {
	vertical-align: top;
	max-width:var(--col-width);
    min-width:100px;
    flex: 0 0 auto;
}

.col.large {
    max-width:var(--col-large-width);
    flex: 1 1 auto;
}

section[id] {
    background-color: var(--background-color);
    color:var(--forground-color);
    scroll-margin-top:var(--headerheight);
}

/* Bar on left side*/
content {
    border-left: var(--bar-color) var(--bar-width) solid;
}

/*
Hide elements, but not for screen readers
*/

.sr-only, .exp.close p {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important; /* depricated */
	-webkit-clip-path: inset(50%) !important;
	clip-path: inset(50%) !important;  /* Not common yet */
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;          
}

/* Images */

img.center {
    display: block;
    position:absolute;
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0; 
    margin: auto;
}

img.flex {
  display: block;   
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
  vertical-align: middle;
}

/* 
Buttons
*/

button {
	font-size:16px;
	padding: 0.75rem 2rem 0.75rem 2rem;
	border:none;
	border-radius: 8px;
	background-color: var(--color-cinnabar);
	color:var(--color-snow);
}

button:hover {
      text-decoration: underline;
      cursor:pointer;
}

/* 
Section About me
*/

#aboutme img {
    max-height:200px;
}

/* 
Section what
*/



/* 
Section how
*/

.exp {
    margin-bottom: 16px;
}

.exp h3 {
	    display: flex;
		align-items:center;
		margin:0px;
        color:var(--link-color);
        width:calc(100% - 60px);
	    margin-block-start:0px;
	    padding-right:40px;
        background: url("../img/chevron-up.svg") no-repeat right 0px;
        filter: invert(30%) sepia(98%) saturate(2101%) hue-rotate(348deg) brightness(93%) contrast(85%); /*gives color cinnabar to svg, see https://codepen.io/sosuke/pen/Pjoqqp for calculation other colors*/
        }

.exp h3:hover {
	cursor:pointer;
	text-decoration: underline;
}

.exp p {
	padding: 0px 32px 0px 42px;
}

.exp.close h3 {
    background: url("../img/chevron-down.svg") no-repeat right 0px;
    filter: invert(30%) sepia(98%) saturate(2101%) hue-rotate(348deg) brightness(93%) contrast(85%);
}

.exp h3 svg {
		height:20px;
        min-width:24px;
        padding-right: 10px;
        padding-bottom:8px;
        color:var(--link-color);
   }

/* 
Section examples
*/

#examples .row {
	display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

/* Card */

card {
    font-family: var(--basefont);
	font-weight: 300;
	font-size:16px;
    line-height:1.3em;
	
    border-radius:8px;
	padding:4px 16px;
	margin:16px 0px 16px 0px;
	max-width:calc(var(--content-width) /2 - 120px);
    min-width:300px;
    min-height:400px;
    flex: 1 1 0;
	background-color: var(--background-color);
    color:var(--forground-color);
}

card .inner {
  width: 100%;
  height: 300px;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

card.flipped .inner{
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height:100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateX(0deg); /*hack for firefox*/
}

.card-back {
  transform: rotateY(180deg);
}

card svg {
    color: var(--color-nickel);
    height:20px;
    padding:4px;
}

card .footer {
    display:flex;
    justify-content: space-between;
    align-items:center;
}

card .toggle {
    color:var(--link-color);
    text-align: right;
    font-weight: 700;
}

card .toggle:hover, card.flipped .toggle:hover:after {
    text-decoration: underline;
    cursor: pointer;
}

card.flipped .toggle {
    position: relative;
}

card.flipped .toggle:after {
  content: "Hide summary";

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--background-color);
}

/* 
Section contact
*/

input, textarea {
	width:90%;
	display:block;
	border: var(--forground-color) 1px solid;
	border-radius:5px;
	font-size:16px;
	padding:4px;
}

msg {
    display:none;
    color:red;
    font-size:14px;
} 

.err input, .err textarea {
    	border: red 2px solid;
}

.err msg {
    display:block;
}

#contact label {
	font-size:16px;
}

#contact svg {
    width:80px;
    height:80px;
    display: block;
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0; 
    margin: auto;
    color:var(--forground-color);
    stroke-width:1.5px;
    
}

#contact .buttonbar {
    text-align:right;
    padding-right:calc(10% - 10px)
}

/* 
Header
*/

header {
    --forground-color:var(--header-for-color);
	box-sizing: border-box;
	position: sticky;
	top:0;
	width:100%;
	display:block;
	z-index: 1000;
    background: var(--header-color);
}

header content span a {
	padding-right: 32px;
	text-decoration: none;
}

header a:hover, footer a:hover {
	text-decoration: underline;
}

header content {
		flex-flow:row nowrap;
        border: none;
        padding: 0px 16px 0px 0px;
}

header .title {
      color: var(--header-for-color);
}

svg {
    color: var(--header-for-color);
}

.social {
    display:flex;
    align-items:center;
    justify-content: space-between;
    background: var(--bar-color);
    color:var(--bar-for-color);
	margin: 0px;
    width:68px;
    padding:10px;
}

svg.ibutton {
    margin:4px;
}

svg.ibutton:hover {
    cursor:pointer;
    margin:4px;
}

/*pop-up menu*/

.pop-upmenu {
    --forground-color:var(--header-for-color);
    --background-color:var(--header-color);
    position:relative;
    top:0px;
    display:inline-block;
    margin: auto 0px;
}

.pop-upmenu ul {
    background:var(--header-color);
    left:calc(-1*500%);
    list-style: none;
    padding-left: 0px;
    display: inline-block;
    position:absolute;
    top:10px;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.pop-upmenu ul li {
        border-bottom: solid 3px;
        border-bottom-color:var(--header-for-color);
        padding:8px;
        line-height:22px;
}

.pop-upmenu ul li:last-of-type {
    border-bottom: none;
}


.pop-upmenu ul li a {
    color:var(--header-for-color);
    display:block;
    width:100%;
}

.pop-upmenu.close ul {display: none;}

/* 
Footer
*/

footer {
	box-sizing: border-box;
	display:flex;
	width:100%;
	background-color: var(--footer-color);
	color:var(--footer-for-color);
}

footer content {
	padding: 0px 16px 0px 0px;
}

footer content a {
	padding:0 8px;
	text-decoration: none;
}

footer a {
	color:var(--footer-for-color);
}

/* 
small screens ipad portait
*/

@media screen and (max-width: 1000px) {
    
    .col {
        max-width: 650px;
        flex: 1 1 auto;
    }
        
    .sm-hide {
        display:none;
	}
}

/* 
Mobile normal
*/

@media screen and (max-width: 600px) {
	header {
		position:static;
	}	
    
    header .title {
        font-size: 18px;
    }
    
    section[id] {
    scroll-margin-top:0px;
    }
}

/* 
Mobile Small
*/

@media screen and (max-width: 440px) {
    content {
        border:none;
	}
    
    .social {
        display:none;
    }
    
    header {
        padding-left:32px;
    }
    
    #examples content {
        padding: 16px 16px 16px 16px;
        
    }
}