/* 
|--------------|
|default styles|
|--------------|
*/

h1, h2, h3, p, nav ul figure{
    margin: 0;
    padding: 0;
    /* this removes default margin/padding 
    from these elements. You might want to add
    a few others in here.*/   
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    /* this sets images as block elements
    and makes sure they don't bust out of 
    their containers, and that they maintain
    their aspect ratio. */
}
    
nav ul {
    list-style-type: none;
    /* gets rid of bullets */
}



/* 
|--------------|
|main styles|
|--------------|
*/

html {
    background-color: black;
}

body {
    background-color: black;
}

main {
    width: 80%;
    margin-left: auto;
    margin-right: auto;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;

    grid-template-areas: 
    "a b b b"
    "a b b b"
    "a b b b";
}

/* type styles */

h1 {
    text-shadow: 2px 2px #000000;
    color: white;
}

h2 {
    text-shadow: 2px 2px #000000;
    font-size: x-large;
    color: white;
}

p {
    text-shadow: 2px 2px #000000;
    font-size: large;
    color: white;
}

a {
    text-shadow: 2px 2px #000000;
    font-size: large;
    color: white;
}

a:hover {
    text-shadow: 2px 2px #1f1f1f;
    font-size: larger;
    color: lightgray;
}

/* banner styles */
#head-image {
    width: 100%;
    margin-bottom: 100px;
}

#head-image img {
    width: 100%;
}

/* nav styles */

header {
    padding: 10px;
    background: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.0)), url(images/rock0272.png);
    border: #2f2f2f ridge 5px;
    

    grid-area: a;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

#links ul {
    padding: 0;

    display: flex;
    flex-direction: column;
    gap: 10px;
}

#links li {
    text-align: center;

    padding: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

#links li a {
    width: 100%;
    font-size: x-large;
}

#blurb {
    padding-top: 20px;
    border-top: #2f2f2f ridge 5px;
}

/* main styles */

#content {
    grid-area: b;

    display: flex;
    flex-direction: column;
    gap: 20px;
}

#content article {
    background: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.0)), url(images/rock0272.png);
    padding: 10px;
    border: #2f2f2f ridge 5px;
}

#content article h2 {
    margin-bottom: -10px;
}

/* events */
#events {
    padding: 0;
    /*height: 45%;*/

    display: flex;
    justify-content: space-between;
    gap: 50px;
}

#events figure {
    margin: 0;
    height: 100%;

    flex: 1;
}

#events figure img {
    border: #1f1f1f ridge 5px;
}

#events .text {
    flex: 4;

    display: flex;
    flex-direction: column;
    gap: 20px;
}

.seemore {
    margin: auto auto 5px auto;
    font-size: x-large;
}

/* about us styles */

#about {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* footer styles */

footer {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: #2f2f2f ridge 5px;
    background: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.0)), url(images/rock0272.png);
    
    display: flex;
    place-content: center;

    font-size: xx-large;
}

footer p {
    color: blue;
    font-size: xx-large;
}