WWW/css/styles.css

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  background-color: black;
}

h1, h2, h3, h4, h5, p {
  padding: 0;
  margin: 0;
}

#nav-mini, #nav-ctrl {
  display: none;
}

#nav {
  background-color: black;
  position: fixed;
  display: block;
  justify-content: center;
  top: 0;
  width: 100%;
  z-index: 1;
  box-shadow: 0 0 0.1em dimgray;
  text-align: center;
}

#nav a, #nav-mini .menu a {
  color: white;
  display: inline-block;
  vertical-align: middle;
  font-family: sans-serif;
  font-size: calc(0.75em + 0.05vw);
  font-weight: bold;
  outline: 0;
  padding: 1em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
}

#nav-mini {
  position: fixed;
  top: 0;
  left: 10%;
  outline: 0;
  text-decoration: none;
  z-index: 1;
  background-color: black;
  box-shadow: 0 0 0.1em dimgray;
  border-radius: 0 0 0.1em 0.1em;
}

#nav-mini .menu {
  display: none;
  background-color: black;
  margin: 48px 48px 48px 48px;
}

#nav-mini .menu a {
  display: block;
  text-align: center;
  padding: 1em 0 1em 0;
  border-bottom: 0.1em solid dimgray;
}

#nav a:hover, #nav-mini .menu a:hover {
  color: lightgray;
}

#nav-ctrl + label {
  width: 3em;
  height: 3em;
  background-color: white;
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='bars' class='svg-inline--fa fa-bars fa-w-14' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='currentColor' d='M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z'%3E%3C/path%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50%;
  cursor: pointer;
  float: left;
  box-shadow: 0 0 0.1em dimgray;
  border-radius: 0 0 0.1em 0.1em;
}

/* #nav-ctrl:hover + label {
  filter: invert(100%);
  box-shadow: 0 0 0.5em white;
} */

#nav-ctrl:checked + label {
  filter: invert(100%);
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='times' class='svg-inline--fa fa-times fa-w-11' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512'%3E%3Cpath fill='currentColor' d='M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z'%3E%3C/path%3E%3C/svg%3E");
  background-size: 25%;
  box-shadow: none;
}

/* #nav-ctrl:checked:hover + label {
  filter: invert(0%);
  box-shadow: 0 0 0.5em black;
} */

#nav-ctrl:checked + label + .menu {
  display: block;
}

#home {
  height: 100%;
  width: 100%;
  background-image: url("../img/background.jpg");
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

#home .content {
  margin: 0;
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

#home .title {
  color: white;
  font-family: sans-serif;
  font-size: calc(1em + 4.5vw);
  font-weight: bold;
  margin-bottom: 0.25em;
  text-shadow: 0 0 0.1em black;
}

#home .subtitle {
  color: white;
  font-family: serif;
  font-size: calc(1em + 0.5vw);
  font-weight: normal;
  font-style: italic;
  margin-bottom: 2.5em;
  text-shadow: 0 0 0.1em black;
}

#home .social, #footer .social {
  display: block;
  justify-content: center;
}

#home .social a, #footer .social a {
  height: calc(1em + 1vw);
  width: calc(1em + 1vw);
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  text-decoration: none;
  outline: 0;
  margin: 0 1.5em;
  font-size: 1em;
  display: inline-block;
  vertical-align: middle;
  filter: invert(100%) drop-shadow(0 0 0.1em black);
}

#home .social a:hover {
  filter: invert(90%) drop-shadow(0 0 0.1em black);
}

#about, #contact {
  background: black;
}

#about .content, #contact .content, #experience .content, #education .content {
  width: 80%;
  max-width: 50em;
  margin: 0 auto;
  padding: 6em 1em;
}

#about .left .pic {
  border-radius: 100%;
  width: 7em;
  height: 7em;
  background-image: url("../img/profile-pic.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#about .title, #contact .title {
  color: white;
  font-family: sans-serif;
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

#about .text, #contact .text {
  color: lightgray;
  font-family: sans-serif;
  font-size: 1em;
  text-align: justify;
}

#about p, #experience p, #education p, #contact p{
  margin-bottom: 0.5em;
}

#experience, #education {
  background: white;
}

#about .left, #experience .left, #education .left {
  float: left;
  width: 30%;
  text-align: left;
}

#about .right, #experience .right, #education .right {
  display: block;
  width: 70%;
  margin-left: 30%;
}

#experience .content {
  border-bottom: 0.1em solid lightgray;
}

#experience .title, #education .title {
  display: inline;
  color: black;
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 1em;
  font-weight: bold;
  padding-bottom: 0.2em;
  border-bottom: 0.2em solid lightgray;
}

#experience .organization, #education .university {
  color: black;
  font-family: sans-serif;
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

#experience .position, #education .degree {
  color: dimgray;
  font-family: serif;
  font-size: 1.1em;
  font-style: italic;
  font-weight: normal;
  margin-bottom: 0.5em;
}

#experience .date, #education .date {
  color: dimgray;
  font-family: sans-serif;
  font-size: 0.9em;
  font-style: normal;
  font-weight: normal;
  display: inline-block;
}

#experience .description, #education .description {
  color: dimgray;
  font-family: sans-serif;
  font-size: 1em;
  font-weight: normal;
  text-align: justify;
  margin-bottom: 2em;
}

#education .thesis {
  color: dimgray;
  font-family: sans-serif;
  font-size: 0.9em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

#education .description a {
  color: dimgray;
  font-family: sans-serif;
  font-size: 0.9em;
  font-weight: bold;
  text-decoration: none;
  outline: 0;
}

#contact .text {
  display: inline-block;
}

#contact .button {
  border-radius: 0.1em;
  float: right;
  outline: 0;
  text-decoration: none;
  color: black;
  padding: 1em 1.25em;
  background-color: white;
  min-width: 12em;
  font-size: 1em;
  text-align: center;
  display: block;
}

#contact .button:hover, #contact .button:active {
  background-color: dimgray;
  color: white;
}

#contact .button:hover > .icon, #contact .button:active > .icon {
  filter: invert(100%);
}

#contact .button .icon {
  display: inline-block;
  vertical-align: middle;
  filter: invert(0%);
  height: 1.25em;
  width: 1.25em;
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='download' class='svg-inline--fa fa-download fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z'%3E%3C/path%3E%3C/svg%3E");
}

#contact .button .label {
  vertical-align: middle;
  display: inline-block;
  font-weight: bold;
  margin-left: 1.25em;
}

#footer {
  background-color: black;
  text-align: center;
  padding: 0 1em 1em;
}

#footer .social a {
  font-size: .5em;
  filter: invert(50%) drop-shadow(0 0 0.1em black);
}

#footer .social a:hover {
  filter: invert(100%) drop-shadow(0 0 0.1em black);
}

#footer .text {
  margin-top: 2em;
  font-size: 0.75em;
  font-weight: normal;
  text-align: center;
  color: gray;
  display: block;
}

@media (max-width: 600px) {
  /* Navigation */
  #nav {
    display: none;
  }

  #nav-mini {
    display: block;
  }

  /* About */
  #about .left {
    /* display: none; */
    width: 100%;
    margin-bottom: 3em;
  }

  #about .left .pic {
    margin: auto;
  }

  #about .right {
    width: 100%;
    margin-left: 0;
  }

  /* Resume */
  #experience .left, #education .left {
    float: none;
    text-align: center;
    width: 100%;
    margin-bottom: 3em;
  }

  #experience .right, #education .right {
    width: 100%;
    margin-left: 0;
  }

  /* Contact */
  #contact .text {
    margin-bottom: 2em;
  }

  #contact .button {
    display: block;
    margin: 0 auto;
    float: none;
  }
}

/* Icons */
.email {
  background-image: url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhciIgZGF0YS1pY29uPSJlbnZlbG9wZSIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLWVudmVsb3BlIGZhLXctMTYiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNNDY0IDY0SDQ4QzIxLjQ5IDY0IDAgODUuNDkgMCAxMTJ2Mjg4YzAgMjYuNTEgMjEuNDkgNDggNDggNDhoNDE2YzI2LjUxIDAgNDgtMjEuNDkgNDgtNDhWMTEyYzAtMjYuNTEtMjEuNDktNDgtNDgtNDh6bTAgNDh2NDAuODA1Yy0yMi40MjIgMTguMjU5LTU4LjE2OCA0Ni42NTEtMTM0LjU4NyAxMDYuNDktMTYuODQxIDEzLjI0Ny01MC4yMDEgNDUuMDcyLTczLjQxMyA0NC43MDEtMjMuMjA4LjM3NS01Ni41NzktMzEuNDU5LTczLjQxMy00NC43MDFDMTA2LjE4IDE5OS40NjUgNzAuNDI1IDE3MS4wNjcgNDggMTUyLjgwNVYxMTJoNDE2ek00OCA0MDBWMjE0LjM5OGMyMi45MTQgMTguMjUxIDU1LjQwOSA0My44NjIgMTA0LjkzOCA4Mi42NDYgMjEuODU3IDE3LjIwNSA2MC4xMzQgNTUuMTg2IDEwMy4wNjIgNTQuOTU1IDQyLjcxNy4yMzEgODAuNTA5LTM3LjE5OSAxMDMuMDUzLTU0Ljk0NyA0OS41MjgtMzguNzgzIDgyLjAzMi02NC40MDEgMTA0Ljk0Ny04Mi42NTNWNDAwSDQ4eiI+PC9wYXRoPjwvc3ZnPg==")
}

.hidden-email:before {
  content: attr(data-tld) "." attr(data-domain) "\0040" attr(data-name);
  unicode-bidi: bidi-override;
  direction: rtl;
}

.git {
  background-image: url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhYiIgZGF0YS1pY29uPSJnaXQtYWx0IiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtZ2l0LWFsdCBmYS13LTE0IiByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTQzOS41NSAyMzYuMDVMMjQ0IDQwLjQ1YTI4Ljg3IDI4Ljg3IDAgMCAwLTQwLjgxIDBsLTQwLjY2IDQwLjYzIDUxLjUyIDUxLjUyYzI3LjA2LTkuMTQgNTIuNjggMTYuNzcgNDMuMzkgNDMuNjhsNDkuNjYgNDkuNjZjMzQuMjMtMTEuOCA2MS4xOCAzMSAzNS40NyA1Ni42OS0yNi40OSAyNi40OS03MC4yMS0yLjg3LTU2LTM3LjM0TDI0MC4yMiAxOTl2MTIxLjg1YzI1LjMgMTIuNTQgMjIuMjYgNDEuODUgOS4wOCA1NWEzNC4zNCAzNC4zNCAwIDAgMS00OC41NSAwYy0xNy41Ny0xNy42LTExLjA3LTQ2LjkxIDExLjI1LTU2di0xMjNjLTIwLjgtOC41MS0yNC42LTMwLjc0LTE4LjY0LTQ1TDE0Mi41NyAxMDEgOC40NSAyMzUuMTRhMjguODYgMjguODYgMCAwIDAgMCA0MC44MWwxOTUuNjEgMTk1LjZhMjguODYgMjguODYgMCAwIDAgNDAuOCAwbDE5NC42OS0xOTQuNjlhMjguODYgMjguODYgMCAwIDAgMC00MC44MXoiPjwvcGF0aD48L3N2Zz4=")
}

.photos {
  background-image: url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhciIgZGF0YS1pY29uPSJpbWFnZSIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLWltYWdlIGZhLXctMTYiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNNDY0IDY0SDQ4QzIxLjQ5IDY0IDAgODUuNDkgMCAxMTJ2Mjg4YzAgMjYuNTEgMjEuNDkgNDggNDggNDhoNDE2YzI2LjUxIDAgNDgtMjEuNDkgNDgtNDhWMTEyYzAtMjYuNTEtMjEuNDktNDgtNDgtNDh6bS02IDMzNkg1NGE2IDYgMCAwIDEtNi02VjExOGE2IDYgMCAwIDEgNi02aDQwNGE2IDYgMCAwIDEgNiA2djI3NmE2IDYgMCAwIDEtNiA2ek0xMjggMTUyYy0yMi4wOTEgMC00MCAxNy45MDktNDAgNDBzMTcuOTA5IDQwIDQwIDQwIDQwLTE3LjkwOSA0MC00MC0xNy45MDktNDAtNDAtNDB6TTk2IDM1MmgzMjB2LTgwbC04Ny41MTUtODcuNTE1Yy00LjY4Ni00LjY4Ni0xMi4yODQtNC42ODYtMTYuOTcxIDBMMTkyIDMwNGwtMzkuNTE1LTM5LjUxNWMtNC42ODYtNC42ODYtMTIuMjg0LTQuNjg2LTE2Ljk3MSAwTDk2IDMwNHY0OHoiPjwvcGF0aD48L3N2Zz4=")
}

.in {
  background-image: url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhYiIgZGF0YS1pY29uPSJsaW5rZWRpbiIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLWxpbmtlZGluIGZhLXctMTQiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNDQ4IDUxMiI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNNDE2IDMySDMxLjlDMTQuMyAzMiAwIDQ2LjUgMCA2NC4zdjM4My40QzAgNDY1LjUgMTQuMyA0ODAgMzEuOSA0ODBINDE2YzE3LjYgMCAzMi0xNC41IDMyLTMyLjNWNjQuM2MwLTE3LjgtMTQuNC0zMi4zLTMyLTMyLjN6TTEzNS40IDQxNkg2OVYyMDIuMmg2Ni41VjQxNnptLTMzLjItMjQzYy0yMS4zIDAtMzguNS0xNy4zLTM4LjUtMzguNVM4MC45IDk2IDEwMi4yIDk2YzIxLjIgMCAzOC41IDE3LjMgMzguNSAzOC41IDAgMjEuMy0xNy4yIDM4LjUtMzguNSAzOC41em0yODIuMSAyNDNoLTY2LjRWMzEyYzAtMjQuOC0uNS01Ni43LTM0LjUtNTYuNy0zNC42IDAtMzkuOSAyNy0zOS45IDU0LjlWNDE2aC02Ni40VjIwMi4yaDYzLjd2MjkuMmguOWM4LjktMTYuOCAzMC42LTM0LjUgNjIuOS0zNC41IDY3LjIgMCA3OS43IDQ0LjMgNzkuNyAxMDEuOVY0MTZ6Ij48L3BhdGg+PC9zdmc+")
}

.tr {
  background-image: url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhYiIgZGF0YS1pY29uPSJ0d2l0dGVyIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtdHdpdHRlciBmYS13LTE2IiByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDUxMiA1MTIiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTQ1OS4zNyAxNTEuNzE2Yy4zMjUgNC41NDguMzI1IDkuMDk3LjMyNSAxMy42NDUgMCAxMzguNzItMTA1LjU4MyAyOTguNTU4LTI5OC41NTggMjk4LjU1OC01OS40NTIgMC0xMTQuNjgtMTcuMjE5LTE2MS4xMzctNDcuMTA2IDguNDQ3Ljk3NCAxNi41NjggMS4yOTkgMjUuMzQgMS4yOTkgNDkuMDU1IDAgOTQuMjEzLTE2LjU2OCAxMzAuMjc0LTQ0LjgzMi00Ni4xMzItLjk3NS04NC43OTItMzEuMTg4LTk4LjExMi03Mi43NzIgNi40OTguOTc0IDEyLjk5NSAxLjYyNCAxOS44MTggMS42MjQgOS40MjEgMCAxOC44NDMtMS4zIDI3LjYxNC0zLjU3My00OC4wODEtOS43NDctODQuMTQzLTUxLjk4LTg0LjE0My0xMDIuOTg1di0xLjI5OWMxMy45NjkgNy43OTcgMzAuMjE0IDEyLjY3IDQ3LjQzMSAxMy4zMTktMjguMjY0LTE4Ljg0My00Ni43ODEtNTEuMDA1LTQ2Ljc4MS04Ny4zOTEgMC0xOS40OTIgNS4xOTctMzcuMzYgMTQuMjk0LTUyLjk1NCA1MS42NTUgNjMuNjc1IDEyOS4zIDEwNS4yNTggMjE2LjM2NSAxMDkuODA3LTEuNjI0LTcuNzk3LTIuNTk5LTE1LjkxOC0yLjU5OS0yNC4wNCAwLTU3LjgyOCA0Ni43ODItMTA0LjkzNCAxMDQuOTM0LTEwNC45MzQgMzAuMjEzIDAgNTcuNTAyIDEyLjY3IDc2LjY3IDMzLjEzNyAyMy43MTUtNC41NDggNDYuNDU2LTEzLjMyIDY2LjU5OS0yNS4zNC03Ljc5OCAyNC4zNjYtMjQuMzY2IDQ0LjgzMy00Ni4xMzIgNTcuODI3IDIxLjExNy0yLjI3MyA0MS41ODQtOC4xMjIgNjAuNDI2LTE2LjI0My0xNC4yOTIgMjAuNzkxLTMyLjE2MSAzOS4zMDgtNTIuNjI4IDU0LjI1M3oiPjwvcGF0aD48L3N2Zz4=")
}