/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
HTML content. To learn how to do something, just try searching Google for questions like
"how to change link color." */

/*Färgschema:
Thistle
#4B2F66 (mörklila)
#085ECF (klarblå)
#A70E10 (vinröd)
*/

* {
box-sizing: border-box;
}


/*länkar, text*/
a {color:#A70E10;
}

a:hover {
color: #085ECF;
}

p {
padding:5px 10px 5px 10px;
font-size:medium;
}
  
.bla {color:#085ECF;}
.vit {color:white;}


/*borders*/
.allt{
  border-style: solid;
border-width: 1px;
border-color: white;
border-radius: 5px;
  }

header, ul.topnav, .kant {
border-style: double;
border-width: 3px;
border-color: white;
border-radius: 5px;
}

/*alla sidor*/
body {background-color: Thistle;
color: #4B2F66;
font-family: Georgia;}

.allt {
width: 1000px;
margin-left: auto;
margin-right: auto;
}

@media screen and (max-width:1000px) {
.allt {
width:100%;
}}

header {
background-image: url("/foto/banner.png");
background-repeat: no-repeat;
background-position: center center;
padding: 10px;
text-align: center;
font-size: large;
color: thistle;
}

header a {
  color:thistle;}
header a:hover {
  color:#A70E10}

/*topnav*/
ul.topnav {
display: flex;
list-style-type: none;
list-style-position: inside;
margin: 0;
padding: 0;
text-align:center;
justify-content: center;

}

/* Style links in topnav */
ul.topnav li a {
display: block;
color: #A70E10;
padding: 20px 10px 20px 10px;
text-decoration: none;
text-align:center;
}

/* Change color on hover */
ul.topnav li a:hover {
color: #085ECF;
}

/*alla gridcontainers*/
.grid {
display: grid;
justify-content:center;}


/*INDEX*/
.index-container {
display: grid;
justify-content:center;
gap: 8px;
grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-areas: 
'bild bild bild bild text text'
'bild bild bild bild video video'
'track track track track video video'
'datum datum datum datum datum datum';
}

.bild {grid-area: bild;}
.text {grid-area: text;}
.track {grid-area: track;}
.datum {grid-area: datum;}
.video {grid-area: video;}

@media screen and (max-width:600px)  {
.bild {grid-area: 1/span 6;}
.track {grid-area: 2/span 6;}
.text {grid-area: 3/span 6;}
.datum {grid-area: 4/span 6;}
.video {grid-area: 5/span 6;}
}

/*PROJEKT*/
/*projektsidans grid*/
.projekt-container {
display: grid;
justify-content:center;
padding: 30px;
gap: 20px;
grid-template-columns:1fr 1fr 1fr 1fr 1fr;
}

.linebreak {grid-column: 1 / span 5;}

@media screen and (max-width:600px) and (min-width:0px) {
.projekt-container {grid-template-columns:1fr 1fr;}
.linebreak {grid-column: 1 / span 2;}
}

@media screen and (max-width:850px) and (min-width:600px) {
.projekt-container {grid-template-columns:1fr 1fr 1fr;}
.linebreak {grid-column: 1 / span 3;}
}

/*fadea när man hovrar*/
.projekt-container div {
position:relative;
}
.projekt-container div img:hover {opacity:0.5;
}

/*text på bild*/
.projekt-container .bildtext {
position:absolute;
left: 0; 
right: 0;
bottom: 15%;
margin-inline: auto; 
width: fit-content;
font-size:100%;}

/*PROJEKT UNDERSIDOR*/
.bild-container {position: relative; display: inline-block;}

.text-box {
position:absolute;
text-align:center;
bottom:-15px;
left: 50%;
  transform: translate(-50%, -50%)}

.text-box:before {
   content: '';
   display: inline-block;
   height: 100%;
   vertical-align: middle;}
   
.projekt-rubrik {display: inline-block;
   font-size: 50px;
   color: #085ECF;
   text-shadow: 2px 2px #A70E10;}
   
.bild-rubrik {display: block;
max-width:100%;
height:auto;}

.galleri-grid {
display:grid;
justify-content:space-between;
grid-template-columns:1fr 1fr 1fr;
column-gap:10px;
row-gap:5px;
}

.galleri-linebreak {
  grid-column:1 / span 3;}
  
.galleri-tva {
  grid-column:2 / span 2;}

@media screen and (max-width:600px) {
.galleri-grid{
grid-template-columns:1fr;
}
.galleri-linebreak {
  grid-column:1 / span 1;}

.galleri-tva {
  grid-column:1 / span 1;}}

.galleri-grid div {
  justify-self:center;
  align-self:center;}

/*projektsidans sidor*/
.sida-container {
gap: 8px;
grid-template-columns:1fr 1fr 1fr ;
}
.album {grid-column: 1 / span 3;}

.projekttext {
  padding: 100px 20px 20px 20px;
  text-align: center;
  color:white;
}

@media screen and (min-width:700px){
.sida-container {grid-template-columns:1fr 1fr 1fr ;}
.album {grid-column: 1 / span 3;
grid-row: 1/span 2;}
}

/* kroppen*/
div.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 0;
}

.main {
display: flex;
margin: 0 7px;
}

/* Use media query and show the flex items vertically if screen width is less than 600px */
@media screen and (max-width:600px) {
div.flex-container {
flex-direction: column;
}

}

table, th, td {
border: 2px dotted;
border-color: white;
border-collapse: collapse;
}
td {
padding: 2px;
vertical-align: top;}