@font-face {
  font-family: myFirstFont;
  src: url(04b_03.ttf);
}

body {
  max-width: 960px;
    margin: 0 auto;
  /*background-color: #ebf2f8;*/

  font-family: myFirstFont;
  overflow-x: hidden;
  background: url('images/body.jpg') top center no-repeat;
  background-color: #dae8db;
}


#head {
  width: 100%;
  height: 0;
  padding-top: 53.3%;
  background-image: url('images/title.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  float:right;
}

#javaedition {width: 50%; float:left; }
#bedrockedition {width: 50%; float:left; }

#galleryImage {
  max-width: 750px;
  width: 100%;
  height: 0;
  padding-top: 550%;
  background:url('images/gallery.jpg') top center no-repeat;
  background-size: contain;
  display:inline-block;
}
@media (max-width: 750px) {
  #galleryImage {float:left; width: 100%; height: 0; padding-top: 710%;}
}

@media (max-width: 600px) {
  #javaedition {width: 100%; float:left; }
  #bedrockedition {width: 100%; float:left; }
}


.download {  width: 33%;  height:0;  padding-top: 11%;  background:url('images/download.png');  background-size: contain;  background-repeat: no-repeat;  float:left; }
.download:hover {  background-position: 0 -10px; -webkit-filter: drop-shadow(0px 10px 3px #88998C); filter: drop-shadow(0px 10px 3px #88998C); }

.gallery {  width: 33%;  height:0;  padding-top: 11%;  background:url('images/gallery.png');  background-size: contain;  background-repeat: no-repeat;  float:left;  }
.gallery:hover {  background-position: 0 -10px; -webkit-filter: drop-shadow(0px 10px 3px #88998C); filter: drop-shadow(0px 10px 3px #88998C); }

.info {  width: 33%;  height:0;  padding-top: 11%;  background:url('images/info.png');  background-size: contain;  background-repeat: no-repeat;  float:left;  }
.info:hover {  background-position: 0 -10px; -webkit-filter: drop-shadow(0px 10px 3px #88998C); filter: drop-shadow(0px 10px 3px #88998C); }

.java {width: 100%; height: 0; padding-top:25%; background:url('images/java.png');  background-size: contain;  background-repeat: no-repeat;  float:left; display:block;}
.java:hover {  margin-top: -5px; margin-bottom: 5px; -webkit-filter: drop-shadow(0px 5px 2px #88998C); filter: drop-shadow(0px 5px 2px #88998C); }

.bedrock {width: 100%; height: 0; padding-top:25%; background:url('images/bedrock.png');  background-size: contain;  background-repeat: no-repeat;  float:left;}
.bedrock:hover {  margin-top: -5px; margin-bottom: 5px; -webkit-filter: drop-shadow(0px 5px 2px #88998C); filter: drop-shadow(0px 5px 2px #88998C); }

a.ig {display: block; width: 30px;  height: 43px; text-indent: -5000px; background:url('images/ig.png') no-repeat; text-decoration:none; background-position: 0px -16px; margin: 0 auto; padding-right: 5px; float:left;}
a:hover.ig {background-position: 0px -11px; -webkit-filter: none; filter: none;}

a.fb {display: block; width: 30px;  height: 43px; text-indent: -5000px; background:url('images/fb.png') no-repeat; text-decoration:none; background-position: 0px -16px; margin: 0 auto; padding-right: 5px; float:left;}
a:hover.fb {background-position: 0px -11px;}

a.andrejolicoeur {display: block; width: 274px;  height: 43px; text-indent: -5000px; background:url('images/andrejolicoeur.png') no-repeat; text-decoration:none; background-position: 0px -16px; margin: 0 auto; padding-right: 5px; float:left;}
a:hover.andrejolicoeur {background-position: 0px -11px;}