/* ---------------------- General Styles ---------------------- */

@import url('https://fonts.googleapis.com/css2?family=Jura:wght@700&family=Roboto&display=swap');

* {
    margin: 0;
    padding: 0;
    }

:root {
  /* change the values below to your colors from your palette */
  --primary-color: #222A2C   ;
  --secondary-color: #6C979C ;
  --accent1-color: #46d45c;
  --accent2-color: #DA3232;

  /* change the values below to your chosen font(s) */
  --heading-font: "Jura";
  --paragraph-font: "Roboto";

  /* these colors below should be chosen from among your palette colors above */
  --headline-color-on-white: #222A2C;  /* headlines on a white background */ 
  --headline-color-on-color: white; /* headlines on a colored background */ 
  --paragraph-color-on-white: #222A2C; /* paragraph text on a white background */ 
  --paragraph-color-on-color: white; /* paragraph text on a colored background */ 
  --paragraph-background-color: #222A2C  ;
  --nav-link-color: #222A2C;
  --nav-background-color: #6C979C;
  --nav-hover-link-color: #222A2C;
  --nav-hover-background-color: #46d45c;
}

body {
    background-image: url(https://jakem-byui.github.io/2023-Spring---WDD-130/sc2fansite/images/bg2.jpg);
    
}


header {
    background-image: url(https://jakem-byui.github.io/2023-Spring---WDD-130/sc2fansite/images/bg2.jpg);
    background-size: cover;
    font-family: var(--heading-font);
    font-size: 24pt;
    display: grid;
    grid-template-columns: auto auto;

}

nav {
    display: flex;
    justify-content: space-around;
}
nav a {
    text-align: center;
    color: white;
    text-decoration: none;
    width: 200px;
    margin-top: auto;
    margin-bottom: auto;
    padding: 1em;
}
nav a:hover {
    background-color: var(--nav-hover-background-color);
    opacity: 70%;
    color: var(--nav-hover-link-color);
    text-decoration: underline;
}

.logo   {
    max-width: 80px;
    border-radius: 100%;
}

#logo_link {
    padding-top: 5px;
    justify-self: center;
    align-self: center;
    max-width: 80px;
}

#content {
    max-width: 1600px;
    margin: 0 auto;
    z-index: -1;
    background-image: url(https://jakem-byui.github.io/2023-Spring---WDD-130/sc2fansite/images/bg1.jpg);
    box-shadow: 5px 5px 10px var(--primary-color);
    border-left: #46d45c solid 3px;
    border-right: #46d45c solid 3px;
}

h1, h2 {
    margin: 1em;
}


main    {
    color: var(--paragraph-color-on-color);
    font-family: var(--paragraph-font);
    text-align: center;
}

footer  {
    color: var(--paragraph-color-on-color);
    font-family: var(--paragraph-font);
    background-color: rgba(34, 42, 44, .75);
    padding: 1em;
    margin-top: 5em;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

footer a {
    color: var(--accent1-color);
    text-decoration: underline;
}

.footer-background {
    background-color: var(--primary-color);
    width: 100%;
    height: 5em;
}

/* ---------------------- Homepage Styles ---------------------- */

    .banner {
        font-family: var(--heading-font);
        color: var(--headline-color-on-color);
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        margin-top: 1em;
        max-width: 1200px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    #banner-picture {
        max-width: 800px;
        box-shadow: 5px 5px 10px var(--primary-color);
        grid-column: 2/3;
        grid-row: 1/4;

    }
    #banner-h1 {
        grid-column: 2/3;
        grid-row: 1/2;
        font-size: 44pt;
        margin-top: auto;
        margin-bottom: auto;

    }
    .banner-text {
        grid-column: 2/3;
        grid-row: 3/4;
        padding: 1em;
        background-color: rgba(34, 42, 44, .75);
        line-height: 1.5;
    }

    .index-main {
        display: grid;
    }

    .index-main p {
        line-height: 1.5;
        text-align: justify;
        text-indent: 5ch;
        padding: 15px;
    }

    .retro-card, .sc2-card, .evolution-card {
        margin: 4em 2em;
        padding: 1em;
        background-color: rgba(108, 151, 156, .5);
        border-radius: 5%;
    }
    .retro-card {
        grid-column: 2/4;
        grid-row: 2/3;
    }
    .sc2-card {
        grid-column: 5/7;
        grid-row: 2/3;
    }
    .evolution-card {
        grid-column: 8/10;
        grid-row: 2/3;
    }

    .card-img {
        border: .25em solid var(--secondary-color);
        transition: transform .5s;
        box-shadow: 5px 5px 10px var(--primary-color);
        width: 100%;
        max-width: 300px;
        height: 200px;
        border-radius: 100%;
        
    }
    .card-img:hover {
        transform: scale(1.1);
    }

/* ---------------------- Factions Styles ---------------------- */

.faction-main {
    display: grid;
}

.protoss-card, .terran-card, .zerg-card {
    margin: 4em 2em;
    padding: 1em;
    background-color: rgba(108, 151, 156, .5);
    border-radius: 5%;
    
}

.faction-main p {
    line-height: 1.5;
    text-align: justify;
    text-indent: 5ch;
    padding: 15px;
}

.terran-card {
    grid-column: 2/4;
    grid-row: 2/3;
}
.zerg-card {
    grid-column: 5/7;
    grid-row: 2/3;
}
.protoss-card {
    grid-column: 8/10;
    grid-row: 2/3;
}

/* Protoss img zoom */

#protoss-card-img {
    border: .25em solid var(--secondary-color);
    transition: transform .5s;
    box-shadow: 5px 5px 10px var(--primary-color);
    width: 100%;
    max-width: 300px;
    height: 200px;
    border-radius: 10%;
    cursor: pointer;

}
#protoss-card-img:hover {
    transform: scale(1.1);
}

/* Terran img zoom */

#terran-card-img {
    border: .25em solid var(--secondary-color);
    transition: transform .5s;
    box-shadow: 5px 5px 10px var(--primary-color);
    width: 100%;
    max-width: 300px;
    height: 200px;
    border-radius: 10%;
    cursor: pointer;

}
#terran-card-img:hover {
    transform: scale(1.1);
}

/* Zerg img zoom */

#zerg-card-img {
    border: .25em solid var(--secondary-color);
    transition: transform .5s;
    box-shadow: 5px 5px 10px var(--primary-color);
    width: 100%;
    max-width: 300px;
    height: 200px;
    border-radius: 10%;
    cursor: pointer;

}
#zerg-card-img:hover {
    transform: scale(1.1);
}

.faction-summary {
    font-family: var(--heading-font);
    color: var(--paragraph-color-on-color);
    background-color: rgba(34, 42, 44, .75);
    padding: 1em;
    margin: 1em;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: large;
    line-height: 1.5;
}

.faction-summary p {
    max-width: 60ch;
    margin: auto;
    padding: 5px;
}
.faction-summary h2{
    max-width: 40ch;
    margin: auto;
    padding: 10px;
}

.card-h1 {
    font-family: var(--heading-font);
    font-size: 20pt;
}


/* The Modal (background) */

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
  
/* Modal Content (image) */

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 1000px;
}

/* Caption of Modal Image */

#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
    font-family: var(--heading-font);
}
  
/* Add Animation */

.modal-content, #caption {  
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}
  
/* The Close Button */

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* ---------------------- Gameplay Styles ---------------------- */


.resources-card, .bases-card, .battles-card {
    margin: 4em 2em;
    padding: 1em;
    background-color: rgba(108, 151, 156, .5);
    border-radius: 25px;
    display: grid;
}


.l-gameplay-content, .r-gameplay-content {
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
    text-align: justify;
    text-indent: 5ch;
}
.l-gameplay-content {
    grid-column: 3/6;
    grid-row: 2/5;
}
.r-gameplay-content {
    grid-column: 1/4;
    grid-row: 2/5;
}


.l-gameplay-content-header, .r-gameplay-content-header {
    font-size: 36pt;
    font-family: var(--heading-font);
    margin: auto;
    padding: 0.3em;
    text-decoration: underline;
}
.l-gameplay-content-header {
    grid-column: 3/6;
    grid-row: 1/2;
}
.r-gameplay-content-header {
    grid-column: 1/4;
    grid-row: 1/2;
}

.l-gameplay-card-img, .r-gameplay-card-img {
    border: .25em solid var(--secondary-color);
    transition: transform .5s;
    box-shadow: 5px 5px 10px var(--primary-color);
    width: 100%;
    max-width: 500px;
    height: 300px;
    border-radius: 25px;
    grid-column: 1/3;
    grid-row: 1/5;
    margin: auto;
}
.l-gameplay-card-img {
    grid-column: 1/3;
    grid-row: 1/5;
}
.r-gameplay-card-img {
    grid-column: 4/6;
    grid-row: 1/5;
}
.l-gameplay-card-img:hover, .r-gameplay-card-img:hover {
    transform: scale(1.1);
}