/* intelligent.css */
/* Grundinställningar */
html, body { height:100%; margin:0; }
body {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  font-family:'Acme',sans-serif;
  text-align:center;
  padding:1rem;
  transition:background-color .5s,color .5s;
  position:relative;
}
.content {
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:100%;
}
#author-img {
  width:200px;
  height:200px;
  object-fit:cover;
  border-radius:50%;
  margin-bottom:0.5rem;
  display:none;
  filter:grayscale(100%);
}
/* Citattext: responsiv storlek mellan 2rem och 5rem */
#quote {
  font-size: clamp(2rem, 6vw, 4rem);
  line-height:1.4;
  max-width:80%;
  cursor:pointer;
  transition: font-size .3s;
}
/* Författare: responsiv storlek mellan 1.2rem och 2.4rem */
#author {
  font-size: clamp(1.2rem, 4vw, 2.4rem);
  margin:0.5rem 0;
  opacity:.8;
  font-style:italic;
}
/* Knapptext: responsiv mellan 0.9rem och 1.2rem */
#new-quote {
  margin-top:1rem;
  padding:.75rem 1.5rem;
  font-size: clamp(0.9rem, 2.5vw, 1.2rem);
  border:none;
  border-radius:2rem;
  cursor:pointer;
  transition:background-color .5s,color .5s, font-size .3s;
}
#new-quote:hover { opacity:.9; }
/* Footer: responsiv mellan 0.8rem och 1rem */
#footer {
  position:fixed;
  bottom:0;
  width:100%;
  text-align:center;
  font-size: clamp(0.8rem, 2vw, 1rem);
  opacity:.8;
  padding:.5rem 0;
  background:transparent;
}
#author a { color:inherit; text-decoration:none; }
#share-bubble {
  position:absolute;
  display:none;
  left:50%;
  transform:translateX(-50%);
  background:#fff;
  border:1px solid #ccc;
  border-radius:.5rem;
  padding:.5rem 1rem;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
  white-space:nowrap;
  z-index:10;
}
#share-bubble::before {
  content:'';
  position:absolute;
  bottom:-10px;
  left:50%;
  transform:translateX(-50%);
  border-width:10px 10px 0 10px;
  border-style:solid;
  border-color:#fff transparent transparent transparent;
}
.share-icon { font-size:24px; vertical-align:middle; margin:0 .5rem; cursor:pointer; color:inherit; }
/* Anpassa padding på små enheter */
@media (max-width: 600px) { body { padding:0.5rem; } }