@font-face {
    font-family: Line;
    src: url("Linefont-Black.ttf") format("truetype");
  }

  header {
    background-color: red;
    color: #fff;
    padding: 2%;
}



/* Normal state (default) */
body {
    font-family: 'Line', sans-serif;
    font-size: 30px;
}

/* Inverted state */
body.inverted p, body.inverted h1, body.inverted h2, body.inverted h3, body.inverted h4, body.inverted h5, body.inverted h6, .inverted .panel, .inverted .panel-content {
    background-color: inherit;
    font-family: Arial, sans-serif;
    font-size: 16px;
    transition: filter 1s step-start, font-family 1s step-start, font-size 1s step-start;
}

body.inverted #center,
body.inverted .empty-space,
body.inverted .empty-space-left,
body.inverted .empty-space-right,
body.inverted .hovered-image,
body.inverted .left #block {
    background-color: black;
}



body {
    font-family: Line;
    font-size: 30px;
    line-height: 1.1;
    margin: 0;
    padding: 0;
    text-shadow:   0px 0px 5px rgba(0,0,0,1),
                    0px 0px 5px rgba(0,0,0,1),
                    0px 0px 5px rgba(0,0,0,1),
                    0px 0px 5px rgba(0,0,0,1),
                    0px 0px 5px rgba(0,0,0,1);
    -webkit-text-stroke:2px black;
    -webkit-text-fill-color: #ffffff;
}


/* float */
.float-left {
    float: left;
    margin-right: 5px;
    margin-bottom: 2px; 
}

.float-right {
    float: right;
    margin-right: 5px;
    margin-bottom: 2px; 
    clear: both;
}

/* magazine */
.magazine h1 {
    font-size: larger;
}

.magazine p {
    display: block;
}

.magazine img {
    border: solid #333;
    border-width: 0px;
    z-index: 1;
}

.empty-space-left {
    float: left;
    width: 250px;
    height: 350px;
    margin: 10px;
    background-color: transparent; 
    z-index: 1;
}

.empty-space-right {
    float: right;
    width: 150px;
    height: 250px;
    margin: 20px;
    background-color: transparent;
    z-index: 1;
}

/* new columns around object*/
#center {
    width: 150px; 
    height: 200px; 
    position: absolute;
    left: 39%;
    margin-left: 20px;
    background-color: transparent;
    display: block;
    z-index: 2;
}

.hovered-image{
    float: left;
    width: 250px;
    height: 150px;
    margin: 20px;
    background-color: transparent;
    z-index: 2;
} 

p, h1, h2, h3, h4, h5, h6, .timeline-event, .timeline-text, .right{
    transition: filter 1s step-start, background-color 1s step-start;
}

/* invert colors */
p:hover, h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover, .timeline-event:hover, .timeline-text:hover, .right:hover {
    filter: invert(100%);
    -webkit-text-stroke:1px black;
    background-color: inherit;
}

.empty-space-left, .empty-space-right, .empty-space, .hovered-image, #center, .left #block {
    transition: background-color 3s step-start;
}

.empty-space-left:hover, .empty-space-right:hover, .empty-space:hover, .hovered-image:hover, #center:hover, .left #block:hover {
    background-color: black; 
}


.left, .right {width: 49%;}
.left {float: left;}
.right {float: right;}

.left:before, .right:before {
    content: "";
    width: 200px;
    height: 200px;
}
.left:before {
    float: right; 
    shape-outside: center(farthest-side at right);
}
.right:before {
    float: left; 
    shape-outside: center(farthest-side at left);
}


/* panels */
.panel {
    display: block;
    text-align: center;
    margin-bottom: 5px;
    /* border: 2px solid #474b4f; */
}

.panel-content {
    display: block;
    padding: 10px;
    background-color: transparent;
    text-align: center;
    overflow: hidden;   /* new find - to talk to francois */
}

/* timeline */

.timeline-event {
    float: left;
    width: 30%;
    margin: 1%;
    padding: 5px;
    background-color: #c8e6c9;
    border: 1px solid #388e3c;
    text-align: center;
    transition: transform 0.3s, z-index 0.3s;
}

.timeline-text {
    display: block;
    margin: 4%;
    padding: 5px;
}

.timeline-event:hover {
    transform: scale(1.1); 
    left: 50%;
    top: 50%;
}

/* image gallery */
.image-gallery {
    overflow: hidden; 
    width: 100%;
}

.image-gallery img {
    filter: grayscale(100%);
    transition: filter 0.5s ease;
    display: block; 
    float: left; 
    width: 33.33%; 
}

.image-gallery img:hover{

    filter: grayscale(0%);
}