:root{
  /* Colors */
  --base: #FFEBE5;
  --brown: #492C1D;
  --blue: #0b4f6c;
  --blue-variant: rgb(11, 79, 108, 0.3);
}


/* Start: base.html */

body { 
    margin: 0;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    height: 100vh;
}

.main-header {
    background-color: var(--blue);
    height: 100px;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1;

    display: flex;
    justify-content: center;
}

.main-nav {
    height: 80%;
    width: 80%;
    
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
}

.main-nav a{
    color: white;
    text-decoration: none;
    font-size: 22px;
}

.main-nav a:hover { opacity: 50%; }

.main-footer {
    background-color: var(--blue);
    height: 70px;
    width: 100%;
    position: fixed;
    bottom: 0;
    color: white;
    font-size: 18px;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* End: base.html */

/* Start: Standard Fontsize */
/* End: Standard Fontsize */

/* Start: index.html */

.in-wrapper {
  display: flex;
  gap: 80px;
  padding: 10px 10px;
}

.in-sidebar {
  background-color: var(--blue-variant);
  width: 140px;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;

}

.in-sidebar img {
  width: 75px;
  height: 75px;
  border-radius: 25%;
  object-fit: cover;
  display: block;
}

.in-intro {
  flex: 1;
}

.in-about {
  width: calc(100% - 340px);
  padding-left: 20%;
  box-sizing: border-box;
}

.in-top-row {

  display: flex;
  gap: 40px;
}

.in-profile {
 
  flex: 1;
  margin: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.in-profile img {
  width: 60%;
  height: auto;
  display: block;
}

.in-contact {
  background-color: #0b4f6c;
  width: 300px;
  flex-shrink: 0;
  text-align: center;
  color: white;
  
}

.in-contact h2 {
  text-align: center;
  margin-bottom: 1rem;
  align-items: center;
 
}

/* End: index.html */

/*Start: project.html */

.pr-page {
  max-width: 850px;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
}

.pr-page h1 {
  margin: 0 0 3rem;
  font-size: 3rem;
  font-weight: 400;
  text-align: center;
} 

.pr-top {
  display: flex;
  justify-content: space-between;   /* luft mellan bild och infobox */
  align-items: stretch;           
  gap: 2rem;
  margin-bottom: 3rem;
}
.project-image {
  flex: 0 0 52%;                   
  margin: 0;
  display: flex;
  flex-direction: column;
}

.project-image img {
  width: 90%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;                /* fyller rutan utan att förvrängas */
  background: #d9d9d9;
  display: block;
}
.project-info {
  flex: 0 0 26%;
  padding: 1.5rem;
}

.project-info h2 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  font-weight: 400;
}

.project-info p {
  margin: 0 0 0.9rem;
  font-size: 1rem;
}

.project-info a {
  color: inherit;
}
.project-description {
  margin: 0 0 2rem;
  font-size: 1rem;
  line-height: 1.5;
}
/* End: project.html */

/*Start:list*/

.li-page { 
  max-width: 880px; 
  margin: 0 auto; 
  padding: 40px 20px; 
}
.li-head { 
  text-align: center; 
  margin-bottom: 24px; 
}
.li-head h1 { 
  margin: 0; 
}

/* Controls row: search + filter left, sorting right. */
.li-controls { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: 24px; 
}
.li-controls-left, .li-sort { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
}
.li-sort { 
  gap: 8px; 
  white-space: nowrap; }

/* Search, filter summary and sort selects share the same border. */
.search-form input, .li-filter summary, .li-sort select { 
  padding: 6px 10px; 
  border: 1px solid #ccc; 
  border-radius: 4px; 
  background: #fff; }
.search-form { 
  position: relative; 
  display: inline-flex; 
}
.search-form input { 
  width: 160px; 
  padding-right: 28px; 
}
.search-form button { 
  position: absolute; 
  right: 8px; 
  top: 50%; 
  transform: translateY(-50%); 
  background: none; 
  border: 0; 
  cursor: pointer; }

/* Technique dropdown. */
.li-filter { 
  position: relative; 
}
.li-filter summary { 
  cursor: pointer; 
  user-select: none; 
}
.tech-options { 
  position: absolute; 
  top: calc(100% + 4px); 
  left: 0; 
  z-index: 10; 
  display: flex; 
  flex-direction: column; 
  gap: 6px; 
  padding: 8px 12px; 
  background: #fff; border: 1px solid #ccc; 
  border-radius: 4px;  
  white-space: nowrap; 
}
.tech-options label { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  cursor: pointer; }

/* Project box. */
.li-box { 
  display: flex; 
  gap: 40px; 
  padding: 30px 40px; 
  margin-bottom: 24px; 
  background: var(--blue-variant, #e3e3e3); 
  color: inherit; 
  text-decoration: none; 
}
.li-box:hover { 
  background: rgba(11, 79, 108, .6); 
}
.li-image { 
  flex: 0 0 135px; 
  height: 135px; margin: 0; 
}
.li-image img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; }
.li-text h2 { 
  margin: 0 0 16px; 
}
.li-text p {
   margin: 0; }
.li-empty { 
  text-align: center; }

/* End: list (projects) */

/* Start: techniques.html */

.tech-layout {
    height: calc(100vh - 170px);
    max-width: 887px;
    margin: 50px auto;

    display: flex;
    gap: 2%;
}

.filter { 
    background-color: var(--blue-variant);
    height: fit-content;
    padding: 0 5% 22.41px 5%;
    font-size: 18px;
    
    display: flex; 
    flex-direction: column;
    gap: 10px;
}

.filer-row-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.filter-row { cursor: pointer; }

.tech-results {
    font-size: 18px;
    flex-grow: 1;

    display: flex; 
    flex-direction: column;
    gap: 41px;
}

.tech-box {
    background-color: var(--blue-variant);
    padding: 10px 5%;
    text-decoration: none;
    color: black;

    display: flex; 
    justify-content: space-between;
    align-items: center;
}

.tech-box:hover { opacity: 50%; }

.tech-box h3 {
    font-size: 28px;
}


/* End: techniques.html */


/* Start: error.html */

.error-container {
    width: 100%;
    margin-top: 30vh;
    text-align: center;
    font-size: 18px;
}

.error-title { font-size: 36px; }

/* End: error.html */