body{ 
    background: white;
    margin: 0;
    padding: 0;
    font-family: Arial;
  }
  
  .header {
  	  display: flex;
  }

  .header-logo {
		margin: auto;
        width: 300px;
		margin-bottom: 40px;
		box-shadow: rgba(0, 0, 0, 0.55) 0px 5px 15px;
		border-radius: 16px;
		margin-top: 8px;
  }

  .languages {
  }

  .sociallinks {
  	  display: flex;
  }

  .facebookbutton {
  	  background-color: #385898;
	  color: white;
	  border-radius: 4px;
	  padding: 2px 12px;
	  cursor: pointer;
	  font-weight: bold;
	  width: 120px;
	  text-align: center;
  }

  .flag {
  	  width: 64px;
	  cursor: pointer;
  }

  .game {
      display: flex;
      justify-content: center;
      margin: 16px;
  }

  .game-text {
      display: inline-block;
	  font-size:140%;
      width: 50%;
  }

  .container {
    width:100%;
  }

  .location {
      font-size: 200%;
      margin-left: 32px;
      margin-top: 16px;
      clear:both;
  }
  
  .book-wrap {
      position: relative;
      margin: 32px;
      min-height: 600px;
      float: left;
  }

  .book {
    width: 225px;
    height: 350px;
    position:relative;
    text-align: center;
  }
  
  .book-cover {
    position: absolute;
    z-index:1;
    width: 100%;
    height: 100%;
    transform-origin: 0 50%;
    -webkit-transform-origin: 0 50%;
    background: #111;
    background-size:cover;
    border-radius: 3px;
    box-shadow: 
      inset 4px 1px 3px #ffffff60,
      inset 0 -1px 2px #00000080;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
  }

  .book-author {
  
  }

  .book-location {
	color: gray;
	padding: 2px;
	font-size: 110%;
	border-radius: 4px;
	display: inline-block;
	font-weight: bold;
	margin-top: 4px;
  
  }

  .book-difficulty {
  
  }

  .book-blurb {
      width: 300px;
	  min-height: 150px;
      margin-top: 24px;
      text-align: left;   
  }
  
  .raudahjolid {
    background: url('https://images.squarespace-cdn.com/content/v1/605e2daa9f201452858622a4/f664d2f6-0f49-42b5-9f37-1f4e6f83bf96/raudahjolid.png?format=500w');
  }
  
  .cover2 {
    background: url('https://images.squarespace-cdn.com/content/v1/605e2daa9f201452858622a4/3bd35efb-bf59-4af4-bb43-d5e81c19f8c2/V%C3%ADkin+%281%29.png?format=500w');
  }
  
  .cover3 {
    background: url('https://images.squarespace-cdn.com/content/v1/605e2daa9f201452858622a4/409bf578-593e-4c7d-8bd6-6fd24f02f7e6/hofnin.png?format=500w');
  }
  
  .book .book-cover {
    background-size: 100% 100%;
  }
  
  
  .effect {
    width: 20px;
    height: 100%;
    margin-left: 10px;
    border-left: 2px solid #00000010;
    background-image: linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
    transition: all .5s ease;
  }
  
  .light {
    width: 90%;
    height: 100%;
    position: absolute;
    border-radius: 3px; 
    background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 100%);
    top: 0;
    right:0;
    opacity: .1;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
  }
  
  .book:hover { cursor:pointer; }
  
  .book:hover .book-cover {
    transform: perspective(2000px) rotateY(-30deg);
    -webkit-transform: perspective(2000px) rotateY(-30deg);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    box-shadow: 
      inset 4px 1px 3px #ffffff60,
      inset 0 -1px 2px #00000080,
      10px 0px 10px -5px #00000030
  }
  
  .book:hover .effect {
    width: 40px;
   /** margin-left:13px;
    opacity: 0.5; **/
  }
  
  .book:hover .light {
    opacity: 1;
    width: 70%;
  }
  
  .book-inside{
    width: calc(100% - 2px);
    height:96%;
    position:relative;
    top: 2%;
    border: 1px solid grey;
    border-radius:3px;
    background: white;
    box-shadow: 
    10px 40px 40px -10px #00000030,
    inset -2px 0 0 grey,
    inset -3px 0 0 #dbdbdb,
    inset -4px 0 0 white,
    inset -5px 0 0 #dbdbdb,
    inset -6px 0 0 white,
    inset -7px 0 0 #dbdbdb,
    inset -8px 0 0 white,
    inset -9px 0 0 #dbdbdb;
  }
  

  
  
  .btn {
    position:relative;
    background: #aaa;
    color: #fff;
    font-weight: bold;
    padding: 15px 30px;
    font-size: 16px;
    letter-spacing:1px;
    border-radius: 50px;
    bottom: -50px;
    display: inline-block;
    opacity: 0;
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
  }
  
  .book:hover .btn, .book:hover .title {
    opacity: 1;
  }