/*
   New Perspectives on HTML5 and CSS3, 7th Edition
   Tutorial 2
   Case Problem 2
   
   Author: Brennan Hester
   Date:   11/15/2022
   
   Filename: gg_general.css

*/

@charset "utf-8";

@font-face {
   font-family: 'Arcadepix';
   src: url(Arcadepix-Plus-B.ttf) format('woff'),
        url(Arcadepix-Plus-B.ttf) format('truetype');
}

/**
 *  Given a file, i.e. /css/base.css, replaces it with a string containing the
 *  file's mtime, i.e. /css/base.1221534296.css.
 *
 *  @param $file  The file to be loaded. works on all type of paths.
 */
 
/*
   New Perspectives on HTML5 and CSS3, 7th Edition
   Tutorial 2
   Case Problem 2
   
   Bike the Mountains Tour Style Sheet
   Author: Brennan Hester
   Date:   11/15/2022
   
   Filename: gg_general.css

*/

/* Structural Styles */

/* ==================================== */

html {
   background-color: #000000;
   height: 100%;
   width: 100%;
   display: flex;
   flex-direction: column;
   /* IE, only works on <img> tags */
  -ms-interpolation-mode: nearest-neighbor;
  /* Firefox */
  image-rendering: crisp-edges;
  /* Chromium + Safari */
  image-rendering: pixelated;
} 


.bilinear {
   image-rendering: auto;
}

.center_text {
   text-align: center;
}

body {
	margin: 0 0;
	width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
}

section#product_list_container {
   width: 100%;
   background-color: #FF266A;
}


nav#product_list
{
   display: block;
   margin-left: auto;
   margin-right: auto;
   max-width: 960px;
}


nav#product_list > ul {
   font-family: 'Arcadepix';
   font-size: 36pt;
   list-style-type: none;
   line-height: 1.5em;
   background-color: #FF266A;
   text-shadow: 3pt 3pt #7A1271;
   margin: 0px;
   padding: 0px;
   overflow: hidden;
   transform-origin: 50% 50%;
   position: relative;
}


nav#product_list > ul li {
   display: block;
   float: left;
   width: 25%;
}


nav#product_list > ul > li > a {
   display: block;
   color: white;
   text-align: center;
   text-decoration: none;
   transform-origin: 50% 50%;
   transition: .5s ease;
}


nav#product_list > ul > li > a:link, a:visited {
   text-decoration: none;
   color: white;
}


nav#product_list > ul > li > a:hover {
   background-color: #7A1271;
   text-shadow: 3pt 3pt #320C54;
   font-size: 105%;
   transition: .5s ease;
}

section#body_content{
	margin-left: auto;
   margin-right: auto;
	max-width: 960px;
   font-family: 'Arcadepix';
   font-size: 36pt;
   color: #FFFFFF;
   display: block;
   flex: none none auto;
   overflow: hidden;
}

section#stars{
   background-image: url("ms_stars.png");
   background-repeat: repeat-x;
   background-size: 249px 78px;
   position: relative;

   animation: mymove 11.06s;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: .5s ease;
}

section#sky{
   display: flex;
   flex-direction: column;
   min-height: fit-content;
   height: 100%;
   width: 100%;
}

section#earth{
   height: 66px;
   background-image: url("ms_earth.png");
   background-repeat: repeat-x;
   background-size: 579px 66px;
   margin-top: auto;
   animation: mymove2 12.86s;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   /*image-rendering: pixelated;*/
   transition: .5s ease;
}

@keyframes mymove {
  from {background-position-x: -249px;}
  to {background-position-x: 0px;}
}

@keyframes mymove2 {
  from {background-position-x: -579px;}
  to {background-position-x: 0px;}
}

video {
   width: 640px;
   height: 480px;
   max-width: 100%;
   margin-left: auto;
   margin-right: auto;
   transition: .5s ease;
}
 
section#body_content img {
   margin-left: auto;
   margin-right: auto;
   display: block;
   max-width: 100%;
   transition: .5s ease;}/*
   margin-bottom: 1em;
   overflow: hidden;
*/

.container {
   width: fit-content;
   display: block;
   max-width: 80%;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 1em;
}

.yellow_gradient_text {
   background: linear-gradient(to top, #FFB200, #FFEBBF);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   text-align: center;
   text-decoration: none;
}

.kickstarter_gradient_text {
   background: linear-gradient(to top, #06D076, #7DE6B7);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   text-align: center;
   text-decoration: none;
}

/*section#body_content .yellow_gradient_text a:link, section#body_content .yellow_gradient_text a:visited {
   background: linear-gradient(to top, #FFB200, #FFEBBF);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   text-decoration: none;
   transition: .5s ease;
}*/

section#body_content a:hover{
   color: white;
   transition: .5s ease;
   text-decoration: none;
}

.ease{
   transition: .5s ease;
}

section#body_content a{
   transition: .5s ease;
}

.rounded_img {
   border-radius: 0px;
   outline: 6px solid #FFFFFF;
   width: 100%;
   transition: .5s ease;
   display: block;
}

.rounded_img:hover{
   outline: 6px solid #FFB200;
   transition: .5s ease;
}

section#paragraph {
   display: block;
   max-width: 90%;
   margin-left: auto;
   margin-right: auto;
}

section#body_content ul{
   padding-left: 7.5%;
   padding-right: 7.5%;
}

section#find_me_here{
   width: 100%;
   /*background-color: #FF266A;*/
   background: linear-gradient(to top, #7A1271, #FF266A);
}


footer{
   display:flex;
   margin-left: auto;
   margin-right: auto;
   max-width: 960px;
   font-family: 'Arcadepix';
   font-size: 36pt;
   line-height: 1.5em;
   /*background-color: #FF266A;*/
   text-shadow: 3pt 3pt #7A1271;
   background: linear-gradient(to top, #7A1271, #FF266A);
   overflow: hidden;
   transform-origin: 50% 50%;
   
}

.socials {
   display: flex;
   width: fit-content;
   margin-top: .25em;
   margin-bottom: .25em;
   width: 50%;
}

.socials_icons_left {
   width: fit-content;
   display: flex;
   margin-left: auto;
   margin-right: 24px;
}

.socials_icons_right {
   width: fit-content;
   display: flex;
   margin-left: 24px;
   margin-right: auto;
}

/*
.socials_button{
   width: 64px;
   height: 72px;
}

.socials_button:hover{
   width: 64px;
   height: 64px;
   object-fit: cover;
   overflow: hidden;
}
   */

.socials img:hover{
   width: 48px;
   height: 54px;
   object-fit: cover;
   object-position: 0px 0px;
   transition: .25s ease;
}

.socials img{
   width: 48px;
   height: 54px;
   object-fit: cover;
   object-position: 0px 6px;
   transition: .25s ease;
}

.socials a{
   margin: 0px;
   padding: 0px;
   width: 48px;
   height: 54px;
}

section#screenshots div{
   display: flex;
   width: 100%;
   height: 100%;
}

section#screenshots img{
   max-width: 320px;
   height: auto;
   margin: 12px;
   width: 50%;
   outline: 3px solid #FFFFFF;
   transition: .25s ease;
   cursor: zoom-in;
}

section#screenshots img:hover{
   outline: 3px solid #FFB200;
   transition: .25s ease;
}

section#big_screenshot{
   position: fixed;
   max-width: none;
   max-height: none;
   height: 100%;
   width: 100%;
   transform: translate(-50%, -50%);
   top: 50%;
   left: 50%;
   pointer-events: none;
   cursor: zoom-out;
   /*transition: .5s ease;*/
}

section#darken {
   opacity: 0%;
   height: 100%;
   width: 100%;
   position: absolute;
   background-color: black;
   transition: .25s ease;
}

section#big_screenshot img{
   /*transition: .5s ease;*/
   height: 90%;
   width: auto;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   max-width: none;
   opacity: 0%;
   outline: 6px solid #FFFFFF;
   transition: .25s ease;
}

.logo{
   height: 72px;
   width: 690px;
   transition: .5s ease;
   margin-left: auto;
   margin-right: auto;
   max-width: 90%;
}

iframe {
   max-width: 100%;
   transition: .5s ease;
   margin-left: auto;
   margin-right: auto;
   display: block;
}

.masks
{
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   max-width: 90%;
   height: auto;
}

/*
section#body_content iframe {
   display: block;
   margin-left: auto;
   margin-right: auto;
   max-width: 1280px;
   margin-bottom: 1em;
}

*.responsive-iframe {

   border-radius: 10px;
   border-style: solid;
   border-color: rgb(236, 88, 88);
   border-width: 3px;

   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   width: 100%;
   height: 100%;
   border: none;
}

*/

@media screen and (max-width: 960px){

  

section#body_content{
margin-left: auto;
margin-right: auto;
max-width: 960px;
font-family: 'Arcadepix';
font-size: 24pt;
color: #FFFFFF;
display: block;
flex: none none auto;
overflow: hidden;

}

  

section#product_list_container {
width: 100%;
background-color: #FF266A;
}

  

nav#product_list
{
display: block;
margin-left: auto;
margin-right: auto;
max-width: 960px;
}


nav#product_list > ul {
font-family: 'Arcadepix';
font-size: 24pt;
list-style-type: none;
line-height: 1.5em;
background-color: #FF266A;
text-shadow: 2pt 2pt #7A1271;
margin: 0px;
padding: 0px;
overflow: hidden;
transform-origin: 50% 50%;
position: relative;
}

  
  

nav#product_list > ul li {
display: block;
float: left;
width: 25%;
}

  
.rounded_img {
   border-radius: 0px;
   outline: 3px solid #FFFFFF;
   transition: .5s ease;
}

.rounded_img:hover{
   outline: 3px solid #FFB200;
   transition: .5s ease;
}

  

nav#product_list > ul > li > a {
display: block;
color: white;
text-align: center;
text-decoration: none;
transform-origin: 50% 50%;
transition: .5s ease;
}

  
  

nav#product_list > ul > li > a:link, a:visited {
text-decoration: none;
color: white;
}

  
  

nav#product_list > ul > li > a:hover {
background-color: #7A1271;
text-shadow: 2pt 2pt #320C54;
font-size: 105%;
transition: .5s ease;
}

  

section#body_content img {
margin-left: auto;
margin-right: auto;
max-width: 100%;
height:auto;
display: block;
}

  

section#screenshots div{
display: flex;
width: 100%;
transition: .25s ease;
}

  

section#screenshots img{
max-width: 240px;
max-height: 180px;
margin: 10.2px;
width: 50%;
height: 50%;
margin-left: auto;
margin-right: auto;
outline: 2px solid #FFFFFF;
transition: .25s ease;
cursor: zoom-in;
max-width: 45%;
height: auto;
}

  

section#screenshots img:hover{
outline: 2px solid #FFB200;
transition: .25s ease;
}

  

section#big_screenshot{
position: fixed;
max-width: none;
max-height: none;
height: 100%;
width: 100%;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
pointer-events: none;
cursor: zoom-out;
/*transition: .5s ease;*/
}

  

section#big_screenshot img{
/*transition: .5s ease;*/
width: 90%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: none;
opacity: 0%;
outline: 3px solid #FFFFFF;
transition: .25s ease;
}

  

.logo{
height: 48px;
width: 460px;
transition: .5s ease;
margin-left: auto;
margin-right: auto;
max-width: 90%;
}

  

section#stars{
background-image: url("ms_stars.png");
background-repeat: repeat-x;
position: relative;
background-size: 156px 48px;
animation: mymove 11.06s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-timing-function: linear;
transition: .5s ease;
}

  

section#sky{
display: flex;
flex-direction: column;
min-height: fit-content;
height: 100%;
width: 100%;
}

  

section#earth{
height: 44px;background-image: url("ms_earth.png");
background-repeat: repeat-x;
background-size: 386px 44px;
margin-top: auto;
animation: mymove2 12.86s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-timing-function: linear;
transition: .5s ease;
}

  

@keyframes mymove {

from {background-position-x: -156px;}

to {background-position-x: 0px;}

}

  

@keyframes mymove2 {

from {background-position-x: -386px;}

to {background-position-x: 0px;}

}

  

}

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

@media screen and (max-width: 720px){
   
   html {
   background-color: #000000;
   height: 100%;
   display: flex;
   flex-direction: column;
} 

body {
	margin: 0 0;
	width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
}

section#product_list_container {
   width: 100%;
   background-color: #FF266A;
}


nav#product_list
{
   display: block;
   margin-left: auto;
   margin-right: auto;
   max-width: 100%;
}


nav#product_list > ul {
   font-family: 'Arcadepix';
   font-size: 12pt;
   list-style-type: none;
   line-height: 1.5em;
   background-color: #FF266A;
   text-shadow: 1pt 1pt #7A1271;
   margin: 0px;
   padding: 0px;
   overflow: hidden;
   transform-origin: 50% 50%;
   position: relative;
}


nav#product_list > ul li {
   display: block;
   float: left;
   width: 25%;
}


nav#product_list > ul > li > a {
   display: block;
   color: white;
   text-align: center;
   text-decoration: none;
   transform-origin: 50% 50%;
   transition: .5s ease;
}


nav#product_list > ul > li > a:link, a:visited {
   text-decoration: none;
   color: white;
}


nav#product_list > ul > li > a:hover {
   background-color: #7A1271;
   text-shadow: 1pt 1pt #320C54;
   font-size: 105%;
   transition: .5s ease;
}

section#body_content{
	margin-left: auto;
   margin-right: auto;
	
   font-family: 'Arcadepix';
   font-size: 12pt;
   color: #FFFFFF;
   display: block;
   flex: none none auto;
   overflow: hidden;
}

section#stars{
   background-image: url("ms_stars.png");
   background-repeat: repeat-x;
   position: relative;
   background-size: 78px 24px;

   animation: mymove 11.06s;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: .5s ease;
}

section#sky{
   display: flex;
   flex-direction: column;
   min-height: fit-content;
   height: 100%;
   width: 100%;
}

section#earth{
   height: 22px;
   background-image: url("ms_earth.png");
   background-repeat: repeat-x;
   background-size: 193px 22px;
   margin-top: auto;
   animation: mymove2 12.86s;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   transition: .5s ease;
}

@keyframes mymove {
  from {background-position-x: -78px;}
  to {background-position-x: 0px;}
}

@keyframes mymove2 {
  from {background-position-x: -193px;}
  to {background-position-x: 0px;}
}

section#body_content img {
   margin-left: auto;
   margin-right: auto;
   max-width: 100%;
   height:auto;
   display: block;}/*
   margin-bottom: 1em;
   overflow: hidden;
*/

.logo{
   height: 24px;
   width: 230px;
   transition: .5s ease;
   max-width: 90%;
   margin-left: auto;
   margin-right: auto;
}

.container {
   width: fit-content;
   display: block;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 1em;
   max-width: 80%;
}

.yellow_gradient_text {
   background: linear-gradient(to top, #FFB200, #FFEBBF);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   text-align: center;
   text-decoration: none;
}

.kickstarter_gradient_text {
   background: linear-gradient(to top, #06D076, #7DE6B7);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   text-align: center;
   text-decoration: none;
}

video {
   width: 320px;
   height: auto;
   transition: .5s ease;
   max-width: 100%;
   margin-left: auto;
   margin-right: auto;
}

iframe {
   max-width: 100%;
   transition: .5s ease;
   margin-left: auto;
   margin-right: auto;
   display: block;
}

/*section#body_content .yellow_gradient_text a:link, section#body_content .yellow_gradient_text a:visited {
   background: linear-gradient(to top, #FFB200, #FFEBBF);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   text-decoration: none;
   transition: .5s ease;
}*/

section#body_content a:hover{
   color: white;
   transition: .5s ease;
   text-decoration: none;
}

section#paragraph {
   width: 90%;
   margin-left: auto;
   margin-right: auto;
}

section#body_content ul{
   padding-left: 7.5%;
   padding-right: 7.5%;
}

section#find_me_here{
   width: 100%;
   height: fit-content;
   /*background-color: #FF266A;*/
   background: linear-gradient(to top, #7A1271, #FF266A);
}


footer{
   display:flex;
   margin-left: auto;
   margin-right: auto;
   max-width: 90%;
   height:fit-content;
   font-family: 'Arcadepix';
   /*background-color: #FF266A;*/
   text-shadow: 1pt 1pt #7A1271;
   background: linear-gradient(to top, #7A1271, #FF266A);
   overflow: hidden;
   transform-origin: 50% 50%;
   height: fit-content;
}

.socials {
   display: flex;
   width: fit-content;
   margin-top: .25em;
   margin-bottom: .25em;
   width: 50%;
   max-height: 80%;
}

.socials_icons_left {
   width: fit-content;
   display: flex;
   margin-left: auto;
   margin-right: 8px;
   max-width: 90%;
   max-height: 90%;
}

.socials_icons_right {
   width: fit-content;
   display: flex;
   margin-left: 8px;
   margin-right: auto;
   max-width: 90%;
   max-height: 90%;
}

/*
.socials_button{
   width: 64px;
   height: 72px;
}

.socials_button:hover{
   width: 64px;
   height: 64px;
   object-fit: cover;
   overflow: hidden;
}
   */

.socials img:hover{
   width: 32px;
   height: 36px;
   object-fit: cover;
   object-position: 0px 0px;
   transition: .25s ease;
   max-width: 100%;
   height:auto;
}

.socials img{
   display: flex;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: 0px 4px;
   max-width: 100%;
   height:auto;
}

.socials a{
   margin: 0px;
   padding: 0px;
   width: 32px;
   height: 36px;
   max-width: 20%;
   transition: .25s ease;
   max-height: fit-content;
}

section#screenshots div{
   display: flex;
   width: 100%;
   height: 100%;
   transition: .25s ease;
}

section#screenshots img{
   max-width: 160px;
   height: auto;
   margin: 7px;
   width: 50%;
   margin-left: auto;
   margin-right: auto;
   outline: 1px solid #FFFFFF;
   transition: .25s ease;
   cursor: zoom-in;
   max-width: 45%;
   height: auto;
}

section#screenshots img:hover{
   outline: 1px solid #FFB200;
   transition: .25s ease;
}

section#big_screenshot{
   position: fixed;
   max-width: none;
   max-height: none;
   height: 100%;
   width: 100%;
   transform: translate(-50%, -50%);
   top: 50%;
   left: 50%;
   pointer-events: none;
   cursor: zoom-out;
   /*transition: .5s ease;*/
}

section#darken {
   opacity: 0%;
   height: 100%;
   width: 100%;
   position: absolute;
   background-color: black;
   transition: .25s ease;
}

section#big_screenshot img{
   /*transition: .5s ease;*/
   width: 90%;
   height: auto;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   max-width: none;
   opacity: 0%;
   outline: 2px solid #FFFFFF;
   transition: .25s ease;
}

.rounded_img {
   border-radius: 0px;
   outline: 2px solid #FFFFFF;
   transition: .5s ease;
}

.rounded_img:hover{
   outline: 2px solid #FFB200;
   transition: .5s ease;
}

 }