/*Reset styles*/
* {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

html {
    min-height: 100%;
    min-width: 300px;
}

/*body styles*/
body {
    min-height: 100%;
    background-color: rgb(240, 240, 240);
    /* background: linear-gradient(#fff, #b2fd00); */
}

/*Header nav styles*/
#siteLogo {
    width: 200px;
    height: auto;
}

nav {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

#header {
    width: 100%;
    padding: 1em;

    /* display: grid;
    align-items: center;
    grid-template-columns: 2fr 1fr; */
    
    transition: 0.5s;
    background-color: rgba(240, 240, 240, 0.95);
}

#header button {
    width: 50px;
    height: 50px;
    margin-top: 0.3em;
    float: right;

    background-color: rgba(0, 0, 0, 0);
    border: none;
    font-size: 2.5em;
    color: gray;
    transition: 0.5s;
}
#header button:hover, #header button:active {
    color: rgb(51, 51, 51);
}


/*Reusable styles*/
.gradientBG {
    background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(255, 255, 255, 0.0));
}

.solidBG {
    background-color: rgba(240, 240, 240, 0.95);
}

.invisible {
    /* display: none !important; */
    visibility: hidden;
    opacity: 0;
    position: absolute;
}

.no-opacity {
    opacity: 0;
}

h2 {
    text-align: center;
    /* background-color: white; */
    background-color: #3C4DF2;
    color: white;
    padding: 0.8em;
    display: inline-block;
}


/*Cover panel with image*/
.cover {
    width: 100%;
    height: 60vh;

    /*background-image: url("https://i.imgur.com/LRgHbFH.gif");*/ /*url("/img/hpDVO2w.png")*/
    background-size: cover;
    background-position: center;
    
    display: grid;
    align-items: end;
}

/*Panel styles with image and header*/
.panel img {
    /* margin: 1em 0; */
    /* background-color: #AFAFFF; */
    box-shadow: 0 0 20px 0.5em rgba(0, 0, 0, 0.2);
    transition: 0.2s;
}

.panel:hover img, .panel:active img {
  /**/  
}

.panel img {
    width: 100%;
    height: auto;
    vertical-align: top;
}


/*Containers*/
.gridContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 1em;
    width: 100%;
}

.container {
    margin: 0 auto;
    max-width: 1300px;
}


/*Modal nav menu*/
.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11;

    display: grid;
    align-items: center;
    justify-items: center;

    background-color: rgba(0, 0, 0, 0.8);
    height: 100%;
    width: 100%;

    transition: 0.5s;
}

.modalContent {
    color: white;
    width: 100%;
}

.modalLink {
    text-align: center;
    color: white;
    text-decoration: none;
    display: block;
    padding: 5vh;
    font-size: 1.5em;
    transition: 0.2s;
}

.modalLink:hover, .modalLink:active {
    /* background-color: rgba(0, 0, 0, 0.9); */
    background-color: rgba(60, 77, 242, 0.8);
}

.modalButton {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    color: gray;
    transition: 0.5s;

    width: 100%;
}

.modalButton:hover, .modalButton:active {
    color: rgb(128, 11, 11)
}


/*Footer styles*/
footer {
    /* background-color: #222E12; */
    background: #131511;
    padding: 2em 0;
    text-align: center;
    color: #76BD13;
}

footer h3 {
    margin: 1em 0 1em 0;
}

footer > .container > a, footer > .container > a:visited {
    color: inherit;
    text-decoration: none;
}