/* 
Filename: styles.css
Author: Jordan Walsh
*/
/* Root Variable */
:root {
 --pageColor: #ffffff;
}
/* Web Font */
@font-face {
 font-family: headlineFont;
 src: url(webfonts/Amatic_SC\,Oswald/AmaticSC-Regular.ttf) format("truetype");
}
/* Body */
body {
 font-family: Arial, Helvetica, sans-serif;
margin: 3rem;
 padding: 0;
 box-sizing: border-box;
background: url(images/stux-black-1072366.jpg) no-repeat center center fixed;
 background-size: cover;
}
/* Containers */
.container  {
 background-color: rgba(0, 0, 0, 0.7);
 padding: 20px;
 border-radius: 10px;
}
/* Heading */
h1 {
 font-family: headlineFont, Arial, Helvetica, sans-serif;
 text-shadow: 3px 3px 5px #000000;
 text-align: center;
}
/* Footer  */ 
footer {
 font-family: Arial, Helvetica, sans-serif;
 text-align: center;
 font-size: .75rem;
 margin-top: 50px;
 margin-bottom: 50px;
}
/* Hyperlink */
a {
  text-decoration: underline;
 color: var(--pageColor);
}
a:link {
 text-decoration: underline;
 color: var(--pageColor);
 font-weight: bold;
}
a:visited  {
 text-decoration: underline;
 color: #d3d3d3;
}
a:hover  {
 text-decoration: none;
 color: #ffd700;
 font-weight: bold;
}
a:active   {
 text-decoration: underline wavy red;
 font-weight: bold;
}
/* Responsive*/
.responsive-text {
 font-size: 3rem;
 line-height: 1.5;
 color: white;
}
/* Intro Paragraph */
p.responsive-text {
font-size: 1rem;
 line-height: 1.5;
 color: white;
 text-align: justify;
}
/* Image Descriptions */
.image-text {
 font-size: 1rem;
 text-align: center;
 margin-top: 20px;
 color: white;
}
/* Grid Layout */
.gallery {
display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 30px;
 margin-top: 40px;
}
/* Image Style */
.gallery img {
 width: 100%;
 height: 400px;
 object-fit: contain;
 border-radius: 10px;
 background-color: black;
}
/* Media Query */
@media screen and (max-width: 600px) {
 .responsive-text {
 font-size: 1.5rem;
}
.gallery {
 grid-template-columns: 1fr;
 }
}