/*------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------*/

body {
  margin: 0;
  border: 0;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  background-color: black;
  padding-bottom: 1vw;
  padding-right: 1vw;
}

.header-variants-button {
  background-color: rgb(217,32,0);
  
}

.variantlink {
 
  color: red;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 1.5vw;
  margin-top: 1vw;
  margin-bottom: 1vw;


}

a {
    text-decoration: none; /* Removes the underline */
    color: inherit;      /* Inherits the color from its parent (usually black or default text color) */
}

/* CSS for Landscape Here */

#wrapper {width:1024px}

.link-container {
  /*border: solid 1px pink;*/
  display: inline-grid;
  grid-template-columns: 25vw 25vw 25vw;
  width: 75vw;
  grid-template-rows: repeat(64, 2.5vw);  
  margin-left: 1vw;
  grid-auto-flow: column;
  height: 160vw;
}




/* CSS for portrait Here */

@media only screen and (orientation:portrait){
	#wrapper {width:768px}
	.hello-proof {
	color: red;
}

.variantlink {
 
  color: red;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 5vw;
  margin-top: 1.5vw;
  margin-bottom: 2vw;

}

.link-container {
  /*border: solid 1px pink;*/
  display: inline-grid;
  grid-template-columns: 95vw;
  width: 95vw;
  grid-template-rows: repeat(192, 8vw);  
  margin-left: 1vw;
  grid-auto-flow: column;
  height: 160vw;
  margin-top: 1vw;
}

.link-div {
  display: flex;
  justify-content: center;

}


}