/*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;
    background-color:black;
    /* 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 {

    grid-area: mp4;
    background: url("..//images/colors_contact.png") no-repeat center center/cover;
}

.open {
    width:100%;
    height:100vh;
    position:relative;
    z-index:7;
    
}

.over {
    width: 100%;
    height:100vh;
    position:fixed;
    top:0;
    left:0;
    z-index:33;
}

.container #anim {

    display:block;
    position:absolute;
    align-items:center;
    justify-content:center;
    align-content:center;
    text-align:center;
    border: 7px solid purple;
   
    width:100vw;
    margin-bottom:10px;
    padding-bottom:10px;
}

.container #anim h1 {
    padding-top:0px;
    padding-bottom:0px;
    position:relative;
    color:pink;
    background-color: rgba (0, 0, 0, 0.7);
    margin:20px;

}
/* ties the h1 to the request */

.container #anim h2 {
    background:black;
    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;
    padding-top:110px;

}

.authorized {
    height:370px;
    padding-top:210px;
    background-color: blue;
    border-radius: 10px solid orange;
    color:aqua;
    display:block;
    align-items:center;
    justify-content:center;
    
}

#anim .request {
    font-size: 2rem;
    background:greenyellow;
    padding:18px;
    border-radius:9px;
    display:inline-block;
    margin:4px;
    transition: 2s;
}
#anim .request a {
    text-decoration:none;
    
}

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


.end {
    align-items:center;
    height:70px;
    display:block;
    justify-content:center;
    width:100%;
    font-size: 1.3rem;
    text-align:center;
    background-color:rgba(197, 4, 155, 0.479);
    min-height: 50px;
    justify-content: center;
    text-shadow: 0px 0px 2px steelblue;
    background-color: black; 
    padding-top:20px;
}

.authorized h1 {
    
    align-items:center;
    justify-content:center;
    display:flex;
    font-size:2rem;
    letter-spacing:1.4px;
    text-shadow: 1px 4px 8px black; 
    
}
.authorized p {
    
    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;
}

.info {
    grid-area: info;
    display: block;
    position:relative;
    align-items:center;
    justify-content:center;
    width:100vw;
    height:100%;
    padding-top:5px;
    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-left: 50%;
    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; */