/*choices for linked fonts 
font-family: 'Caveat', cursive;
font-family: 'Henny Penny', cursive;
font-family: 'Orbitron', sans-serif;
font-family: 'Unica One', cursive;
font-family:'Unica One', sans-serif;

/*things - 
to get it to center and make button not take the whole line
body {font-family:; background: color; color: color; font-size: ?em; (1em=16px) line-height: 1.5;
    text-align:center; display:block; (or inline-block to just use content to size) margin:0;

img {display:block; width:100%; (of the container/parent) height: auto;

h1, h2, h3 {margin:0; padding: 1em 0;}

p {margin:0; padding: 1em 0;}

-----------------

    .main-nav a {
        background:aquamarine;
        display:inline-block;
        align-items:center;
        text-decoration:none;
        padding: 0.9rem;
        margin:.42rem;
        text-align: center;
        color:maroon;
        font-size: 1.1rem;
        box-shadow: 0px 5px 15px black;
        border-radius: 1rem 0rem 1rem 0rem;
        transition: 2s;
        border-top: 4px goldenrod;
    }

    .main-nav a:hover {
        background: black;
        color:white;
    
    }

*/

/* resets so the browser defaults don't put spacing around
and the box includes extras inside the total size specified
sets the standard font for the site*/

* { padding:0;
    margin:0;
    box-sizing: border-box;
    font-family:'Orbitron', sans-serif;
    align-content:center;
}

 /* control+forward slash makes a comment */
 /* reset from browser defaults end */
/* vh set to 100 to give each image the full height of the screen for scroll effect */
/*body {
    line-height: 1.6;
    font-kerning: 1.5;
    height:100vh;
    background: black;
    color:aqua;
    overflow: hidden;
    font-family:'Orbitron', sans-serif;
}

/* this is part guess but should be keeping the contents at 100% within the body size */
/* the snap thing looked cool but doesn't work on several browsers, site functions without it but I'm leaving it
in for those with a browser that can enjoy the image springing on its own to whichever side has the most scroll */
.container {
    width:100vw;
    height:100%;
    margin: 0 auto;
  
    /* border: 8px solid green;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "mp4 mp4 mp4"
                        "anim anim anim"
                        "info info info"; */
   
}

#mp4 .back-video {
position:fixed;
top:0;
left:0;
width:100vw;
height:100%;
z-index:-99;
display: block;
background-size:cover;
margin-bottom:45px;
    
}
/* sets up the stack - back image */
.open {
    width:100%;
    height:100vh;
    position:relative;
    
}
/*
.hero {
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(12,3,51,0.3), rgba(12,3,51,0.3));
    position: relative;
    padding:0 5%;
    display:flex;
    align-items:center;
    justify-content:center;
}
*/

/* top image for stack that content is visible through: fixed doesn't move */
.over {
    width: 100%;
    height:100vh;
    position:fixed;
    top:0;
    left:0;
    z-index: 1;
    
    
}
/* separates the top scroll image from entrance request area */
.container #anim {
    display:block;
    position:relative;
    align-items:center;
    justify-content:center;
    align-content:center;
    text-align:center;
    
    width:100vw;
    height:auto;
    margin-top:50px;
    padding-top:25px;
    
}
/* Neutrino's spaceport and lounge - pink h1 */
.container #anim h1 {
    padding-top:50px;
    padding-bottom:10px;
    position:relative;
    color:pink;
    background-color: rgba (0, 0, 0, 0.7);
    margin:20px auto;
    letter-spacing:1.4px;
    text-shadow: 1px 4px 8px black; 

}
/* ties the h1 to the request h2 */
.container #anim h2 {
    background-color:aqua;
    height: 100%;
    text-align:center;
    align-content:center;
    justify-content:center;
    display:flex;
    align-items:bottom;
    position:absolute;
    font-size:1.5rem;
    letter-spacing:1.4px;
    color:aqua;
    text-shadow: 1px 4px 8px black;
    margin-top:77px;
    padding-top:110px;

}
/* this is supposed to animate opacity in when hover is activated */
section #authorized {
    height:770px;
    padding-top:110px;
    margin-top:155px;
    background-color: blue;
    border-radius: 10px solid orange;
    color:aqua;
    display:block;
    align-items:center;
    justify-content:center;
    width:100%;
    
}

#anim {
    font-size: 1.5rem;
    background:transparent;
    padding-bottom:18px;
    
    display:block;
    margin:4px;
    transition: 2s;
}
/* the link styles */
#anim nav a {
    text-decoration:none;
    font-size: 2rem;
    background:greenyellow;
    padding:18px;
    border-radius:9px;
    display:inline-block;
    margin:4px;
    z-index:100;
    margin-bottom:90px;

}
/* the link hover effect styled */
#anim nav a:hover {
    background:rgba(23 23 23 0.7);
    padding:14px;
    border-radius:10px;
    transition: .75s ease-in-out;
    border-bottom: 5px solid white;
    color:purple;
    box-shadow: 0 0 14px rgba(197, 4, 155, 0.879);
    z-index:100;
    
}

/* Bonus, if they keep scrolling */
.end {
    align-items:center;
    height:100%;
    display:block;
    justify-content:center;
    width:100%;
    font-size: 1.2rem;
    text-align:center;
    background-color:rgba(236, 71, 5, 0.479);
    min-height: 50px;
    justify-content: center;
    text-shadow: 0px 0px 2px steelblue;
    background-color: black; 
    padding:40px;
}

#authorized h1 {
    
    align-items:center;
    justify-content:center;
    display:flex;
    font-size:1.6rem;
    letter-spacing:1.4px;
    text-shadow: 1px 4px 8px black; 
    
}

#anim {
    display:block;
}



#authorized {
    color:lightblue;
    padding-top:7px;
    text-align:center;
    align-items:center;
    justify-content:center;
    display:flex;
    line-height: 1.3;
    font-size: 1.3rem;
    letter-spacing: 1.4px;
    background:blue;
    padding-bottom:15px;
}

.info {
    grid-area: info;
    display: block;
    position:relative;
    align-items:center;
    justify-content:center;
    width:100vw;
    height:100%;
    padding-top:5px;
    padding-bottom:200px;
    background-color:white;
    color:aqua;
}

.info p {
    color:green;
    text-align:center;
    justify-content:center;
    display:flex;
}

.clear p {
    display:flex;
    flex-direction: column;
    text-decoration:none;
    align-items:center;
    justify-content:center;
    align-content:center;
    padding: 30%;
    text-decoration:none;

}

.info img {
    width:100%;
    padding-top:90px;
    align-items:center;
    justify-content:center;
    align-content:center;
    align-self:center center;
}

/* keeps the navigation always at the top; z-index 3 ensures it stays on topmost layer 
.navbar {
    position:fixed;
    display:flex;
    top:0;
    z-index: 111;
    width:100%;
    height: 60px;
    background: rgba(0,0,0,0.7);
    
}

/* puts the text in the center, removes underlines and wants to go right, in a row
.navbar ul {
    display:flex;
    list-style:none;
    width:100%;
    justify-content:center;
  
}
/* responsive
.navbar ul li {
    margin: 0 1rem;
    padding: 1rem;

}
/* sets up the hover effect
.navbar ul li a {
    text-decoration:none;
    color: pink;
  
}

.navbar ul li a:hover {
    background:aqua;
    padding:14px;
    border-radius:10px;
    transition: .75s ease-in-out;
    border-bottom: 5px solid white;
    color:black;
    box-shadow: 0 0 14px rgba(197, 4, 155, 0.479);
} 



/* makes them run down the column; default is row 
section {
display: flex;
flex-direction: column;
align-items: left;
justify-content: left;
text-align: left;
padding-top:10%;
width: 100%;
height: 100vh;
color:white;
scroll-snap-align:center;
z-index:-5;
}

section h1 {
font-size: 3rem;
line-height: 1.5;
width:70%;
margin-top:2%;

padding-left: 20px;
text-shadow: 0 0 2px black;
}

section p {
    display:block;
    background-color:rgba(0 45 245 .7);
    text-shadow: 0 0 5% black;
    color:white;
    padding: 4%;

font-size: 1.3rem;
width:100%;
min-height: 50px;
justify-content: left;
text-shadow: 0px 0px 2px steelblue;
background-color: rgba(0, 61, 70, 0.179); 


text-align:left;
margin-top:20px;
    padding:2%;
}
    


/*border-radius: 5px 44%;
border-style: groove;*/


/*.media {
    display:grid;
    grid-template-columns: repeat(3) 1fr;
    grid-template-rows: repeat(2) 1fr;
    gap: 12px;
    background-attachment:fixed;

}*/

/*moment of truth*/
/*
section#spaceport {
    background: url("..//images/colors_contact.png") no-repeat center center/cover;
    background-attachment:fixed;
}

section#lounge {
    background: url("..//images/spiral_no_one_can_hear_you_scream.png") no-repeat center center/cover;
    background-attachment: fixed;
}
section#news {
    background: url("..//images/Dark-Matter-Particle-Physics-Concept.gif") no-repeat center center/cover;
    background-attachment:fixed;
    position:relative;
    margin-bottom:600px;
    display:block;
    
}

a {
    color:aqua;
    text-decoration:none;
}
a:hover {
    background:blue;
    color:white;
    transition: 1s;}

    /*justify-content:space-between;
    position:relative;
    width:100%;
    justify-content:center;
    align-items:center;
    height:150px;
    border: 4px solid magenta;
    margin: 10px;
    border-top: 4px solid green; */