/* main layout */
/* go to hell with Bootstrap---I do it by myself */

/* load IBM plex sans font */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --bg-nav-color: oklch(21% 0.034 264.665);
  --primary-color: oklch(50% 0.134 242.749);
}

* {box-sizing: border-box; margin: 0; padding: 0;}

/* layout */
body {font-family: 'IBM Plex Sans', sans-serif; font-weight: 300; font-size: 1.1rem;}
main {grid-row: 2; align-items: baseline; align-self: baseline;}
footer {margin: auto; text-align: center; margin: 30px; font-size: 0.9em;}
section {margin-bottom: 2.5rem;}
#photo {background-color: var(--bg-nav-color); grid-column: 2; grid-row: 1;}

.layout {width: 990px; margin: auto; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; column-gap: 2rem;}
.aside {grid-column: 2; grid-row: 2; background: var(--bg-nav-color); grid-column: 2; grid-row: 2; color: white;}
.aside h1 {text-align: center;}

h1, h2, h3, h4 {font-weight: 700; margin-bottom: 1rem;}
h1, h2 {font-size: 2rem; }
h2 {text-transform: uppercase;}

#circle {width: 100px; height: 100px; border-radius: 50%; background-color: white; margin: 2rem auto 1rem auto; opacity: 0.95;
  background: #eee url('../images/martin-trnecka.png') no-repeat center -0px; background-size: auto 120px;}
main a {color: var(--primary-color); text-decoration: none; font-weight: 300;}
main a:hover {text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 1px;}

abbr {cursor: help;}

/* mobilni navigace */
#nav-icon {background: none; border: none; vertical-align: middle; cursor: pointer; color: white; font-size: 2rem; display: none;}
#nav-icon:focus {outline:0;}

/* navigation */
nav ul {padding-left: 0; margin-top: 3rem;}
nav ul li {list-style-type: none; border-bottom: 1px solid rgba(146,146,146,.18); margin: 0}
nav ul li a {color: white; text-transform: uppercase; text-decoration: none; padding: 0.75rem; padding-left: 1.5rem; display: block; overflow: hidden; position: relative;}

/* hover animation */
nav ul li a::after {
  content: "";
  position: absolute;
  top: 100px;
  left: -50px;
  width: 50px;
  height: 50px;
  background-color: rgba(146,146,146,.1);
  transition: all .1s ease;
  transform: scale(3) rotate(30deg);
}

nav ul li a:hover::after {
  width: 300px;
  height: 300px;
  background-color: rgba(255,255,255,0.1);
  transition: all .3s cubic-bezier(.55,.06,.68,.19);
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.14);
  transition-delay: initial;
}


/* education, timeline with bullet points */
ul.timeline {
  border-left: 1px dashed oklch(44.6% 0.03 256.802);
  padding: 0 0 0 1.5rem;
  margin: 0.5rem;
}

ul.timeline li {
  position: relative;
  list-style-type: none;
  margin-bottom: 1rem;
}

ul.timeline li::before {
  content: "";
  display: block;
  position: absolute;
  width: 1rem;
  height: 1rem;
  background-color: var(--primary-color);
  border-radius: 50%;
  border: 5px solid white;
  left: calc(-2rem - 5.5px);
}


.margin-bottom {margin-bottom: 2.5rem;}

/* contact info */
#contact div {float: left; width: 75%; padding-bottom: 0.5rem;}
#contact div:nth-child(2n) {width: 25%; font-weight: 400;}
#contact:after {content: ""; display: block; clear: both;}


/* seznamy */
ul.item-list {padding-left: 0; margin-left: 0;}
ul.item-list li {list-style-type: none; border-left: 0.5rem solid var(--primary-color); padding-left: 1rem; margin-bottom: 0.75rem;}

ol {padding-left: 2rem; list-style: none; counter-reset: my-counter;}
ol li {margin-bottom: 0.75rem; counter-increment: my-counter; position: relative; padding-left: 0.25rem; counter-increment: my-counter -1;}
ol li::before {
  position: absolute;
  content: "" counter(my-counter);
  text-align: center;
  box-sizing: border-box;
  left: -2rem;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.75rem;
  line-height: 1.5rem;
  top: -1px;
  background-color: var(--primary-color);
  color: white;
  margin-right: 7px;
}

/* publikace */
.publication-aditional {display: inline; word-wrap: break-word;}
.publication-aditional:before {content: "["}
.publication-aditional:after {content: "]"}

/* oznameni */
.announcement {float: none; width: 100%; border: 1px solid var(--primary-color); padding: 0px 20px; background-color: var(--primary-color); color: white;}
.announcement a {color: white;}

.table-row-description {vertical-align: top; text-align: right; padding-right: 1rem; font-weight: 400;}
.gray {color: oklch(44.6% 0.03 256.802);}

/* responsive modification */
/* Normal Desktop */
@media (max-width: 1020px) {
  .layout {width: 96%;}
}

/* Portrait tablet to landscape and desktop */
@media (max-width: 930px) {
  #photo {margin: 0; border: 1px solid var(--bg-nav-color);}
  .layout {display: block; width: 100%;}
  main {padding: 4vw 4vw;}
  .aside {width: 100%; padding: 1.75rem 0; cursor: pointer; text-align: center;}
  .aside nav {margin: auto; width: 70%;}
  .aside nav ul {position: absolute; display: none; width: 70%; margin: auto; padding: 0; background: var(--bg-nav-color); margin-top: 1.75rem; text-align: left;}
  .aside:hover nav ul {display: block;}
  .aside > div {display: flex;justify-content: center; align-items: baseline;}
  h1 {display: inline-block; margin: 0;}
  #nav-icon {display: block; margin-left: 1rem;}

}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
  #circle {display: none;}
}

/* Landscape phones and down */
@media (max-width: 480px) {
  #contact div {width: 100%; padding-bottom: 0.25rem;}
  #contact div:nth-child(2n) {width: 100%; margin-top: 0.5rem};
}