@import "shrine.css";

body {
  background-color: gray;
  background-image: url("../image/bg_strike.png");
  background-size: 100%;
  background-position: top;
  /* background-attachment: fixed; */
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

div.container {
  background-color: gainsboro;
  padding: 20px;
  border-radius: 60px;
}

div.card,
.center,
h1 {
  text-align: center;
}

/* main things */
h1 img {
  width: 500px;
}

h2 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  text-transform: uppercase;
  text-align: center;
}

ul {
  padding: 0px;
  text-align: center;
}
nav li {
  display: inline;
  padding: 10px;
  font-size: 20px;
}

/* link */
a {
  color: crimson;
  text-decoration: none;
}

a:hover {
  color: #000;
}

/* The card part */
div.card img {
  height: 200px;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  z-index: -100;
}

div.card img:hover {
  transform: scale(2);
  transition-duration: 0.1s;
  z-index: 100;
}

@media only screen and (max-width: 760px) {
  body {
    background-image: none;
  }
  h1 img {
    width: 400px;
  }
  div.container {
    width: auto;
    margin: 0px;
    border-radius: 0px;
  }
}

@media only screen and (max-width: 430px) {
  /* For images */
  h1 img {
    width: 100%;
  }
}

@media only screen and (max-width: 240px) {
  /* For images */
  div.card img {
    height: 100px;
  }
}