body{
	margin:0;
	padding: 0;
	 /* The image used */
    background-image: url("../img/BOTEV-TEFTERCHE.jpg");

    /* Set a specific height */
    height: 500px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
    font-family: 'Pacifico', cursive;
    color: #9D5257;
}
.header{
	margin-top:5vh;
	margin-bottom:10vh;
	padding-top: 1vh;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.5);
	height: 20vh;
	border-radius: 10px;
	font-size:5vw;
}
.header > span{
	margin:0 auto;
}
.links{
	text-align: center;
	height: 30vh;
	background-color: rgba(255, 255, 255, 0.5);
}

.content > div{
	margin-top: 20vh;
	/* flex:1 1 auto;*/
    /*border:1px red solid;*/
    text-align:center;
    border-radius: 10px;
    margin-top:5px;  /* and that, will result in a 10px gap */
    font-size: 5vw;
    /*padding-top: 5%;*/
}

.hover-book{
	/*color:red;*/
	background-image: url("../img/book1.jpg");
	background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hover-art{
	/*color:red;*/
	background-image: url("../img/art2.jpg");
	background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.hover-art > span, .hover-book > span{
	display: inline-block;
	background-color: rgba(255, 255, 255, 0.5);
	width:70%;
	font-size:5.2vw;
	padding:5px;
}