.index-theme{  /*  Background bilden  */
  background-image: url("Bilder/Done-pics/Red-background.jpg");
  background-size: cover;      
  background-position: center; 
  background-attachment: fixed;
  
}   

.index-theme h1{ /*  Rubriken  */
  font-size: 50px;
  text-align: center;
  display: block;
}


.index-theme h1 a{ /* länken i punkten som gömmer sig*/
  color: rgb(0, 0, 0);
  text-decoration: none;
}



.index-theme h1:hover{ /*  När man ligger musen över Rubriken  */ 
  color: aliceblue;
  background-color: black;
}

.index-theme h1:hover .red-a { 
  color: red;
}

.index-theme h1:hover .blue-b {
  color: rgb(35, 57, 227);
}

.index-theme h1:hover .purple-t {
  color: rgb(202, 13, 249);
}

.index-theme h1:hover .green-m {
  color: rgba(34, 114, 20, 0.827);
}


.index-theme h1:hover a{ /*  När man ligger musen över Rubriken då ändras punkten och blir röd */
  color: rgb(255, 0, 0);
  background-color: black;
}


.A-theme .set-holder{
  min-width: none;
  max-width: 800px;
  display: flex;
  flex-direction: row;
  align-self: center;
  justify-content: center;

  gap: 10px;
}
.A-theme .c-set-holder{
  display: flex;
  flex-direction: row;
  align-self: center;
  justify-content: center;
  gap: 10px;
}

.A-set-of-three{
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-self: flex-start;
}


.aboutme-theme div{
  display: flex;
  min-width: none;
  max-width: 1000px;
  justify-content: center;
  flex-direction: column;
  align-self: center;
}

.aboutme-theme{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}


.aboutme-theme h2{
  color: aliceblue;
}

.aboutme-theme .Twelve a{
  color: rgb(236, 5, 5);
  text-decoration: none;

}

.aboutme-theme .Neocites a{
  color: aqua;
  text-decoration: none;
}

.aboutme-theme .Neocites:hover a{
  color: rgb(241, 239, 239);
  text-decoration: none;
  background-color: black;
}



.aboutme-theme .Twelve:hover a{
  color: rgb(241, 239, 239);
  text-decoration: none;
  background-color: black;
}



.aboutme-theme{
  background-image: url(Bilder/Done-pics/grey-background.png);
  background-size: cover;      
  background-position: center; 
  background-attachment: fixed;
}

.aboutme-theme h1{
  color: rgb(255, 255, 255);
}

.aboutme-theme .a-bit-too-much:hover{ /* När man ligger musen över "a bit too much...*/
  background-color: black;
  font-size: 40px;
}

.aboutme-theme .a-bit-too-much:hover .red-a {
  color: red;
}

.aboutme-theme .a-bit-too-much:hover .blue-b {
  color: rgb(35, 57, 227);
}

.aboutme-theme .a-bit-too-much:hover .purple-t {
  color: rgb(202, 13, 249);
}

.aboutme-theme .a-bit-too-much:hover .green-m {
  color: rgba(34, 114, 20, 0.827);
}


.aboutme-theme p{
  color: rgb(255, 255, 255);
  font-size: 20px;
}

.A-theme{  
    background-image:url(Bilder/Done-pics/Red-background.jpg);
    background-size: cover;      
    background-position: center; 
    background-attachment: fixed;

}
.B-theme{  
    background-image:url(Bilder/Done-pics/blue-background.png);
    background-size: cover;      
    background-position: center; 
    background-attachment: fixed;


}


.B-theme h1{
  color: aliceblue;
  
}

.book-entry p{
  color: rgb(0, 0, 0);
}

.book-entry{
  min-width: none;
  max-width: 1000px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  background-color: rgb(255, 255, 255);
  border: 8px solid rgb(89, 153, 202);

}
.book-entry div{
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  gap: 20px;
  
}
.book-entry div span{
  color: rgb(0, 0, 0);
}

.T-theme{  
    background-image:url(Bilder/Done-pics/purpul-background.png);
     background-size: cover;      
    background-position: center; 
    background-attachment: fixed;

}
.M-theme{  
    background-image:url(Bilder/Done-pics/green-background.png);
    background-size: cover;      
    background-position: center; 
    background-attachment: fixed;

}



.A-B { /* Position för A och B */
  display: flex;
  flex-direction: row;
  align-self: center;
  justify-content: center;  
}

.T-M { /* Position för T och M */
  display: flex;
  flex-direction: row;
  align-self: center;
  justify-content: center;
}

.A-B a, /* Gör mellan-rum mellan bokstaverna på höger och vänster sidan*/ 
.T-M a {
  margin: 0 20px; 
  display: inline-block; 
}

/*Bilderna har olika storlekar och behöver skalas på olika värder*/
.A-img-link img{
  width: 250px;
  height: auto;
}

.B-img-link img{
  width: 200px;
  height: auto;
}
.T-img-link img{
  width: 200px;
  height: auto;
}
.M-img-link img{
  width: 300px;
  height: auto;
}

/* skapar effecten att boktaven byter färg när man ligger musen över bilden ( Den byter bilden till en annan färgad bild ) */ 
.A-img-link img:hover {
  content: url("Bilder/Done-pics/A-ovo-Red.png");
}

.B-img-link img:hover {
  content: url("Bilder/Done-pics/B-ovo-Blue.png");
}

.T-img-link img:hover {
  content: url("Bilder/Done-pics/T-ovo-purple.png");
}

.M-img-link img:hover {
  content: url("Bilder/Done-pics/M-ovo-green.png");
}