/* ******************INDSTILLINGER For opgave 1-20*************** */
/* ***************Det er herunder du skal rette:***************** */

/*-------------------------------boks 1--------------------------------*/

.box1 .content {
  color: white;
  font-family: Arial, sans-serif;
  font-size: 1.6rem;
  text-shadow: magenta 5px 5px 10px;
}

/*-------------------------------boks 2--------------------------------*/

.box2 .content {
  font-family: "Open Sans", sans-serif;
  font-size: 1.4rem;
  font-weight: lighter;
}

/*-------------------------------boks 3--------------------------------*/

.box3 .content {
  font-size: 1.3rem;
  color: green;
  text-shadow: rgb(179, 255, 1) 2px 2px 2px;
  text-indent: 20px;
  font-family: Georgia, "Times New Roman", Times, serif;
}
.box3 .content p::first-letter {
  color: rgb(88, 111, 224);
  font-size: 3rem;
}

/*-------------------------------boks 4--------------------------------*/

.box4 .content {
  text-transform: uppercase;
  color: red;
  font-size: 1.3rem;
}

/*-------------------------------boks 5--------------------------------*/

@font-face {
  /*Her har jeg skrevet @font-face koden for dig - i den næste opgave skal du selv skrive den*/
  font-family: minFont;
  src: url("elriolobo/elriott2-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

.box5 .content {
  font-family: minFont, sans-serif;
  font-size: 4rem;
  color: orange;
  font-weight: normal;
}

/*-------------------------------boks 6--------------------------------*/

@font-face {
  font-family: Russiano;
  src: url(russiano/russiano-webfont.woff) format("woff");
  font-weight: normal;
  font-style: normal;
}

.box6 .content {
  font-family: Russiano, sans-serif;
  font-size: 3rem;
  color: rgb(184, 39, 39);
}

/*-------------------------------boks 7--------------------------------*/
.krona-one-regular {
  font-family: "Krona One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.box7 .content {
  font-family: Krona One, sans-serif;
  font-size: 2.6rem;
  color: rgb(74, 131, 206);
}

/*-------------------------------boks 8--------------------------------*/
.pacifico-regular {
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-style: normal;
}

.box8 .content {
  font-family: Pacifico, monospace;
  font-size: 3.8rem;
  color: rgb(174, 0, 255);
}

/*-------------------------------boks 9--------------------------------*/

.box9 .content {
  background-color: rgb(213, 240, 159);
  font-size: 1.15rem;
  line-height: 1.5rem;
}

/*-------------------------------boks 10--------------------------------*/

.box10 .content {
  background-color: rgb(222, 253, 255);
  letter-spacing: 0.1rem;
  font-size: 1.18rem;
}

/*-------------------------------boks 11--------------------------------*/

.box11 .content a {
  color: red;
  text-decoration: none;
  font-weight: bold;
}

/*-------------------------------boks 12--------------------------------*/

.box12 .content {
  background-image: url(bg_images/himmel.jpeg);
  background-size: cover;
  font-size: 2rem;
  font-weight: bolder;
  color: rgb(198, 34, 34);
}

/*-------------------------------boks 13--------------------------------*/

.box13 .content {
  background-image: url(bg_images/himmel.jpeg);
  background-size: cover;
  background-clip: text;
  font-size: 4rem;
  color: transparent;
  font-weight: bolder;
}

/*-------------------------------boks 14--------------------------------*/

.box14 .content {
  background-image: linear-gradient(magenta, rgb(249, 190, 118), red);
  font-style: italic;
  font-size: 1.8rem;
  text-align: right;
  color: white;
}

/*-------------------------------boks 15--------------------------------*/

.box15 .content {
  background-image: url(bg_images/blomst.png),
    linear-gradient(to right, #feac5e, #c779d0, #4bc0c8);
  background-repeat: no-repeat;
  background-size: 25%, cover;
  background-position: bottom right;
  color: white;
  font-size: 1.3rem;
}

/*-------------------------------boks 16--------------------------------*/

.box16 .content {
  background-image: repeating-radial-gradient(
    circle at 0 0,
    black,
    maroon 15px,
    pink 30px,
    white 45px
  );
}

/*-------------------------------boks 17--------------------------------*/

.box17 .content {
  display: flex;
  justify-content: space-around;
  background-image: url(bg_images/himmel.jpeg);
  background-size: cover;
}

.box17 .content .kvadrat1 {
  width: 100px;
  height: 100px;
  border: 1px dashed magenta;
  background-color: rgb(255, 213, 0);
  background-image: url(bg_images/blomst.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.box17 .content .kvadrat2 {
  width: 100px;
  height: 100px;
  border: 1px dashed magenta;
  background-color: rgba(255, 213, 0, 0.498);
  background-image: url(bg_images/blomst.png);
  background-repeat: no-repeat;
  background-size: cover;
}

/*-------------------------------boks 18--------------------------------*/

.box18 .content {
  display: flex;
  justify-content: center;
  background-image: url(bg_images/blue.jpeg);
  background-size: cover;
}

.box18 .content .kvadrat {
  width: 100px;
  height: 100px;
  justify-content: space-around;
  background-image: url(bg_images/blomst.png);
  background-size: cover;
  filter: sepia();
}

/*-------------------------------boks 19--------------------------------*/

.box19 .content {
  background-image: url(bg_images/pink.jpg);
  background-clip: text;
  color: transparent;
  font-family: monospace;
  font-size: 2rem;
  font-weight: bolder;
  font-style: italic;
}

/*-------------------------------boks 20--------------------------------*/

.box20 .content {
  display: flex;
  justify-content: space-evenly;
  background-image: linear-gradient(
    pink,
    rgb(229, 207, 244),
    rgb(157, 157, 249)
  );
}

.box20 .content .kvadrat1 {
  width: 75px;
  height: 100px;
  border: 3px dashed rgb(85, 196, 247);
  background-image: url(bg_images/nivin.jpg);
  background-size: cover;
}

.box20 .content .kvadrat2 {
  width: 75px;
  height: 100px;
  border: 3px dashed rgb(0, 255, 85);
  background-image: url(bg_images/lun.jpg);
  background-size: cover;
}

.box20 .content .kvadrat3 {
  width: 75px;
  height: 100px;
  border: 3px dashed rgb(255, 114, 194);
  background-image: url(bg_images/tilde\ 2.jpg);
  background-size: cover;
}