/*Background color for the whole website*/
:root {
    /* General background color */
    --bg-color: linear-gradient(to bottom, rgb(238, 245, 253), rgb(149, 198, 247));
}

@media (max-width: 768px){
    nav ul {
        flex-direction: column;
    }

    #grid-container {
        grid-template-columns: 1fr;
    }

    .floatright, .floatleft {
        float: none;
        display: block;
        margin: 1rem auto;
        max-width: 100%;
    }

}

.clickable {
    /* For JS  code. Provides animation for when the user's cursor hovers above a clickable image. */
    cursor: pointer;
    transition: all 100ms ease-in-out, color 100ms ease-in-out;
}

.clickable:hover {
    /* Same as above—this only just scales the picture up to make it bigger when the cursor hovers above it */
    transform: scale(1.02);
    cursor: pointer;
}

.popup {
    /* Rules for the BACKGROUND of the pop-up for the image the user clicked. */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
}

.image-box {
    /* For JS code. Makes the position of pop-up images the user clicked stay where it is on screen and fixes the display to where it is.*/
    position: relative;
    display: inline-block;
}

.popup img {
    /* Size and color rules for the pop-up image the user clicked. Also creates the animation for the clicked image */
    max-width: 600px;
    max-height: 80vh;
    border-radius: 10px;
    border: 4px solid white;
    padding: 10px;
    background: white;
    box-shadow: 0px 0px 25px grey;

    animation: zoomIn 0.25s ease-out;
}

    /* Animation for the pop-up image when clicked. */
@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.close-btn {
    /* Positioning rules for the close button */
    position: fixed;
    top: 20px;
    right: 30px;
    font-size: 50px;
    color: black;
    cursor: pointer;
    font-weight: bold;
    z-index: 2000;
    line-height: 1;
}

html, body {
    /*Background color for the whole website*/
    background: var(--bg-color);
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

header{
    /* For the ENTIRE header. This includes elements of header h1 and nav ul & li*/
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
    border-top: 3px;
    border-radius: 0;
    color: rgb(255, 238, 139);
    padding: 10px 0;
    background-color: rgb(116, 116, 255);
}

.header-container {
    width: 100%;
    max-width: 1100px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header h1 {
    /* For header font */
    font-size: 55px;
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: rgb(255, 238, 139);
    align-items: center;
    text-shadow: 3px 3px 1px black;
    
}

nav ul{
    /* Formats the button elements to be aligned horizontally and spaced*/
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0px;
    margin: 10px;
    list-style: none;
    justify-content: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 26px;
}

nav li a {
    /*Styling for buttons.*/
    display: block;
    padding: 15px;
    font-weight: bold;
    text-decoration: none;

    background-color: rgb(255, 238, 139);
    border-radius: 30px 10px;
    box-shadow: 6px 6px 6px rgb(135, 135, 135);
    color: rgb(0, 0, 0);
}

nav li a:hover {
    /* Button animation for when the cursor hovers above one */
    transform: scale(1.05);
    color: rgb(255, 247, 0);  
    cursor: pointer;
    background: radial-gradient(#6f6af6, #9da2ff);
}

nav li a, #blog-portal {
    /* Eases the button animation */
    transition: all 100ms ease-in-out, color 100ms ease-in-out;
}

nav li.selected a {
    /* Makes it so that the selected button could not be clicked again.*/
    background: radial-gradient(#a29eff, #8d92ff);
    box-shadow: none;
    pointer-events: none;
    cursor: not-allowed;
}

h1 {
    /* Customizes all h1 elements in every page */
    font-size: 40px;
    text-decoration: underline;
    text-align: center;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin-top: 10px;
    color: rgb(116, 116, 255);
    text-shadow: 3px 3px 1px lightgray;
}

h2{
    /* Customizes all h2 elements in every page */
    font-size: 20px;
    text-align: center;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: rgb(116, 116, 255);
}

h3 {
    /* Customizes all h3 elements in every page */
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

img {
    /* Styling rules for images. */
    max-width: 100%;
    height: auto;
}

main p {
    /* Customizes the p elements in all main blocks */
    font-size: 24px;
    text-align: center;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
}

#mission{
    /* General styling rules for all things in About page */
    display: block;
    line-height: 1.6;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 2px 10%;
    overflow: auto;
}

#mission::after {
    content: "";
    display: block;
    clear: both;
}

#text-mission{
    /* Styling rule for paragraphs in the About page that centers everything */
    text-align: start;
    text-indent: 60px;
    line-height: 1.6;
}

#last-text-mission {
    /* Styling rule for the last paragraphs in the About page. */
    font-size: 28px;
    text-align: center;
    text-decoration-thickness: 3px; 
    text-decoration-color: rgb(255, 229, 79);
}

#mission h2 {
    /* Styling rules for h2 elements that gives the text a border*/
    background-color: rgb(255, 238, 139);
    border-radius: 10px;
    font-size: 40px; 
    text-shadow: 3px 3px 2px lightgray; 
    clear: both;
}

mark{
    /* Customization rules for all the highlighted words in the About page */
    color: black;
    padding: 2px 5px;
    background-color: rgb(251, 247, 130);
    border-radius: 28px 15px 22px 15px;
}

#mission img {
    /* Styling rules for highlighted words in the About page. */
    max-width: 100%;
    width: 400px;
    height: auto;
    border-radius: 10px;
    padding-left: 0px;
}

#mission-grid {
    /* Places inspiration images in a grid. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    justify-content: center;
    align-content: center;
}

div.floatleft p, div.floatright p, body{
    /* Custom formatting for the 'About' page, as well as formatting for the test in the "Games & Demos" page. */
    font-size: 20px;
    text-align: center;
    font-family: Arial;
    margin-left: 75px;
    margin-right: 75px;
    position: sticky;
}

#container {
    /* Container for the two elements in the main page that allows for flexing when the browser shrinks in size */
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.content {
    /* For the specific class under the 'container' class that customizes the blocks */ 
    padding-top: 10px;
    box-shadow: 6px 6px 6px lightgray;
    border: 1px solid rgb(116, 116, 255);
    border-radius: 20px;
    border-width: 3px;
    background-color: white;
    align-items: center;
    height: auto;
}

.content img {
    /* For the images being displayed from the .content class, located in #container */
    display: block;
    width: 490px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.content p {
    /* For the text being displayed from the .content class, located in #container */
    text-align: center;
    font-size: 20px;
    text-shadow: 3px 3px 6px lightgray;
}

div.floatleft, div.floatright {
    /* Sets both paddings, borders and margins for floatright and floatright */
    padding: 10px;
    padding-bottom: 5px;
    border: 10px;
    margin: 10px;
    margin-bottom: 30px;
}

.floatright {
    /* Sets custom rules for floatright to make it move to the right of the screen */
    display: block;
    max-width: 500px;
    width: min(100%);
    height: auto;
    margin: 0 0 5px 5px;
    padding: 5px;
    float: right;
    border-radius: 10px;
}

div.floatleft h1, div.floatleft h2, div.floatleft h3, div.floatleft p{
    /* Alignment, padding, border, margin and clear customizations for
     all types of text all text in the floatleft class */
    text-align: left;
    padding: 5px;
    border: 5px;
    margin: 5px;
    clear: both;
}

div.floatright h1, div.floatright h2, div.floatright h3, div.floatright p{
    /* Alignment, padding, border, margin and clear customizations for
     all types of text all text in the floatright class */
    text-align: left;
    padding: 5px;
    border: 5px;
    margin: 5px;
    clear: both;
}

div.floatright h3, div.floatleft h3 {
    /* Rules for h3 elements in both float classes included in games.html */
    font-size: 30px;
    text-shadow: 3px 3px 3px lightgray;
    font-weight: none;
}

div.floatright p, div.floatleft p {
    /* Rules for p elements in both float classes included in games.html */
    font-size: 20px;
    text-shadow: 3px 3px 3px lightgray;
    font-weight: none;
}

div.firstgame {
    /* Background for the first game in the 'Games & Demos' page. */
    background: #80d164;
    border-radius: 15px;
    line-height: 1.6;
}

div.secondgame {
    /* Background for the second game in the 'Games & Demos' page. */
    background: #ffdada;
    color: #000b3b;
    border-radius: 15px;
    line-height: 1.6;
}

#thirdgame {
    /* Background & text changes` for the third game in the 'Games & Demos' page. */
    color: white;
    text-shadow: 3px 3px 1px black;
    background: rgb(43, 43, 43);
    border-radius: 15px;
    line-height: 1.6;
}

.firstgame, .secondgame, #thirdgame {
    /* Styling rules for first, second and third game that adds a scroll bar when the screen gets too small*/
    border-radius: 15px;
    overflow: auto;
}

#grid-container {
    /* Container for blog.html. Organizes the blocks to be laid out in a grid and flex depending on size of browser. */ 
    display: flex;
    grid-template-columns: auto auto auto;
    gap: 10px 10px;
    justify-content: center;
    flex-wrap: wrap;
    grid-template-columns: auto-fit;
}

#blogpost {
    /* Styling rules for all things within the blogpost id. Makes it so that the 
    blogs are formatted in a clear and consistent way. */
    display: block;
    width: min(900px, 90%);
    margin: 0 auto;
    padding: 0 20px 40px 20px;
    line-height: 1.6;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: start;
    text-indent: 50px;
}

#blogpost h2 {
    /* Styling rules for h2 elements in the blogpost id that gives the element a border */
    display: block;
    background-color: rgb(255, 238, 139);
    border-radius: 10px;
    font-size: 40px; 
    text-shadow: 3px 3px 2px lightgray; 
}

#blogpost p {
    /* Styling rules that make sure the main text is aligned to the left. */
    margin: 20px auto;
    max-width: 750px;
    text-align: start;
    font-family:Arial, Helvetica, sans-serif;
}

#blogpost figure, #mission-grid figure {
    /* Styling rules for figure in the blogpost id. Makes it so the images within figure are displayed in
    the middle of the screen after paragraphs. */
    text-align: center;
    margin: 30px auto;
}

#blogpost figure img {
    /* Styling rules for the images INSIDE the figure element. Makes it so the image can scale in size
    with the website. */
    display: block;
    margin: 0 auto;
    max-width: 600px;
    width: 100%;
}

#mission-grid figure img {
    /* Styling rules for the images inside the figure element. Spaces them evenly as well as scales them
    with the website */ 
    display: block;
    margin: 0 auto;
    justify-content: space-evenly;
    max-width: 350px;
    width: 100%;
}

#blogpost figcaption, #mission-grid figcaption {
    /* Styling rules for the captions underneath the images so that they are small and grey */
    font-size: 15px;
    color: #666;
    font-style: italic;
    margin-top: 8px;
}

#blog-portal {
    /* Makes the "Return to blog portal" text bold*/
    display: block;
    padding: 15px;
    font-weight: bold;
    text-decoration: none;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    background-color: rgb(255, 238, 139);
    border-radius: 30px 10px;
    box-shadow: 6px 6px 6px rgb(135, 135, 135);
    color: rgb(0, 0, 0);
}

#blog-portal:hover {
    /* Button animation for when the cursor hovers above one */
    transform: scale(1.01);
    color: rgb(255, 247, 0);  
    cursor: pointer;
    background: radial-gradient(#6f6af6, #9da2ff);
}

#grid-container div {
    /* Aligns the text included in <div> as well as give all things in the <div> borders */
    text-align: center;
    border: 3px solid rgb(116, 116, 255);
}

#grid-container img {
    /* Customizes all image elemets in the contaier */
    width: 100%;
    max-width: 400px;
    height: auto;
}

.form-container {
    /* Container for the form used in contact.html */
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

fieldset {
    /* Creates a block for all things in the form */
    width: 350px;
    display: inline-block;
    text-align: right;
    margin-right: 8px;
    align-items: center;
}

input[type=text], input[type=email], input[type=textarea] select {
    /* Formats and customizes all text, email and textarea elements */
    box-sizing: border-box;
    width: 250px;
    padding: 10px;
    border: 1px solid #aaa;
    border-radius: 4px;
}

input[type=submit] {
    /* Formats and customizes the submit element and makes it a button */
    width: 200px;
    background-color: #09f;
    color: white;
    padding: 15px;
    margin: 10px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    /* Makes it so that the button changes color when the cursor hovers above it*/
    background-color: #07d;
}

.site-footer{
    /* Styling rules for all things within the site-footer class. Gives the spacing, 
    color and scaling to all elements that are decedents of the id */
    margin-top: 20px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;

    border-top: 3px solid rgb(116, 116, 255);
    border-bottom: 3px solid rgb(116, 116, 255);
    border: 3px solid rgb(116, 116, 255);
    border-radius: 0px;
    background-color: rgb(116, 116, 255);

    padding: 5px 0;
    
}

.footer-inner{
    /* Width. margin and padding rules for the footer. */
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.socials {
    /* Rules that allow the icons in socials to flex with the page, as well as centers them. */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

footer p {
    /* Color for copyright text in footer */
    color: #ffff74;
    text-shadow: 3px 3px 1px #846e00;
}

footer h2{
    /* Styling rules for h2 elements in the footer */
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    border: 40px;
    margin-top: 30px;
    color: #ffff74;
    font-weight: bold;
    text-shadow: 2px 2px 1px #846e00;
}