html{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  font-family: "Rokkitt", serif;
  font-size: 1.2em;
  line-height: 1.6;
  background-image: linear-gradient(to bottom, rgb(243, 97, 192), rgb(240, 240, 79));
  color: rgb(87, 8, 67);
}

/* Container */
.container{
  max-width: 80rem;
  margin: 0 auto;
  padding: 1rem;
}

/* Headings */
h1, h2, h3, h4{
  font-weight: 700;
  color: rgb(245, 6, 189);
}

/* Header */
header{
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  background-color: rgb(242, 160, 242); 
  width: 100%;
  
}

header h1{
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 -2px 8px rgb(255, 0, 0);
  color: rgb(255, 166, 65);
  margin: 0.5rem 0 1rem;
}

/* Nav*/
.topnav{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-bottom: 1rem;
}

.topnav a{
  text-decoration: none;
  padding: .5rem .8rem;
  border-radius: .6rem;
  background: rgba(255,255,255,.35);
  color: rgb(87, 8, 67);
  font-weight: 700;
}

.topnav a:hover,
.topnav a:focus{
  background: rgba(255,255,255,.6);
}

/* Linkar a */
a{
  color: rgb(246, 81, 244);
}

a:visited{
  color: rgb(221, 45, 1);
}

a:hover,
a:active{
  color: #000;
  text-decoration: none;
}

/* IMG */
img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* Efst til vinstri */
.vinstri{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 1rem 0;
}


/* Ferill texti aðal síða*/
.ferill{
  padding: .5rem 0;
}

/* aside  */
.side{
  display: grid;
  gap: 1rem;
}

/* flekar*/
.flekar{
  background: linear-gradient(to bottom, rgb(242, 153, 224), rgb(247, 237, 96));
  color: rgb(87, 8, 67);
  padding: 1rem;
  border-radius: 1rem;
  margin: 1rem 0;
}

/* IMG */
.portrait{
  margin: 0;
  text-align: center;
}

.portrait img{
   width: 100%;
  height: 340px;        
  object-fit: cover;    
  object-position: top; 
  border-radius: .8rem;
  display: block;
}
.portrait figcaption{
  margin-top: .5rem;
  font-size: .9em;
  color: rgb(87, 8, 67);

}
/* Um  Zara fleki */
.facts{
  margin: 1rem 0 0;
  padding-left: 1.2rem;
}

.facts li{
  margin: .3rem 0;
}


/* Audio */
audio{
  width: 100%;
  row-gap: 1rem;
}

/* Footer */
.col-3{
  display: grid;
  grid-template-columns: 1fr;
 
  
}
footer{
  padding: 1em;
  background-color: rgb(243, 248, 165);
    color: rgb(246, 81, 244);
}

footer ul{
  list-style: none;
  padding-left: 0;
    
}

.copy{
  text-align: center;
}

/* sími */
@media (min-width: 600px){ 
  .col-3{
    grid-template-columns: 1fr 1fr;
  }

  header h1{
    font-size: 5rem;
    line-height: 1.1;
  }
}

/* iPad */
@media (min-width: 768px){ 
  header h1{
    font-size: 7rem;
  }

  .col-3{
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
  }

  .vinstri{
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem;
    align-items: start;
  }
}

/* tölvur */
@media (min-width: 960px){ 
  header h1{
    font-size: 10rem;
    }
    .col-3{
      gap: 2rem;
    }
    .vinstri{
      grid-template-columns: 3fr 1fr;
      gap: 3rem;
    }
}