/* Styles for alex-postelnicu.com */


:root {
    --color-fg:rgb(0,0,0);
    --color-bg:rgb(240,240,240);
}

html {
  font-family:"Roboto", sans-serif, system-ui;
  font-size:1em;
  height:100%;
  line-height:1.3em;
  margin:0 auto;
  overflow-y:scroll;
  /* smooth scrolling */
  -webkit-overflow-scrolling:touch;
  /* remove highlight when clicking link */
  -webkit-tap-highlight-color:transparent;
}

body {
    cursor:text;
    text-align: left; /* Align all text */
    font-weight: 400;
    line-height: 1.5; /* Optimal line height for reading */
    letter-spacing: 0.02em; /* Slightly loose kerning for clarity */
    margin: 0;
    padding: 0;
    color: var(--color-fg); 
    background-color: var(--color-bg); 
}

/* Main content */
main {
    max-width: 800px; 
    margin: 0 auto; 
    padding: 20px; 
    min-height: 100vh; /* Ensures full viewport height */
    display: grid;
    grid-template-rows: auto auto auto 1fr auto; /* Explicitly defines rows for each section */
}

/* Section styling */
#name, #process {
    margin: 0 0 3.5em 0;
}

#domains, #subdomains {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

#links {
    margin: 3.5em 0 0 0;
    align-self: end; /* footer */
}


h1 {
    font-size: 1.25em; /* Slightly larger font size for headers */
    letter-spacing: 0.03em; /* Slightly more kerning for titles */
    margin: 0; /* Remove all margins */
}

p {
    margin: 0 0 1em 0;
}

ul {
    list-style-type: none;
    padding: 0;
    display: flex; 
    gap: 3vw;
    justify-content: center;
}

li {
    margin: 0; 
}

ul li a {
    text-decoration: none;
}

a {
    text-decoration: underline; 
    color: black;
}

a:hover {
    color: rgb(0 95 220); 
}

::selection {
  color: rgb(0,0,0);
  background-color: rgb(220,220,220);
}

.image-popup {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, -98%);
    width: calc(100% - 40px);
    max-width: 500px;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
}

.fade-in {
    opacity: 1 !important;
}

.fade-out {
    opacity: 0 !important;
    transition: opacity 1s ease-in-out;
}