/*
 * Author: Oskari Reinikka
 * Date: 16/04/2024
 * Description: This .css file is used for the webpage of Basearena -game.
    It is the only .css file used in this project and contains all the styling for the webpage,
    save for the custom font which is defined in the html itself.
 */

/* Makes the refrences on the webpage, for example to the gallery, scroll smoothly to that refrence */
html {
    scroll-behavior: smooth;
}

/* Defines background color. */
body {
    background-color: #272a2d;
}

/* Defines the navbar and its standard settings. */
.navbar {
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: row; /* Sets the items inside the navbar in a row.*/
    align-items: center; /* Aligns the items in the vertical middle of the navbar. */
    width: 100%;
    height: 6rem; 
    background-color: #15293d; 
    z-index: 1; /* Puts the navbar "above" other elements, so that its always visible over them */
}

/* Defines the size for navbar image, the logo of Basearena */
.navbar img {
    width: 4rem; 
    height: auto; 
    margin-left: 4rem; 
    margin-right: 1rem;
}

/* Sets the font size, color and vertical alignment */
.navbar-title {
    font-size: 1.5rem; 
    color: white; 
}

/* Defines the container for navbar buttons. Reused from an old project*/
.navbar-buttons {
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: center;
    justify-content: center;
    text-align: center;
    object-fit: contain;
    margin: 0 auto;
    flex-wrap: wrap;
}

/* An individual navbutton. Defines color and size */ 
.navbutton {
    background-color: #15293d;
    color: #ffffff;
    font-size: 0.8rem;
    border: none;
    padding: 0.8rem 1.8rem;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s; 
    margin: 0 1vw;
}
/* Flips the colors when hovered over */
.navbutton:hover {
    background-color: #ffffff;
    color: #15293d;
}

/* Defines the banner image size, position and distance from the top. */
.banner {
    position: relative;
    top: 2rem;
    width: 100%;
    height: auto; 
    margin: 0 auto;
}

/* Defines the text header, the title before each "segment", and its style. */
.text-header {
    position: relative;
    margin-top: 5rem; /* Distances the next header from the previous segment */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white; 
    font-size: 1.5rem; 
    margin-bottom: 2rem; /* Gives the header some room for itself*/
}
/* Adds the white line beneath the text-headers */
.text-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 0.5rem; /* Sets the thickness of the bar */
    border-radius: 1rem; /* Rounds the edges */
    width: 50%; 
    background-color: #ffffff; /* Defines the color of the line. */
}

/* Defines the main content container and its settings. Contains all segments after the banner and before footer
The text-headers are separate from the main content */
.main-content {
    margin-top: 4rem;
    display: flex;
    justify-content: space-between; /* Distributes the items evenly */
    flex-wrap: wrap; /* Allows the items to wrap around, i.e. stack instead of strechting the webpage to the right */
}

/* Defines the text container for the "breadtext" segments. */
.breadtext {
    background-color: #1b1c1f;
    padding: 1rem 1rem;
    border-radius: 1rem;
    flex: 1;
    color: white; 
    font-size: 1.5rem; 
    margin: 1rem;
}
/* Adds space between the breadtext's paragraphs*/
.breadtext p {
    margin-bottom: 3rem; 
}

/* Defines a container of multiple images.*/
.images {
    background-color: #1b1c1f;
    padding: 1rem 1rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 1rem;
    flex: 1; /* Allows the images container (and thus the images themselves) to scale in relation to the 
    user's zoom of the webpage */
}
/* Settings for an individual image. Note rounded edges */
.images img {
    width: 100%; 
    height: auto;
    border-radius: 1rem; 
}

/* Defines a gallery board for gallery images. Main difference from images container are
the flex direction, row ompared to column, and flex-wrap*/
.gallery {
    background-color: #1b1c1f;
    padding: 1rem 1rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 1rem;
    flex: 1;
    flex-wrap: wrap;
}
/* Settings for an individual gallery image. Note smaller size and margin all around */
.gallery img {
    width: 40%; 
    height: auto; 
    border-radius: 1rem; 
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

/* Defines the container for the develobbers article. Very similar to images, except for flex-wrap */
.develobbers {
    position: relative;
    background-color: #1b1c1f;
    padding: 1rem 1rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: row; 
    justify-content: center;
    align-items: center;
    margin: 1rem;
    flex-wrap: wrap;
}

/* Individual developer "card". */
.develobber {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 3rem;
    font-size: 1.5rem;
    color: white;
}

/* Individual developer "card" image. */
.develobber img {
    width: 16rem;
    height: auto;
    background-color: #ffffff;
    border-radius: 1rem; 
}

/* Defines the footer at the bottom of the webpage.*/
.footer {
    position: relative; 
    left: 0;
    right: 0; 
    height: auto;
    color: #ffffff;
    background-color: #15293d;
    padding-bottom: 30px;
    text-align: center;
}
/* Defines the size etc. of the images within the footer */
.footer img {
    width: 10rem;
    height: auto;
    margin-right: 1rem;
    margin-left: 1rem;
}

/* Media query for smaller screens, less than 900px. Accommodates most phone screen sizes. */
@media screen and (max-width: 900px) {

    /* Changes the navbar to be taller to allow the buttons to not skip over the navbar */
    .navbar {
        height: 10rem; 
    }
    
    /* Makes the navbar smaller */
    .navbar-title {
        font-size: 1rem; 
    }
    
    /* An individual navbutton. Defines color and size. In media query, the font size is smaller */ 
    .navbutton {
        font-size: 0.5rem;
        padding: 0.5rem 1.5rem;
    }

    /* Puts a smaller margin */
    .navbar img {
        margin-left: 1rem;
    }

    /* Makes the text header smaller and puts more margin on top, as 'rem' is a relative size */
    .text-header {
        margin-top: 9rem;
        font-size: 1.1rem; 
    }
    /* Makes the white bar after the text header thinner */
    .text-header::after {
        height: 0.3rem;
    }

    /* Puts the banner a bit lower to accommodate the change in navbar size.*/
    .banner {
        top: 4.6rem;
    }

    /* Changes flex-direction to column */
    .main-content {
        flex-direction: column;
    }

    /* Smaller font size*/
    .breadtext {
        font-size: 0.8rem; 
    }

    /* Adds margin to bottom and top */	
    .images img {
        margin-bottom: 1.5rem;
        margin-top: 1rem;
    }

    /* Changes the gallery image size and adds top margin */
    .gallery img {
        width: 100%; 
        margin-top: 1rem;
    }

    /* Smaller font size */
    .develobber {
        font-size: 1rem;
    }

    /* Taller footer and allows flex wrap */
    .footer {
        flex-wrap: wrap;
        height: 12rem;
    }
    /* Smaller image size */
    .footer img {
        width: 7rem;
    }
}