/******************************************************************************/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< Common >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/******************************************************************************/
:root {
	--primary: #FF6A00;
	--primary-light: orange;
	--primary-dark: #7F3300;
    
	--secondary: #00cbcc;
	--secondary-light: cyan;
	--secondary-dark: #00cbcc;
    
    --tertiary: white;
    
    --background-one: white; /*TODO: invert*/
    --background-two: black;
    --background-space: #2A2829;
}


h5 {
    color: var(--primary-light);
    font-size: 1.5em;
}

.ratings {
    color: var(--background-one);
    font-size: 0.6em;
}

header h3 {
    color: var(--tertiary);
}

header img {
    align-self: center;
    margin-top: 0px;
    margin-bottom: 1em;
    
    /*"no" border*/
    border-radius: 0px;
    border-color: var(--background-space);
}

#first-name {
    color: var(--secondary-light);
}

#middle-name {
    color: var(--primary);
}

#last-name {
}

#nick-name {
    color: var(--primary-light);
    font-style: italic;
    font-size: 2em;
}
/******************************************************************************/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< Nav >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/******************************************************************************/
nav {
    background-color: var(--background-space);
}

nav ul li {
    background-color: var(--background-two);
}

.current a, .current a:visited {
    color: var(--background-one);
}

.current {
    background-color: var(--primary);
}

/******************************************************************************/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< Main content >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/******************************************************************************/
.main {
    color: var(--background-one);
    background-color: var(--background-two);
}

/******************************************************************************/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< Portfolio >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/******************************************************************************/
.piece {
    flex-direction: column;
    margin-bottom: 2em;
    
    width: calc(40% * 5 / 3); /*40% of the screen given 40% margins e.g. 6/10 or 3/5 content,.fit top game on big screen*/
}

.piece h2 {
    color: var(--background-one);
}

.screenshots {
    width: 100%;
    background-color: var(--background-two);
    justify-content: center;
}

.screenshots img {
    border-color: var(--primary-light);
    width: calc(33% - 8px - 5px);
}

.description {
    margin-left: 0px;
    padding-left: 0px;
    padding-top: 0.5em;
}

.description p {
    padding-bottom: 0px;
}

.date {
    color: var(--primary);
}

header, .sidebar, footer {
    background-image: url('../img/games/space.png');
}

.sidebar h1, .sidebar h2, .sidebar h3, .sidebar h4, .sidebar p, .sidebar a, .hide-stars, footer small {
    background-color: var(--background-space);
}

.sidebar h2 {
    font-size: 1em;
}

.sidebar h3 {
    font-size: 5em;
    padding-top: 0.2em;
}

.sidebar h4 {
    color: var(--primary);
}

.android {
}

.sidebar img {
    border: none;
    max-width: 196px;
}

/******************************************************************************/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< Media queries >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/******************************************************************************/
@media screen and (max-width: 1200px){
    .piece {
        width: 100%;
    }
    
    .screenshots img {
        width: 40%;
        max-width: none
    }
}

@media screen and (max-width: 800px){
    #first-name, #middle-name {
        display: none;
    }
    #last-name {
        display: inline;
    }
}

@media screen and (max-width: 640px){
    .screenshots img {
        width: calc(40% * 5 / 3);
    }
}