/*


:root {
    --headlines:darkgray;
    --backerpanels:rgb(33, 132, 150);
    --copy:orange;
    --shadow: 0 1px 5px rgba(104, 104, 104, 0.8);

/*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;
    
    }

*/

/* use the * to include everything / resets so the browser defaults don't put weird spacing around
and the box includes extras inside the total size specified*/

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

 /* control+forward slash makes a comment */
 /* reset from browser defaults */




*{
    margin: 0;
    padding:0;
    box-sizing:border-box;
    letter-spacing: 1.5px;
    
} 

/* setting up for the smooth scroll */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}
/* 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:100%;
    height:100%;
    overflow-y: scroll;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
   
}
/* 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: 3;
    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%;
}
    
.hoverlink:hover {
    background-color:black;
    color:white;
    padding:4.5px;
    border-bottom: 2px solid aqua;
    border-radius: 5px;
    border-style: groove;


}
/*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;
}
.video {
    margin-top:4rem;
}
.youtubes {
 background-color:orange;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    align-content:center;
    justify-content:center;
    gap:20px;
    width:80%
    margin-top:300px;
    


    grid-template-areas:
    "vid1  vid2  vid3";

    .vid1 {
        grid-area: vid1;
        max-width: 25%;
        background: blue;
       

    .vid2 {
        grid-area: vid2;
        max-width: 25%;
        background: orange;
       
    }

    .vid3 {
        grid-area: vid3;
        max-width: 25%;
        background: yellow;
       
    }
/*
    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; */


    /*
    height: 90px;
    margin: 20px;
    flex-wrap:wrap;
    padding-left:2em;
    padding-right:2em;
    display:flex;
    flex-direction:row;
    align-items:center;
    position:relative;
    flex-align:center; */
    
    padding-top:25rem;

}

.vid1, .vid2, vid3 {
    display:flex;
    width:33%;
    padding:15px;
}