body {
    /* background-image:none; */
    background-color:rgb(148,207,150);
    width: 100%;
    height: 100%;
}


.card {
  height:300px;
  width:360px;
  background-color:#FDFDFD;
  text-align:center;
  padding-right:30px;
  padding-left:30px;
  margin-left:2px;
  margin-right:2px;
  cursor: pointer;
  border-radius:5px;
  position:relative;
  z-index: 1337;
}

.cardNadpis {
  padding-top:60px;
  font-size:3em;
}

.cardText {
  font-size:1.25em;
  padding-top:20px;
}

.card:hover {
  box-shadow: 4px 4px 10px rgba(76, 175, 80, 1), 2px 2px 6px rgba(76, 175, 80, 1);
  transition: box-shadow 0.25s ease-out;
  color:white;
  background-color:rgb(134,201,136);
  z-index:5;
}

.flex {
  display: grid;
  grid-template-columns: auto auto auto auto;
  margin-top:50px;
  justify-content: center;
  align-content: center;
  /* flex-wrap: wrap; */
  margin-bottom:60px;
}

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


.outerCard {
  margin-top: 5px;
}

@media only screen and (max-width: 1460px) {
  .cardNadpis {
    padding-top:60px;
    font-size:2em;
  }
  
  .cardText {
    font-size:1em;
    padding-top:20px;
  }

  .card {
    width: 300px;
    height: 230px;
  }
}

@media only screen and (max-width: 1220px) {
  .flex {
    grid-template-columns: auto auto;
  }
}

@media only screen and (max-width: 600px) {
  .flex {
    grid-template-columns: auto;
    margin-top: 20px;
  }
}