/*
* vncnt,css
* Copyright 2017, Vincent Messow
* vncnt.eu
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 
* This file expects to inherit a ton of stuff from barebones.css
*/

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/
@import url('barebones.css');

@media screen and (prefers-color-scheme: dark) {
	:root {
		/* dark theme: light background, dark text, blue accent */
		--theme-hue: 0;					/* black */
		--accent-hue: 194;			/* blue */

		--text-color-richer: hsl(var(--theme-hue), 0%, 95%);		/* 		*/
		--text-color-normal: hsl(var(--theme-hue), 0%, 80%);		/* text color; button:hover:focus color */
		--text-color-softer: hsl(var(--theme-hue), 0%, 67%);		/* button color; button:hover border */

		--accent-color: hsl(var(--accent-hue), 76%, 49%);				/* link; button-primary bg+border; textarea,select:focus border */
		--accent-color-hover: hsl(var(--accent-hue), 86%, 57%);	/* link hover; button-primary:hover:focus bg+border */

		--border-color: hsl(var(--theme-hue), 0%, 27%);					/* button border */
		--border-color-softer: hsl(var(--theme-hue), 0%, 20%);	/* textarea,select,code,td,hr border	 */
	
		--background-color: hsl(var(--theme-hue), 0%, 12%);			/* body background; textarea,select background */
		--background-color-softer: hsl(var(--theme-hue), 0%, 18%);
		--code-background: hsl(var(--theme-hue), 0%, 5%);				/* code background*/

		--button-primary-color: white;
  }
	
	img.value-img {
		filter: invert(0.8);
	}
  img {
    opacity: .80;
    transition: opacity .5s ease-in-out;
  }
  img:hover {
    opacity: 1;
  }
}

h1.h3-like, h2.h3-like {
  font-size: 3.0rem;
  line-height: 1.3;
  letter-spacing: -.1rem;
}

.landingpage, .error404 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
}

.error404 {
  text-transform: uppercase;
  text-align: center;
}

p.reset-margin {
  margin-bottom: 1rem; /*skeleton.css: 2.5rem*/
}

.avatar {
    width: 20rem;
	  border-radius: 50%;
	  -webkit-border-radius: 50%;
	  -moz-border-radius: 50%; 
	  max-width: 60%;
    box-sizing: border-box;
    
    display: block;
    margin: auto;
}

.autocenter {
  text-align: center;
}

.icons {
  bottom: 0;
}

.icons h2, h3 {
  margin-bottom: 0;
}


.icon {
	text-rendering: geometricPrecision !important;
	text-decoration: none;
	border-bottom: none;
	position: relative;
	color: #555555;
}

/* Larger than mobile (default point when grid becomes active) */
@media (min-width: 600px) {
  h1.h3-like, h2.h3-like {
    font-size: 3.6rem;
  }
    
  .grid-container.fivetoseven {
		grid-template-columns: 5fr 7fr;
	}
	
	.item {
	  align-self: center;
	}

  .landingpage, .error404 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    max-width: 75%;
  }

  .avatar {
    max-width: 200%;
    box-sizing: border-box;
    float: right;
  }
  
  .autocenter {
    text-align: left;
    padding: 0 0;
  }
} 

/* Larger than phablet */
@media (min-width: 900px) {
  html {
	  --base-font-size: 80%;
  }
  
  p.reset-margin {
    margin-bottom: 2rem; /*skeleton.css: 2.5rem*/
  }
}

/* Larger than tablet */
@media (min-width: 1200px) {}