/* color schemes */
@media (prefers-color-scheme: light) {
  :root {
    --default-white: #fff;
    --default-text: #666;
    --default-black: #000;
    --default-filter: none;
	--default-border: rgba(0,0,0,1);
	--default-border-hover: rgba(0,0,0,0);
	--default-overlay: rgba(255,255,255,0.7);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --default-white: #000;
    --default-text: #aaa;
    --default-black: #fff;
    --default-filter: invert(100%);
    --default-border: rgba(111,111,111,1);
	--default-border-hover: rgba(111,111,111,0);
	--default-overlay: rgba(55,55,55,0.7);
  }
}

/* default mobile rem */
html {
  font-size: 34px;
}

body {
  background-color: var(--default-white);
  color: var(--default-text);
  font-size: 18px;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  text-align: justify;
  margin: 0;
}

/* asymmetrical margins wrapper */

.asym {
  margin: 0 auto 0 auto;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto;
  max-width: 20rem;
}

/* grid */

.wrapper {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  padding-left: 1rem;
  max-width: 11rem;
  border-left: 0.25rem solid var(--default-black);
  display: grid;
  grid-template-rows: auto auto auto auto;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-columns: 2rem 2rem 2rem 2rem;
  grid-template-areas:
    "logo logo socs socs"
    "emp2 text text text"
    "cols cols cols cols"
    "mail mail socm socm";
}

.logo {
  grid-area: logo;
}

.socs {
  grid-area: socs;
}

.txt {
  grid-area: text;
}

.cols {
  grid-area: cols;
}

.mail {
  grid-area: mail;
}

.socm {
  grid-area: socm;
}

/* new grid gallery */

.gallery-grid {
  width: 11rem;
  height: 25rem;
  display: grid;
  grid-column-gap: 1rem;
  grid-template-columns: 2rem 2rem 2rem 2rem;
  grid-template-rows:
    1rem 1rem 1rem 1rem 1rem
    1rem 1rem 1rem 1rem 1rem
    1rem 1rem 1rem 1rem 1rem
    1rem 1rem 1rem 1rem 1rem
    1rem 1rem 1rem 1rem 1rem
  ;
  grid-template-areas:
    'a01 a05 a09 a13'
    'a01 a05 a09 a13'
    'a01 a05 a09 a13'
    'a01 a05 a09 aaa'
    'a01 a05 a09 a14'
    'a01 a05 bbb a14'
    'ccc ddd a10 a14'
    'a02 a06 a10 a14'
    'a02 a06 a10 a14'
    'a02 a06 a10 a14'
    'a02 a06 a10 eee'
    'a02 a06 a10 a15'
    'fff ggg a10 a15'
    'a03 a07 hhh a15'
    'a03 a07 a11 a15'
    'a03 a07 a11 a15'
    'a03 a07 a11 iii'
    'jjj a07 a11 a16'
    'a04 kkk lll a16'
    'a04 a08 a12 a16'
    'a04 a08 a12 a16'
    'a04 a08 a12 a16'
    'a04 a08 a12 a16'
    'a04 a08 a12 a16'
    'a04 a08 a12 a16';
}


/* gallery items */

.gal-item {
  transition: outline 0.2s;
  outline: 1px solid var(--default-border);
  cursor: pointer;
}

.gal-item:hover {
  outline: 1px solid var(--default-border-hover);
}

.gal-item-a01 {grid-area: a01;background: #394962;}
.gal-item-a02 {grid-area: a02;background: #ddb39b;}
.gal-item-a03 {grid-area: a03;background: #2f6e37;}
.gal-item-a04 {grid-area: a04;background: #313131;}
.gal-item-a05 {grid-area: a05;background: #e08d49;}
.gal-item-a06 {grid-area: a06;background: #67563a;}
.gal-item-a07 {grid-area: a07;background: #ddc0a0;}
.gal-item-a08 {grid-area: a08;background: #301a3e;}
.gal-item-a09 {grid-area: a09;background: #8d9fc3;}
.gal-item-a10 {grid-area: a10;background: #c3ab3d;}
.gal-item-a11 {grid-area: a11;background: #d3d2d7;}
.gal-item-a12 {grid-area: a12;background: #e5e5e5;}
.gal-item-a13 {grid-area: a13;background: #aa23be;}
.gal-item-a14 {grid-area: a14;background: #0144b7;}
.gal-item-a15 {grid-area: a15;background: #a3bcc1;}
.gal-item-a16 {grid-area: a16;background: #4d6a6e;}

main > div > img {
  width: 100%;
  height: 100%;
}

/* logo */

.logo-cont {
  margin: 1rem 0;
  width: 10rem;
  height: 2rem;
}

.logo-cont > p {
  font-size: 1rem;
}

.logo-bar {
  background: var(--default-black);
  width: 0.5rem;
  margin-right: 0.2rem;
  float: left;
}

.s {
  margin-top: 0.5rem;
  height: 1.5rem;
}

.m {
  height: 2rem;
  margin-right: 0.3rem;
}

/* info */

.info-font {
  box-sizing: border-box;
  padding: 0 0.2rem;
  font-size: 0.3rem;
  letter-spacing: 1px;
  line-height: 0.7rem;
}

/* footer */

.mail-spacer {
  font-size: 0.6rem;
  height: 3rem;
}

.mail > a {
  color: var(--default-text);
  text-decoration: none;
  text-shadow: 0 0 0px var(--default-white);
  transition: text-shadow 0.3s;
}

.mail > a:hover {
  color: var(--default-text);
  text-decoration: none;
  text-shadow: 0 0 3px var(--default-text);
}

.mail > a:visited {
  color: var(--default-text);
  text-decoration: none;
}

.social-bar {
  position: relative;
  top: 1.25rem;
  width: 0.75rem;
  height: 1.75rem;
  margin-left: 0.25rem;
  float: right;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 0 0.25rem;
  transition: background-position 0.2s;
  filter: var(--default-filter);
}

.social-icon-big-fb {
  background-image: url(img/social-icon-big-fb.svg);
}

.social-icon-big-instagram {
  background-image: url(img/social-icon-big-instagram.svg);
}

.social-icon-big-twitter {
  background-image: url(img/social-icon-big-twitter.svg);
}

.social-icon-big-behance {
  background-image: url(img/social-icon-big-behance.svg);
}

.social-icon-big-artstation {
  background-image: url(img/social-icon-big-artstation.svg);
}

.social-icon-big-code {
  background-image: url(img/social-icon-big-code.svg);
}

.social-icon-big-sketchfab {
  background-image: url(img/social-icon-big-sketchfab.svg);
}

.social-icon-big-github {
  background-image: url(img/social-icon-big-github.svg);
}

.social-icon-big-da {
  background-image: url(img/social-icon-big-da.svg);
}

.social-icon-big-home {
  background-image: url(img/social-icon-big-home.svg);
}

.social-bar:hover {
  background-position: 0 0;
}

.social-bar-small {
  position: relative;
  top: 0;
  background: #000;
  width: 0.4rem;
  height: 0.6rem;
  margin-left: 0.15rem;
  float: right;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  transition: height 0.2s;
  filter: var(--default-filter);
}

.social-icon-small-fb {
  background-image: url(img/social-icon-small-fb.svg);
}

.social-icon-small-twitter {
  background-image: url(img/social-icon-small-twitter.svg);
}

.social-icon-small-instagram {
  background-image: url(img/social-icon-small-instagram.svg);
}

.social-icon-small-discord {
  background-image: url(img/social-icon-small-discord.svg);
}

.social-icon-small-mail {
  background-image: url(img/social-icon-small-mail.svg);
}

.social-icon-small-code {
  background-image: url(img/social-icon-small-code.svg);
}

.social-icon-small-home {
  background-image: url(img/social-icon-small-home.svg);
}

.social-bar-small:hover {
  height: 0.8rem;
}


/* big screen layout */

@media screen and (min-width:740px) {

  .wrapper {
    grid-template-areas:
      "logo logo socs socs"
      "emp2 text text text"
      "cols cols cols cols"
      "mail mail socm socm";
  }

  html {
    /* pc rem */
    font-size: 55px;
  }

  .col-wrap-flex {
    width: 11rem;
    height: 26rem;
  }

  .info-font {
    font-size: 0.3rem;
    line-height: 0.6rem;
  }

}

/* narrow screen layout */

@media screen and (max-width: 435px) {
  .wrapper {
    padding-left: 0.2rem;
    border-left: none;
  }
}

/* demos page */

.demos-header {
  font-size: 1rem !important;
}

.demos-wrapper {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  padding-left: 1rem;
  max-width: 11rem;
  border-left: 0.25rem solid var(--default-black);
  display: grid;
  grid-template-rows: auto auto auto;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-columns: 2rem 2rem 2rem 2rem;
  grid-template-areas:
    "logo logo socs socs"
    "demo demo demo demo"
    "mail mail socm socm";
}

.demos {
  grid-area: demo;
}

.demos > article {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 1rem;
  /*justify-content: center;*/
}

.demos-preview > img {
  width: 2rem;
  height: 4rem;
  transition: outline 0.2s;
  outline: 1px solid var(--default-border);
  cursor: pointer;
}

.demos-preview > img:hover {
  outline: 1px solid var(--default-border-hover);
}

.demos-link {
  margin: 0;
  font-size: 0.6rem;
  margin-bottom: 0.2rem;
}

.demos-link > a {
  color: var(--default-text);
  text-decoration: none;
  text-shadow: 0 0 0px var(--default-white);
  transition: text-shadow 0.3s;
}

.demos-link > a:hover {
  color: var(--default-text);
  text-decoration: none;
  text-shadow: 0 0 3px var(--default-text);
}

.demos-link > a:visited {
  color: var(--default-text);
  text-decoration: none;
}

.demos-description {
  font-size: 0.3rem;
  margin: 0;
}

.demos > article > div {
  /*background-color: blue;*/
  box-sizing: border-box;
  padding-left: 0.5rem;
  width: 8rem;
  height: 4rem;
}

/* overlay */

#overlay-img {
	display: none;
	opacity: 0;
	width: 90%;
  margin: auto;
  max-width: 90vw;
  max-height: calc(90vh - 1.5rem);
  object-fit: contain;
  cursor: pointer;
}

#overlay-bg {
	z-index: 2;
	background: var(--default-overlay);
	width: 100%;
	height: 100%;
	position: fixed;
	display: none;
	opacity: 0.2;
}

#overlay-cont {
  margin: auto;
  padding-top: 0.5rem;
	display: block;
	max-width: 90vw;
	max-height: 90vh;
	position: relative;
}

#overlay-image-cont {
	width: 100%;
  margin: auto;
}

#overlay-loader {
  display: flex;
  align-items: center;
  width: 30px;
  height: 40vh;
  margin: auto;
	z-index: 4;
	opacity: 1;
	filter: var(--default-filter);
}

#overlay-menu {
  width: 1.8rem;
	height: 1rem;
	position: relative;
	z-index: 3;
	display: block;
	margin: 0 auto 0.2rem auto;
	filter: var(--default-filter);
}

#overlay-minimenu-minus {
  width: 0.5rem;
  height: 0px;
	float: left;
	z-index: 3;
	cursor: pointer;
	background: url(img/lewo.png);
  margin-right: 0.1rem;
  background-size: 0.5rem;
  background-repeat: no-repeat;
}

#overlay-minimenu-exit {
  width: 0.5rem;
  height: 0px;
  margin-right: 0.1rem;
  float: left;
	z-index: 3;
	cursor: pointer;
	background: url(img/exit.png);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
}

#overlay-minimenu-plus {
  width: 0.5rem;
	height: 0px;
	float: left;
	z-index: 3;
	cursor: pointer;
	background: url(img/prawo.png);
  background-size: 0.5rem;
  background-repeat: no-repeat;
}

#overlay-info{
  margin: auto;
	padding: 0.2rem;
	background:  var(--default-white);
  width: 60vw;
  text-align: center;
	font-weight:300;
}