@import 'font.css';

html {
  font-size: calc(16px + .2vw);
}

body {
  background: #f3f5f7 url("img/lightnoise.png"); color: #222; line-height: 1.6em; font-family: "PT Serif", Serif;  font-weight: 400; margin: 0; text-shadow: 0 -1px 1px rgba(255, 255, 255, 0.01); text-rendering: optimizeLegibility;
} 
h1 {
  align-self: center; flex-grow: 1; font-family: 'hw'; font-size: calc(18px + .5vw + .75vh); font-weight: normal; margin: 0; padding: 0 0 .5vw calc(24px + 4rem); text-align: left; text-shadow: 1px 1px 3px rgba(0,0,0,.5); 
}
h2 {
  font-size: calc(24px + 1.2vw); font-weight: 400; line-height: 1.2; padding: 1em 0 .5em; text-align: center;
}
h3 {
  font-size: calc(18px + 1vw); font-weight: 400; line-height: 1.2; padding: .75em 0 .5em; text-align: center;
}
p {
  padding: .5em 0; text-align: justify;
}
img {
  max-width: 100%;
}
abbr {
  cursor: default;
}
a {
  color: #48f;
	position: relative;
  text-decoration: none;
}
	
a::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: .1em;
  left: 0;
  background-color: #48f;
  visibility: hidden;
  transform: scaleX(0);
  transition: all .25s ease-in-out 0s;
}
a:hover::before {
  visibility: visible;
  transform: scaleX(1);
}  
b {
  font-weight: 500;
}

::-moz-focus-inner, ::-moz-focus-outer {
  border: 0; outline: 0;
}
input[type=radio] { outline:none }

.himg {
  background: #101214; height: 30vh; overflow: hidden;
}
.himg div {
  background: url("img/wordcloudIF.svg"); background-size: cover; height: 100%; transform: scale(2.5); opacity: 0; transition: transform cubic-bezier(.77,0,.73,.9) 1.5s 0.5s, opacity cubic-bezier(.8,0,1,.8) 1.75s 0.4s;
}
.himg.load div {
  transform: scale(1); opacity: 1;
}

.me {
  background: #2a2d2f url("img/lightnoise.png"); color: #eee; clip-path: polygon( 0 calc(.25vh + .75vw + 8px), 100% 0, 100% 100%, 0 calc(100% - .75vh - 1.75vw - 8px) );  margin: calc(-.25vh - .75vw - 12px) 0 calc(-.75vh - 1.75vw - 12px); padding-bottom: .5vw; /*max-height: 200px;*/
}
.me div {
  display: flex; max-width: 960px; margin: auto; padding: 0 4vw;
}
.me img {
  box-shadow: 0 0 5px -1px rgba(0,0,0,.2); border-radius: 50%; margin: 2vh 0 2vh 2vw; max-width: calc(10vw + 16px); max-height: calc(10vh + 16px); /*width: 16vw;*/ opacity: .85; display: block;
}

section {
  padding: 0 4vw; background-image: radial-gradient(ellipse farthest-corner at 50% 3em, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%); 
}
section > * {
  max-width: 960px; margin: auto;
}
section:last-of-type {
  padding-bottom: 4vw; 
}

.cv {
  border: none; border-collapse: collapse;
}
.cv td {
  background: none; font-size: 1rem; font-weight: 400; padding: .25rem 1rem .25rem 0; vertical-align: top; line-height: 1.4
}
.cv td:nth-child(1) {
  font-size: 24px; line-height: 24px; width: 24px; 
}
.cv td:nth-child(2) {
  text-align: right; width: 1.75em; 
}
.cv td:nth-child(3) {
  background-color: #e6e9eb; padding: .75rem 0 0; width: 8px; 
}
.cv td:nth-child(4) {
  padding: 0.25rem 1rem 0.5rem 1rem;
}
.pnt {
  background-color: #c4c8ca; border-radius: 50%; display: inline-block; height: 8px; width: 8px; 
}
  
[data-icon]:after {
  position: relative; top: 4px;
}
[data-icon=j]:after {
  color: #f5e200;
}
[data-icon=g]:after {
  color: #444;
}
[data-icon=i]:after {
  color: #be804f;
}
[data-icon=h]:after {
  color: #9aa9b5;
}
[data-icon=k]:after {
  color: #f87e95;
}

#veda {
  padding-bottom: 3rem;
}
@media (max-width: 1024px) {
  #veda .fig {
    max-width: 100vw;
    margin: 0 -4vw;
  }
}

dt {
  margin: 1.5rem 0 .5rem; text-align: left;
}
dt button {
  float: right; background: url("img/plus.svg"); border: 1px solid #e6e8e9; border-radius: 50%; height: 34px; width: 34px; margin-left: 1rem;
}
dt button:hover {
  background: #f5f6f7 url("img/plus.svg"); border: 1px solid #ddd; box-shadow: 1px 1px 5px -1px rgba(0,0,0,.05)
}

dl dt + dd {
  display: none; margin-left: calc(.5rem + 2vw);
}
dl dt.on + dd {
  display: block;
}
dt button {
  
}
dt.on button {
  background: url("img/minus.svg");
}

#praca {
  padding-bottom: 2rem;
}

#foto {
  background: url("img/st4.webp"); background-size: cover; background-position: center;
  padding-bottom: 0;
  height: 70vw;
  max-height: 900px;
}
#foto h3 {
  color: #eee;
  text-shadow: 1px 1px 4px rgba(0,0,0,.25)
}

#pfoto p {
  text-align: center;
  padding: calc(17.5px + 1vw) 0 1vw;
}

footer {
  background: #9ba0a2 url("img/lightnoise.png"); border-top: 1px solid #888; box-shadow: 0 5px 4px -6px rgba(0,0,0,.1) inset; color: #fff; padding: 1rem 0 1rem; text-shadow: 1px 1px 3px rgba(0,0,0,.25); position: relative; overflow: hidden;
}

footer p {
  font-size: .9rem; margin: 0; padding: .25rem; text-align: center; position: relative; z-index: 1;
}

footer a {
  color: #f2f2f2; text-decoration: none;
}
footer a:hover {
  color: #fff;
}
footer a:hover::before {
  visibility: hidden;
}

footer i {
  font-size: 1.25em; line-height: 1.25em; vertical-align: top
}
footer i:after {
  vertical-align: middle;
}