/*Ja kaikki mitä halutaan asettaa desktopille erilaiseksi*/
@media screen and (min-width: 850px) {

  html, body {
    font-size: 22px;
  }

  header h1 {
    font-size: 3rem;
  }

  h1, h2, h3 {
    font-size: 2rem;
  }

  .topnav a.menu-icon:hover { /*Mobiilissa ei hover efektiä, jäisi turhaksi*/
    background-color: #b0cef0;
    color: black;
  }

  .container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 170px;  /*TYHJÄT REUNAT dt-näkymässä*/
  }

  .aboutGame {
    margin: 15px;
  }

  .galleryContainer{
    padding: 10px;
    margin: 0px 170px;
    grid-template-columns: repeat(4, 1fr);
  }

  .galleryContainer img:hover {
    transform: scale(1.1);
  }

  .full-img img {
    width: 100%;
    max-width: 400px;
  }

  .muusaContainer {
    grid-template-columns: 75% 15%; /*Teksti ja logo vierekkäin*/
    align-items: center;
    column-gap: 40px;
    text-align: center;
    justify-items: start;
  }

  .logo img {
    max-width: 200px;
    height: auto;
  }

  /*Hoveroidessa näkyvillä*/
  .logo:hover .overlay {
    opacity: 0.5; /*Läpikuultava*/
  }

  /*Hover-efektin teksin asetukset*/
  .text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
  }

  .teamContainer {
    padding: 0 170px;
  }

  footer h2 {
    font-size: 24px;
  }

  .yhteisContainer {
    width: 450px;
  }

  .slider {
    max-width: 450px;
  }

  .slider-nav a:hover {
    opacity: 1;
  }
}

@media screen and (min-width: 1800px) {

  header h1 {
    font-size: 3.2rem;
  }

  h1, h2, h3 {
    font-size: 2.2rem;
  }

  .container {
    max-width: 100%;
    padding: 0 350px;  /*TYHJÄT REUNAT dt-näkymässä*/
  }

  .aboutGame {
    margin: 80px 0px; /*TOP & BOTTOM, RIGHT & LEFT*/
  }

  .galleryContainer{
    margin: 0px 350px;
  }

  .full-img img {
    width: 100%;
    max-width: 700px;
  }

  .muusaContainer {
    grid-template-columns: 70% 30%; /*Teksti ja logo vierekkäin*/
    column-gap: 150px;
  }

  .logo img {
    max-width: 300px;
    height: auto;
  }

  .teamContainer {
    padding: 0 350px;
  }

  .selfie img{
    max-width: 200px;
    width: 200px;
    height: auto;
  }

  .yhteisContainer {
    width: 500px;
  }

  .slider {
    max-width: 500px;
  }
}