/* Global */

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

html {
  hanging-punctuation: first last;
  background-color: #334155;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(15px, 1.2vw + 12px, 18px);
}

h1{
  font-family: "Poppins";
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.03em;
  font-size: clamp(1.25rem, 4.5vw + 0.45rem, 2rem);
  text-align: center;
}

body {
  min-height: 100svh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 1rem;
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; }
a, button { touch-action: manipulation; }

a:hover { color:l }

@media (prefers-reduced-motion: no-preference) {
  *{ scroll-behavior:smooth; }
}

/* Modifiers */

.rounded{ 
  border-radius: 9999px; 
}

.paragraph{
  text-align: center;
  margin-bottom: 0.75rem;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-wrap: pretty;
}

.orange{
    color: rgb(230, 128, 3);
}

.no-decoration{
  text-decoration: none;
}

.underline{
  border-bottom: 1px solid grey;
}

.icon{ 
  color: white; 
}

.icon:hover{
  transition: filter 0.4s ease;
  filter: brightness(0) saturate(100%) invert(56%) sepia(88%) saturate(2882%) hue-rotate(11deg) brightness(97%) contrast(98%);
}

.location-link:hover{
  color: #939393;
  border-bottom-color: rgba(255,255,255,0.6);
}

.location-link{
    color: white;
    text-decoration: none; 
    border-bottom: 1px solid rgba(255,255,255,0.2);
    transition: border-color 0.3s ease, color 0.3s ease;

}

/* Main */

#wrapper-base,
#wrapper-main-body{
  width: min(100%, 500px);
  padding-inline: 0.5rem;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content: space-around;
  gap: 0.75rem;
  max-width: 500px;
}

#wrapper-photo{
  width: 128px;
  margin-bottom: 10px;
}

#wrapper-about-me{
  width: 100%;
  min-width: 0;
  height: auto;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-inline: 0.25rem;
}

#wrapper-socials{
  margin-top: 0;
  width: auto;
  min-width: 0;
  height: auto;
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

#img-desk-up {
    transition: filter 0.3s ease;
    filter: brightness(0) invert(1);
}

/* #deskup > a{
  color:inherit;
} */

hr {
  border: none;
  border-top: 2px solid #ffffff;
  border-radius: 999999px;
  margin: 1rem 0;
  width: 100%;
  max-width: 600px;
  opacity: 0.6;
}

@media (max-width: 420px) {
  h1{
    letter-spacing: 0.08em;
  }
  #wrapper-photo{ width: 112px; }
}

@media (min-width: 920px) {
  #wrapper-base,
  #wrapper-main-body{
    gap: 1rem;
  }
  .paragraph { margin-bottom: 1rem; }
}