/*ANCHOR Global variables */
:root {
    --background-solid: #161921;
    --background-solid-dark: #101218;
    --background-solid-darker: #0c0e12;

    --link-box-solid: #202225;
    --link-box-solid-hover: #2f3136;

    --background-card: #202225;
    --background-card-hover: #2f3136;

    --border-color: #2f3136;
    --border-color-hover: #dcddde;

    --text-color: #dcddde;
    --text-color-muted: #72767d;
    --text-color-hover: #ffffff;

    --letterbox-color: #000000;

    --placeholder-image: url('assets/missing texture.png');
}

/* General */
/*ANCHOR General */
body {
    background-color: var(--background-solid);
    color: var(--text-color);
    margin: 0;
    font-family: 'Roboto', sans-serif;
}

.copyright {
    font-size: 12px;
}

/* SECTION main page */
/* Header */
/*ANCHOR Header */
#header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100px;
    background-color: var(--background-solid-dark);
    color: var(--text-color);
}


/* Navigation */
/*ANCHOR Navigation */
#topnav {
    display: flex;
    justify-content: left;
    align-items: center;
    width: 100%;
    height: 50px;
    background-color: var(--background-solid-dark)
}

#topnav a {
    float: left;
    display: block;
    color: var(--text-color);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    transition: background-color 0.1s ease-in-out;
}

#topnav a:hover {
    background-color: var(--link-box-solid-hover);
    color: var(--text-color-hover);
}

/* ANCHOR Banner */
#banner {
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-color: var(--background-solid);
    background-size: cover;
    width: 100%;
    height: 100px;
    color: var(--text-color);
    transition: color 0.1s ease-in-out;
}

/* Blender */
/*ANCHOR    Blender */
#blenderimg {
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-image: url("");
    background-size: cover;
    width: 100%;
    height: 750px;
    color: var(--text-color);
    transition: color 0.1s ease-in-out;
}

#blenderimg:hover {
    color: transparent;
}

#blenderimg h2 {
    font-size: 50px;
    text-align: center;
    margin: 0;
    padding: 0;
}

#blenderimg-txt {
    position: absolute;
    left: 0;
    padding: 0;
    margin: 0;
    font-size: 12px;
    color: var(--text-color-muted);
}

#blenderimg-link {
    text-decoration: none;
}
/* Cards */
/*ANCHOR Cards */
#cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    max-width: 1000px;
    height: 750px;
}

#cardstitle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    color: var(--text-color);
    padding: 0;
    margin: 0;
}

#cardhighlight
{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    color: var(--text-color);
    padding: 0;
    margin: 0;
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 10px;
    padding: 10px;
    width: 200px;
    height: 300px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--background-card);
    color: var(--text-color);
    transition: background-color 0.1s ease-in-out;
}

.card:hover {
    background-color: var(--background-card-hover);
    border-color: var(--border-color-hover);
    color: var(--text-color-hover);
    cursor: pointer;
}

.card-img {
    width: 100%;
    height: 100%;
    border-radius: 10px;    
}
.card-link {
    text-decoration: none;
    color: var(--text-color);
    transition: color 0.1s ease-in-out;
}

.card-link:hover {
    color: var(--text-color-hover);
}

/*letterbox */
/*ANCHOR Letterbox */
.letterbox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100px;
    background-color: var(--letterbox-color);
    color: var(--text-color);
    border: 0;
    margin: 0;
}
/* footer */
/*ANCHOR Footer */
#footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    width: 100%;
    height: 100px;
    background-color: var(--background-solid-dark);
    color: var(--text-color);
}

#footer p {
    margin: 0;
    padding: 0;
    padding-left: 10px;
    font-size: 12px;
}

/* !SECTION */

/* SECTION Gallery page */
/*ANCHOR Gallery */
#gallery-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    margin: 0;
    width: 100%;
    height: 100%;
}

/*ANCHOR Gal Image Link*/
.gal-link {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    padding: 5px;
    text-decoration: none;
    height: auto;
    width: 25%;
}

.gal-div{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    padding: 5px;
    text-decoration: none;
    height: auto;
    width: 25%;
}

/*ANCHOR Gal Image*/
.gal-img {
    display: flex;
    justify-content: flex-start;
    align-items: left;
    margin: 10px;
    padding: 5px;
    width: 30%;
    height: auto;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--background-card);
    color: var(--text-color);
    transition: background-color 0.1s ease-in-out;
}

/*ANCHOR Gal Image Hover*/
.gal-img:hover {
    background-color: var(--background-card-hover);
    border-color: var(--border-color-hover);
    color: var(--text-color-hover);
    cursor: pointer;
}