/* === General === */

body{
  background-color: #ffffff;
  color: #000000;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  /*font-size: 1.6em;*/
  font-weight: 300;
  padding: 1rem 5px;
}

.img_blog {
  width:100%;
  min-width:220px;
  max-width:481px;
}

pre, code {
  padding: 0;
}

a {
  color: black;
  text-decoration: none;
}
/* === Wrapper === */

#wrapper {
  border-radius: 8px;
  margin: 1rem auto 3rem auto;
  width: 100%;
}

#wrapper main section {
  padding: 5em 3em 3em 3em ;
}

@media screen and (min-width: 480px) {
  #wrapper {
    width: 95%;
  }
  #wrapper > .main {
    padding: 3em 3em 1em 3em ;
  }
}
@media screen and (min-width: 736px) {
  #wrapper {
    width: 80%;
  }
}
@media screen and (min-width: 980px) {
  #wrapper {
    width: 75%;
  }
}

/* === Header === */

#wrapper #header {
  text-align: center;
}

#header > header > a {
  border-bottom: none;
}


/* === Topnav === */

#nav > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}

#nav > ul li {
  line-height: 5.6rem;
  padding: 0;
}

#nav > ul li a {
  border: 0;
  display: block;
  font-size: 0.9em;
  padding: 0 2em;
  text-decoration: none;
  text-indent: 0.125em;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  color: black;
}

#nav > ul li a:hover {
  background: rgba(207, 201, 214, 0.035);
}
#nav > ul li a:visited {
  background: rgba(207, 201, 214, 0.035);
  color: black;
}

/* Toggle menu */
#menutoggle, .labeltoggle {
  display: none;
}

@media screen and (max-width: 480px) {
  #nav > ul {
    flex-direction: column;
    opacity: 0;
    height: 1px;
  }
  .labeltoggle {
    display: block;
  }
  #nav #menutoggle:checked ~ ul {
    height: 100%;
    opacity: 1;
    height: auto;
  }
  #nav > ul li {
    line-height: initial;
  }
}

/* === Main === */
main {
}

.content {
  display: flex;
  flex-direction: column;
}

.content > footer {
  align-self: center;
  border-top: 1px solid rgba(152, 146, 158, .5);
  border-bottom: 1px solid rgba(152, 146, 158, .5);
  display: inline-block;
  padding: 1rem;
}

/* === Footer === */
footer {
  border-top: 1px inset rgba(152, 146, 158, .5);
  text-align: center;
}

/* ~ Copyright ~ */
#copyright {
  margin-bottom: 6em;
  text-align: center;
}

/* ~ Footer icons ~ */

.icon {
  display: inline-block;
  font-family: "FontAwesome";
}

footer .icons_container {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 2em 0;
}

ul.icons li {
  display: inline-block;
  padding: 0 1.25em 0 0;
}

ul.icons li:last-child {
  padding-right: 0 !important;
}

ul.icons li > .icon {
  border-radius: 100%;
  border: solid 1px #4c4b4d;
  height: 3em;
  letter-spacing: 0;
  line-height: 3em;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
  width: 3em;
}
ul.icons li .icon:before {
  font-size: 1em;
  color: inherit;
}
ul.icons li .icon:visited {
  color: inherit;
}
ul.icons li .icon:hover {
  background: rgba(207, 201, 214, 0.035);
  color: inherit;
}
.icon > .label {
  display: none;
}
ul.icons_content li {
  display: inline-block;
  padding: 0 1.25em 0 0;
}

ul.icons_content li:last-child {
  padding-right: 0 !important;
}

ul.icons_content li > .icon {
  height: 3em;
  letter-spacing: 0;
  line-height: 3em;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
  width: 3em;
}
ul.icons_content li .icon:before {
  font-size: 1em;
  color: inherit;
}
ul.icons_content li .icon:visited {
  color: inherit;
}
ul.icons_content li .icon:hover {
  background: rgba(207, 201, 214, 0.035);
}

/* === Misc === */
.success {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
  font-size: 1.5em;
  padding: .5rem;
}

/* notes */
.notes {
  display: flex;
  justify-content: space-evenly;
  gap: 10px;
  /* align-items: center; */
  flex-flow: row wrap;
}

.note, .notenohover {
  --b: 3px;   /* border thickness */
  --s: .45em; /* size of the corner */
  --color: #373B44;
  
  padding: calc(.5em + var(--s)) calc(.9em + var(--s));
  color: var(--color);
  font-size: 1.5rem;
  font-weight: bold;
  --_p: var(--s);
  background:
    conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--color) 0)
    var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
  transition: .3s linear, color 0s, background-color 0s;
  outline: var(--b) solid #0000;
  outline-offset: .6em;

  border: 0;

  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.note:hover,
.note:focus-visible{
  --_p: 0px;
  outline-color: var(--color);
  outline-offset: .05em;
}

/* CSS */
.button-40 {
  background-color: #d0d0d0;
  border: 1px solid transparent;
  border-radius: .75rem;
  box-sizing: border-box;
  color: #000000;
  font-size: 1rem;
  line-height: 1.2rem;
  padding: .75rem 1.2rem;
  text-align: center;
  text-decoration: none #6B7280 solid;
  text-decoration-thickness: auto;
  transition-duration: .2s;
  transition-property: background-color,border-color,color,fill,stroke;
  transition-timing-function: cubic-bezier(.4, 0, 0.2, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: auto;
}

/* .button-40:hover {
  background-color: #ffffff;
}

.button-40:focus {
  box-shadow: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
} */

@media (min-width: 768px) {
  .button-40 {
    padding: .75rem 1.5rem;
  }
}