/* Banner */

.save-nautica{
  background: url(../images/games-banner/save-banner.png);
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.totem-destiny{
  background: url(../images/games-banner/totem-banner.png);
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.colourguess{
  background: url(../images/games-banner/guess-banner.png);
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Titles */

h1{
  padding-top: 15px;
  text-align: center;
}

h2{
  padding: 15px 15px 0px 15px;
  margin : -5px auto 0px auto;
  text-align: left;
}

/* Presentation */

.presentation{
  text-align: center;
  margin: 15px 15px 25px 15px;
  background-color: var(--game-gallery);
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  transition: backround-color 1s;
}

.presentation iframe{
  width: 81%;
  margin: 25px auto auto auto;
}

.game-info{
	border: 1px solid rgb(255, 255, 255);
	width: 95%;
	height: auto;
	margin: auto;
  margin-bottom: 15px;
  background-color: rgb(0, 0, 0);
  text-align: start;
}

.game-info td, .game-info td span, .game-info td a{
  color: white;
  width:50%
}

.game-info td:first-child{
  text-align: right;
  font-weight: 800;
  opacity: 0.7;
}

.game-info td{
  padding: 2px 4px;
  text-align: left;
}

iframe{
  border: 0;
  border-radius: var(--border-radius);
}

hr{
  width: 35%;
}

/* PLAY */

.play{
  margin: 15px 15px 20px 15px;
  background-color: var(--game-gallery);
  display: flex;
  flex-direction: row;
  border-radius: 10px;
  transition: backround-color 1s;
}

.play p{
  margin: 15px 0px 20px 15px;
  font-size: 1.4em;
  text-align: start;
}

.play-list{
  display: flex;
  flex-direction: row-reverse;
  text-align: center;
  margin: auto 15px auto auto;
  height: min-content;
  width: 50%;
}

.play-list a{
  margin-left: 10px;
}

.play-list a span{
  color: white;
}

/* BUTTONS */

.game-link-btn{
  color: rgb(255, 255, 255);
  width: auto;
  max-height: 50px;
  
  padding: 5px 15px 5px 15px;
  border-radius: var(--border-radius);

  text-decoration-line: none;
  transition: background 0.2s;
  text-shadow: 1px 1px 3px black;  
}

.itch-btn{
  background: var(--itch);
}

.itch-btn:hover{
  background: var(--itch-hover);
}

.download-btn{
  background: var(--download);
}

.download-btn:hover{
  background: var(--download-hover);
}

/* Organisations Gallery */

#org-gallery{
  margin: auto auto 10px auto;
  height: 10vh;
  width: 95%;

  overflow-y:hidden;
  overflow-x: auto;
  
  display: flex;
  justify-content: center;
  align-items: center;

  background-color: var(--game-gallery);
  box-shadow: 0px 0px 0px black inset;
  border-radius: var(--border-radius);
  transition: background-color 0.5s;
}

#org-gallery a{
  height: 80%;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: height 0.5s, box-shadow 0.5s;
  margin-left: 15px;
  box-shadow: 0px 0px 5px 0px black;
}

#org-gallery img{
  height: 100%;
  border-radius: var(--border-radius);
}

/* Responsive */


@media screen and (max-width: 830px) and (min-width:500px){
  
  .presentation{
    margin: 15px 0px 25px 0px;
    border-radius: 0px;
  }

  /* PLAY */

  .play{
    margin: 15px 0px 20px 0px;
    border-radius: 0px;
  }

  .play-list{
    flex-direction: column-reverse;
    width: auto;
    margin: 10px 15px 10px auto;
  }

  .play-list a{
    margin: 5px 10px 5px auto;
  }

  /* Organisations Gallery */

  #org-gallery{
    margin: 15px 0px 20px 0px;
    border-radius: 0px;
    height: 10vh;
    width: 100%;
  }
}

@media screen and (max-width: 500px) {
  .presentation iframe{
    width: 100%;
    height: 180px;
    margin: 25px auto auto auto;
  }

  .presentation{
    margin: 15px 0px 25px 0px;
    border-radius: 0px;
  }

  .game-info{
    width: 100%;
    height: auto;
    margin: 0px 0px 15px 0px;
  }

  /* PLAY */

  .play{
    margin: 15px 0px 20px 0px;
    border-radius: 0px;
  }

  .play-list{
    flex-direction: column-reverse;
    width: auto;
    margin: 10px 15px 10px auto;
  }

  .play-list a{
    margin: 5px 10px 5px auto;
  }

  /* Organisations Gallery */

  #org-gallery{
    margin: 15px 0px 20px 0px;
    border-radius: 0px;
    height: 10vh;
    width: 100%;
  }
}