:root {
  --main: oklab(0.6747 -0.03111 -0.169671);
  --border: #000;
  --background:oklch(0.9346 0.0305 255.11);
}

body, html {
  height: 100%;
  min-height: 625px;
  padding: 0;
  margin: 0;
  position: relative;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
  outline: none;
}

body {
  font-family: "Archivo Black", sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: var(--main);
  background-image: linear-gradient(90deg,#0001 1px,#0000 0),linear-gradient(#0001 1px,#0000 0);
  background-size: 70px 70px;

 user-select: none;
}

h1, h2, h3 {
  text-align: center;
  font-weight:  normal;
}

h1 {
  color: #ec5b56;

  background-color: var(--background);
  border: 2px solid #000;
  border-radius: 5px;
  padding: 9px 32px;
  border-color: #000;
  display: inline-block;
  font-size: 4em;
  
  text-stroke: 1px black; /* for future spec support */
  
  text-shadow: 3px 3px 0px oklch(0 0 0);

  margin-top: 15px;
  font-weight: bold;
  position: relative;
}

h1 svg {
  width: 45px;
  height: 45px;
  position: absolute;
}

h2 {
  color: #fff;
}

h3 {
  margin: 0;
}

h3 img {
  width: 125px;
  padding-top: 12.5px;
  padding-bottom: 12.5px;
  filter: drop-shadow(4px 4px 0px oklch(0 0 0));
}

.content {
  text-align: center;
  top: 50%;
  z-index: 5;
  position: absolute;
  width: 100%;

  transform: translateY(-50%);
}

.clip-container {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 6px;
  bottom: 6px;

  /* clip children to this box */
  overflow: hidden;
  pointer-events: none;
}

.border {
  border: 10px solid white;
  position: absolute;
  top:     0;
  left:    0;
  right:   4px;
  bottom:  4px;
  box-sizing: border-box;
  z-index: 10;
  filter: drop-shadow(4px 4px 0px oklch(0 0 0));
}

.border.border-404 {
  border-style: dashed;
}

nav#menu {
  margin-top: 50px;
  margin-bottom: 50px;
  text-align: center;
  height: 50px;
  width: 100%;
}

nav#menu ul {
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  height: 50px;
}

nav#menu ul li {
  float: left;
  list-style: none;
  margin-right: 30px;

  border: 2px solid black;
  border-radius: 5px;

  background-color: oklch(0.6747 0.1725 259.61);
  box-shadow: oklch(0 0 0) 4px 4px 0px 0px;
  translate: none;
  transition-property: all;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

nav#menu ul li:last-of-type {
  margin-right: 0;
}

nav#menu ul li.active, nav#menu ul li:hover {
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  translate: 4px 4px;
}

nav#menu ul li:hover {
  cursor: pointer;
}

nav#menu ul li a {
  color: black;
  text-decoration: none;
  font-size: 1.3em;
  position: relative;
  display: block;
  padding: 8px 16px 9px;
}

.publickey {
  font-size: 1.15em;
  display: inline-block;
  color: black;
  text-decoration: none;
  padding: 8px 16px 9px;

  border: 2px solid black;
  border-radius: 5px;

  background-color: oklch(0.6747 0.1725 259.61);
  box-shadow: oklch(0 0 0) 4px 4px 0px 0px;

  translate: none;
  transition-property: all;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.publickey:active, .publickey:hover, .publickey:focus {
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  translate: 4px 4px;
}

/*.blog, .email { background-color: #0a88ff !important;  }
.blog:hover, .email:hover { background-color:#006ed6 !important; }

.facebook { background-color: #306199 !important; }
.facebook:hover { background-color:#244872 !important; }

.codefarm { background-color: #F6A316 !important; }
.codefarm:hover { background-color: #e79509 !important; }

.twitter { background-color: #26c4f1 !important; }
.twitter:hover { background-color:#0eaad6 !important;}

.github { background-color: #444 !important; }
.github:hover {background-color:#2b2b2b !important; }*/

 [class^="icon-"]:before, [class*=" icon-"]:before {
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  margin-left: .2em;
  content: ' ';
  background-size: 25px 25px;
}

.icon-twitter{
  background: url(/img/twitter.svg) no-repeat;  
}
.icon-github{
  background: url(/img/github.svg) no-repeat;  
}
.icon-mail{
  background: url(/img/mail.svg) no-repeat;  
}
.icon-blog{
  background: url(/img/blog.svg) no-repeat;  
}
.icon-lock{
  background: url(/img/lock.svg) no-repeat;  
  background-size: 20px 20px;

}

.icon-codefarm{
  background: #F6A316 url(//codefarm.com.br/img/square.png) no-repeat fixed left top;
  background-size: 20px 20px;
}

@media screen and (max-width: 900px) {

  body {
    padding-bottom: 50px;
  }

  nav#menu, nav#menu ul {
    height: auto;
  }

  nav#menu ul {
    display: block;
    max-width: 85%;
  }

  nav#menu ul li {
    float: none;
    display: block;

    margin: 10px auto !important;
  }

}

@media screen and (max-width: 761px) {

  .clip-container svg {
    display: none;
  }

  h3 img {
    width: 75px;
  }

  h1 {
    font-size: 2rem;
  }

  nav#menu {
    margin-top: 30px;
  }
}

@media screen and (max-width: 480px) {

  nav#menu ul li {
    width: 75%;
  }
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal {
  background: var(--background);
  padding: 1.5rem;
  border-radius: 0.5rem;

  width: auto;
  max-width: 590px;

  box-shadow: oklch(0 0 0) 8px 8px 0px 0px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.modal-header h2 {
  margin: 0;
  font-size: 1rem;
  color: black;
  font-weight: bold;
}

.modal-body p {
  font-size: 0.75rem;
  font-weight: thin;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
}

.pgp {
  padding: 2rem 1rem;
  background-color: #fff;
  border: 2px solid black;
  border-radius: 5px;
  overflow: scroll;
  max-height: 300px;

  /* hide scrollbar */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer and Edge */ 
}

.pre-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.copy {
  background-color: var(--main);
  position: absolute;  
  top: 0.5rem;
  right: 0.5rem;
  border: 2px solid black;
  border-radius: 5px;
  cursor: pointer;
  padding: 0.5rem;
}

.copy svg {
  width: 1rem;
  height: 1rem;
}

.animate-enter {
  animation: enter .15s ease;
}

.animate-exit {
  animation: exit .15s ease-out;
}

@keyframes enter {
  0% {
    opacity:0;
    transform:translate3d(0,0,0)scale3d(0.95,0.95,0.95)rotate(0);
  }
}
@keyframes exit {
  to {
    opacity:0;
    transform:translate3d(0,0,0)scale3d(0.95,0.95,0.95)rotate(0);
  }
}