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

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


    body {
        background: #ccc;   
        margin: 30px 50px; 
        line-height: 1.3;
        font-family: 'Orbitron', sans-serif;
      
    }

    .btn {
        background: darkolivegreen;
        color: white;
        padding: 0.6rem 1.3rem;
        margin-top:20px;
        text-decoration: none;
        border: 0;
        font-family: 'Unica One', sans-serif;
        text-align:center;
       min-height: 3rem;
       width:50%;
       justify-content:center;
    }

    img {max-width:100%;
        position:relative;}

    .wrapper {
        display: grid;
        gap: 20px;
        position:relative;
        padding-bottom:45px;

    }
    

    .main-nav {
        display:grid;
        gap:10px;
        grid-template-columns: repeat(4, 1fr);
        border: 20px solid rgb(0, 10, 65);
        border-radius: 110% 110% 0rem 0rem;
        background:rgb(33,132,150);
    position:relative;
    z-index: 500;

        
    }

    .main-nav ul {
        display: flex;
        gap:20px;
        flex-wrap:wrap;
    position:relative;
        padding:0;
        list-style: none;
        grid-template-columns: 1fr 1fr 1fr 1fr;

    }

    .logo {
        z-index:5;
    }

    .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;
    
    }

    /* control+forward slash makes a comment */

    .top-container {
        padding-top:.1rem;
        display:grid;
        grid-gap: 20px;
        grid-template-columns: auto;
        grid-template-areas:
        "showcase showcase top-box-a"
        "showcase showcase top-box-b";
    }

    .showcase {
        grid-area:showcase;
        position:relative;
        min-height:400px;
        background-size:cover;
        background-position:center;
        padding:3rem;
        display:flex;
        flex-direction: column;
        align-items:start;
        justify-content:center;
        box-shadow:rgba(104, 104, 104, 0.8);
        color:white;
        font-size: 49px;
        background-image:url(/images/neutrinos_composite_mod.jpg);
    }

    .subhead {
        animation-delay: 3s;
        animation-direction: right;
        animation slide-in 
        @keyframes slide-in
        0%
        100% position: 50% 50%;

    }

    .top-box {
    border: 55px red;
    }

    .top-box-a {
        grid-area: top-box-a;
        border-radius: 55px;
    }
    .top-box-b {
        grid-area: top-box-b;
    }