a, a:link, a:active, a:visited {
    text-decoration:none;
}

body {
    margin: 2px;
    background-color: black;
    font-family: "Open Sans";
    font-weight: 300;
    color: white;
}

h1 {
    font-size: 56px;
    font-weight: 500;
    margin: 0.7em;
    text-align: center;
}

.bookmark {
    margin-top: 4px;
    padding-top: 9%;
    padding-bottom: 2%;
    -webkit-filter: grayscale(80%);
    transition: -webkit-filter 0.5s;
}
.bookmark:hover {
/*  -webkit-filter: none;*/
    -webkit-filter: saturate(130%);
}
.bookmark span{
    font-size: 48px;
    color: #eee;
    margin-left: 10%;
    text-shadow: black 6px 4px 8px ;
    background: rgba(160, 160, 160,0.3);
    padding: 5px;
    border-radius: 0.2em;
}
/*
 * url(attr()) is not really such a good combo. expand by hand
 */
#qt-io {
    background-image: url("qt-io.png");
    background-size: 100% auto;
}
#youtube-tv {
    background-image: url("youtube-tv.png");
    background-size: 100% auto;
}
#osm {
    background-image: url("osm.png");
    background-size: 100% auto;
}
#ddg {
    background-image: url("ddg.png");
    background-position: 0% 25%;
    background-size: 100% auto;
}
#reddit {
    background-image: url("reddit.png");
    background-size: 100% auto;
}
/* Flexbox stuff */
#links-container {
    display:flex;
    flex-direction: column;
}
#examples-container {
    display:flex;
    flex-direction: row;
}
.example {
    flex-grow: 1;
    transition: flex-grow 0.5s;
    width: 15%;
    margin:2px;
}
.example:hover {
    flex-grow: 3;
}
.example_image{
        width: 100%;
}