/* 
1. Block-text
2. Inline-text
3. Lankar
4. Img-element
5. List-element
6. Table-element
7. Formular-element
8. Divar
9. Till galleriet
10. iframe
11. Ovriga element 
12. Enkla klasser */


/* @import"style_uppg2.css"; */
/* @import"style_uppg2_mediaq.css"; */


/* --1. BLOCK-TEXT-ELEMENT-- */

main h1 {
    /* background-color:gray; */
    color: black;
    text-align: center;
    margin: 1rem auto 1.5rem auto;
    font-size: 2rem;
    font-family: serif;
    font-weight: bold;
    font-variant-caps: small-caps;
    text-decoration-line: underline;
    text-decoration-style: solid;
}

main h2 {
    /* background-color:gray; */
    color: black;
    text-align: center;
    margin: 1.5em auto 0.5em auto;
    font-size: 1.5rem;
    font-family: serif;
    font-weight: bold;
}

main p {
    /* background-color: lawngreen; */
    text-align: left;
    /* font-family: serif; */
    font-family: Calibri;
    font-size: 1rem;
    margin: 0;
}

p.undertext {
    /* background-color:lightcoral; */
    margin: 0;
    padding: 0.2em 1em;
    font-style: italic;
}

p.text_flexible_width {
    /* background-color: olive; */
    box-sizing: border-box;
    display: block;
    padding: 0 0.5em;
}

main blockquote {
    background-color: darkgray;
    color: black;
    text-align: justify;
    font-family: monospace;
    font-size: 1.2rem;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: bold;
    line-height: 1.5em;
    /* quotes: "\201C""\201D""\2018""\2019"; */
    quotes: "“""”""‘""’";
    /* box-sizing: border-box; */
    margin: 0 15px;
    padding: 0.5em 10px;
    border-left: 10px solid gray;
}

/*  texten under blockquote */
div.text_container blockquote+p {
    /* background-color:black; */
    /* box-sizing: border-box; */
    margin: 0 15px;
    padding: 0 10px 5px 25px;
    /* border-left: 10px solid gray; */
}

/* stora citationstecknet */
blockquote:before {
    color: white;
    content: open-quote;
    font-size: 3rem;
    line-height: 0.1em;
    margin-right: 0.1em;
    vertical-align: -0.4em;
}





/* --2. INLINE-TEXT-ELEMENT-- */

main mark {
    background-color: palegoldenrod;
    padding-left: 2px;
    padding-right: 2px;
}

main strong {
    /* background-color:white; */
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
}

main q {
    font-style: italic;
    /* color:red; */
    quotes: "“""”""‘""’";
}

q::before {
    content: open-quote;
}

q::after {
    content: close-quote;
}

main i {
    font-style: italic;
    font-family: serif;
}

main p b,
main div b {
    /* background-color: tomato; */
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
    margin-left: 0.5rem;
    margin-bottom: 0;
}


/* Lankar - allmant */
main a {
    text-decoration-line: underline;
    text-decoration-style: solid;
    font-size: 1rem;
}

main a:link {
    color: midnightblue;
    text-decoration-line: underline;
}

main a:visited {
    color: purple;
    text-decoration-line: underline;
}

main a:hover {
    color: firebrick;
    cursor: pointer;
    text-decoration-line: none;
}

main a:active {
    color: firebrick;
    text-decoration-line: none;
}

/* Lankar - here_link */
main a.here_link {
    /* border:1px solid black; */
    display: inline-block;
    text-transform: capitalize;
    font-weight: bold;
    font-size: inherit;
    padding: 0;
}

main a.margin_link1 {
    margin: 8px 9px 3px 8px;
}

main a.margin_link2 {
    margin: 8px 9px 3px 8px;
}

main a.margin_link3 {
    border: 1px solid black;
    margin: 0 0 9px 41px;
    text-decoration-line: none;
}

main a.here_link:link,
main a.here_link:visited,
main a.here_link:active {
    /* color: rgb(228, 0, 106); */
    color: crimson;
    background-color: silver;
}


main a.here_link:hover {
    color: maroon;
    font-size: 1.5rem;
    background-color: silver;
    margin: 0 1px;
    border: 1px solid maroon;
}

/* bara for h2 */
main h2 a.here_link:hover {
    color: maroon;
    background-color: silver;
    border: 1px solid maroon;
    margin: 7px 7px 2px 8px;
}






/* --4. IMG-ELEMENT-- */

main img {
    width: 100%;
    /* box-sizing: border-box; */
    display: block;
    margin: 0;
    padding: 0;
}

img.tarot_img {
    min-width: 75px;
    max-width: 150px;
    height: auto;
}


.gallery_container img {
    height: 25vh;
    width: auto;
    margin-left: 0;
    margin-right: 0;
    object-fit: contain;
    min-height: 150px;
    min-width: calc((3/4)*150px);
}

/* mitt forsok att klippa bilden -funkar bara i firefox */
.gallery_container img.klipp_img {
     width: calc((3/4)*25vh);
     /* height: 25vh; */
    object-fit: cover; 
}

div.gallery_container figure.item img:hover {
    opacity: 0.7;
}





/* --5.LIST-ELEMENT-- */


/* unordered list */
main table ul {
    width: 100%;
    box-sizing: border-box;
    background-color: pink;
    display: block;
    list-style-position: outside;
    list-style-type: circle;
    padding: 3px 3px 3px 1.5em;
    border-radius: 10px;
    margin: 0;
}

main li {
    padding: 0;
    margin: 0;
    text-align: left;
    font-family: cursive;
    font-style: italic;
    font-size: 1em;
    padding-right: 0.5em;
}

main table ul li {
    font-size: 1em;
    line-height: 1.1em;
}


/* ordered list innanfor en flexbox  */
main ol {
    display: block;
    list-style: upper-roman;
    list-style-position: inside;
    margin: 0;
    padding: 0;
    /* background-color: rgb(207, 189, 189); */
    /* background-color:black; */
}


/* forsta */
main ol li {
    color: white;
    text-transform: capitalize;
    margin: 3px 20px 3px 20px;
    padding: 0 3px 0 3px;
    background-color: rebeccapurple;
}

/* andra */
main ol li+li {
    /* background-color: purple; */
    /* background-color: rgba(140, 140, 160, 0.801); */
    /* background-color: rgba(128, 0, 128, 0.836); */
    background-color: darkcyan;
}

/* tredje */
main ol li+li+li {
    /* background-color: rgba(128, 0, 128, 0.418); */
    /* background-color:crimson; */
    /* background-color:rgba(220, 20, 60, 0.404); */
    background-color: yellowgreen;
}

/* texten innan ordered list */
p.text_lista {
    /* background-color:white; */
    text-decoration-line: underline;
    text-decoration-style: dashed;
    padding: 4px 4px 4px 4px;
    font-size: 1.2rem;
}

/* font-family till texten innan ordered list */
.text_lista span {
    /* background-color:black; */
    /* font-family: Franklin Gothic, Arial Narrow, Trebuchet MS, Lucida Grande, Tahoma, Verdana, sans-serif; */
    font-family: "Helvetica Narrow", "Arial Narrow", Tahoma, Arial, Helvetica, sans-serif;
    /* font-family: Arial, Helvetica, sans-serif; */
    /* font-family: 'newFont''Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; */
}





/* --6. TABLE-ELEMENT-- */

main table {
    width: 100%;
    background-color: black;
    border: 2px solid gray;
    border-radius: 7px;
    border-collapse: separate;
    margin: 0 auto;
    padding: 0;
}

table caption {
    text-align: left;
    caption-side: top;
}

/* OM TABLE HEAD */
main table thead {
    background-color: rgb(34, 26, 20);
    vertical-align: middle;
}

/* thead tr{} */

thead th {
    color: lightgray;
    border: 2px solid gray;
    border-radius: 5px;
    padding: 20px 5px;
    text-align: center;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration-line: underline;
}


/* OM TABLE BODY */

/* main table tbody {} */

/* tbody tr {} */

tbody td {
    background-color: rgb(78, 78, 78);
    color: white;
    border: 2px solid gray;
    border-radius: 5px;
    padding: 3px;
    text-align: center;
    vertical-align: middle;
    font-family: cursive;
    line-height: 2rem;
}


/* column 2 */
tbody td+td {
    background-color: rgb(6, 99, 62);
    color: black;
}

/* bubblan i column 2 */
tbody td+td span {
    background-color: rgb(103, 216, 150);
    display: inline-block;
    width: 100%;
    padding: 10px 0;
    border-radius: 10px;
}

/*column 3 no padding */
tbody td+td+td {
    padding: 0;
}

/* column 4 */
tbody td+td+td+td {
    background-color: rgba(209, 81, 81, 0.5);
    padding: 3px;
}


/* OM TABLE FOOT */
main table tfoot {
    background-color: rgb(59, 46, 34);
    vertical-align: middle;
}

/* tfoot tr {} */

tfoot td {
    border: 2px solid gray;
    border-radius: 5px;
    padding: 5px 30px;
}

/* bubblan i tfoot */
tfoot div {
    display: flex;
    justify-content: center;
}

/* texten i bubblan i tfoot */
tfoot p {

    background-color: rgb(165, 148, 110);
    padding: 5px 10px;
    border-radius: 5px;
    text-align: left;
}





/* --7. FORMULÄR-ELEMENT-- */

/* forsta lagret runt formularet */
main form {
    /* background-color: brown; */
    /* border: 2px solid green; */
    box-sizing: border-box;
    min-width: 100px;
    display: flex;
    margin: 1rem auto;
    padding: 1rem;
}

/* andra lagret runt formularet */
main form fieldset {
    background-color: darkgoldenrod;
    box-sizing: content-box;
    border: 3px groove;
    display: flex;
    flex-grow: 0.7;
    margin: 0 auto;
    padding: 1rem;
}

/* trejde lagret runt formularet*/
main form fieldset div.form_frame {
    background-color: goldenrod;
    border: 1px solid rgba(0, 0, 0, 0.3);
    padding: 0rem 1rem;
    display: flex;
    /* background-color:blue; */
    flex-grow: 0.8;

}

/* fjarde lagret runt formularet*/
main form fieldset div.form_frame div.form_wrap {
    /* background-color:pink; */
    flex-grow: 0.8;
    margin: auto;
    position: relative;
}

/* omsluter alla label+input i formularet */
div.wrap_label_input {
    /* background-color: brown; */
    /* border: 1px solid black; */
    padding: 0;
    margin: 1.5rem 0;
}

/* ----Allt om datumrutan--- */
/* datum-containern med datumrutan och tomma rutor fore och efter */
div.flex_container_stretch {
    /* background-color: white; */
    display: flex;
    justify-content: stretch;
    margin: 0 auto;
    padding: 0;
}

/* tomma rutor i datum-flex-containern */
div.flex_tomruta {
    /* background-color: blue; */
    display: block;
    height: 1em;
    margin: auto;
    padding: 0.01em;
    flex: 0.1;
    /* flex-grow: 100; */
    /* width:0.5rem; */
}

/* omsluter in- och utsedatum i formularet */
div.flexbox_dates {
    /* background-color: rgb(212, 190, 133, 0.8); */
    background-color: rgba(255, 255, 255, 0.1);
    border: 3px double rgba(255, 255, 255, 0.15);
    margin: 0 auto;
    flex: 1;
    flex-grow: 1;
    padding: 5px 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

/* minskar marginalen innanfor flexbox_dates */
div.flexbox_dates>div.wrap_label_input {
    /* background-color:gray; */
    margin-top: 5px;
    margin-bottom: 10px;
}


main label {
    display: inline-block;
    padding: 0 0.5rem;
    margin: 0 0 0.2rem 0;
}


/* ---allt om input--- */
main form input {
    /* background-color: black; */
    background-color: palegoldenrod;
    color: rgba(0, 0, 0, 0.7);
    font-size: 0.9rem;
    padding: 0.4rem;
    margin: 0;
    border: 2px inset rgba(0, 0, 0, 0.5);
    outline: none;
    box-shadow: none;
    border-radius: 7px;
}

main form input:hover,
main input:focus {
    background-color: rgb(245, 219, 245);
    border: 2px solid plum;
    outline: 2px solid plum;
    box-shadow: 0 0 1px 1px plum;
    color: black;
}

main form input[type="text"],
main form input[type="email"] {
    width: 88%;
    min-width: 90px;
    max-width: 250px;
}

main form input[type="date"] {
    font-size: 1rem;
    box-sizing: border-box;
    width: 144px;
}



/* knappen */
main form input[type="submit"] {
    display: block;
    margin: 0.5rem auto;
    width: 80px;
    height: 35px;
    box-sizing: border-box;
    background-color: rgb(245, 219, 245);
    border: 1px outset rgb(245, 219, 245);
    outline: 2px outset plum;
    border-radius: 0px;
    color: black;
}

main input[type=submit]:hover {
    background-color: rgb(245, 219, 245);
    opacity: 0.8;
    border: 2px inset plum;
    outline: 2px inset plum;
}

main input[type=submit]:hover:focus {
    color: rgb(245, 219, 245);
    opacity: 0.7;
    background-color: plum;
    border: 2px inset plum;
    outline: 2px inset plum;
    box-shadow: 0 0 2px 2px rgb(245, 219, 245);
}



/* checkboxen */
main form input[type="checkbox"] {
    margin-left: -1.5rem;
    margin-right: 0.5rem;
    border: none;
    outline: none;
    box-shadow: none;
}

input[type="checkbox"]:hover,
input[type="checkbox"]:checked,
input[type="checkbox"]:focus {
    border: none;
    outline: none;
    box-shadow: 0 0 0 2px brown;
}

label[for="upphamtning"] {
    margin-left: 2rem;
}


/* radiobutton*/
main form input[type="radio"] {
    margin-left: 1rem;
    border: none;
    outline: none;
    box-shadow: none;
}

input[type="radio"]:hover {
    outline: none;
    box-shadow: 0 0 1px 1px plum;
}

input[type="radio"]:checked {
    outline: none;
    box-shadow: 0 0 1px 1px brown;
}




/* allt om select option */
main select {
    display: inline-block;
    background-color: palegoldenrod;
    box-sizing: border-box;
    height: 40px;
    width: 110px;
    margin: 0 auto 0 1rem;
    padding: 0.5rem;
    color: rgba(0, 0, 0, 0.7);
    font-size: 0.9rem;
    border: 2px inset rgba(0, 0, 0, 0.5);
    outline: none;
    box-shadow: none;
    border-radius: 7px;
}

select:hover,
select:focus {
    background-color: rgb(245, 219, 245);

    border: 2px solid plum;
    outline: 2px solid plum;
    box-shadow: 0 0 1px 1px plum;
    color: black;
}


select:focus>option {
    background-color: palegoldenrod;
    color: brown;
    font-size: 1rem;
}


/* Allt om Textarea */
main textarea {
    display: inline-block;
    background-color: palegoldenrod;
    color: rgba(0, 0, 0, 0.7);
    font-size: 1rem;
    outline: none;
    box-shadow: none;
    border: 2px inset rgba(0, 0, 0, 0.5);
    outline: none;
    box-shadow: none;
    width: 100%;
    height: 100px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0.5rem;
    border-radius: 7px;
}

main textarea:hover,
main textarea:focus {
    background-color: rgb(245, 219, 245);
    border: 2px solid plum;
    outline: 2px solid plum;
    box-shadow: 0 0 1px 1px plum;
    color: black;
}






/* --8. DIVAR-- */

main div {
    margin: 0em auto;
    font-family: serif;
}

/* Yttersta div som centrerar innehall (flex) */
div.center_content_outer {
    /* background-color: teal; */
    display: flex;
    margin: 2rem 0;
    padding: 0 1em;
    text-align: center;
    position: relative;
    justify-content: center;
}


/* flex-container som centrera och wrap-ar block i main */
div.wrap_container {
    /* background-color: hotpink; */
    /* border:1px solid black; */
    /* width: 100%; */
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto 0.5em auto;
    padding: 0 0.5em;
    justify-content: center;
    align-items: flex-start;
}

/* innehaller text-block */
div.text_container {
    /* background-color: mediumspringgreen; */
    display: block;
    /* text-align: left; */
    /* border:1px solid black; */
    margin: 0 auto;
    padding: 0;
}

/* ljusare bakgrundsruta till text */
.dimm_ruta {
    background-color: rgba(255, 255, 255, 0.336);
}










/* --9. Till Galleriet-- */

/* galleri-text */
.gallery_container figcaption {
    /* background-color: azure; */
    box-sizing: content-box;
    font-size: 0.7rem;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: italic;
    padding: 0.2rem 0.5rem;
    /* height: 5rem; */
    min-height: 80px;
    text-align: left;
    background-color: rgb(230, 215, 227);
}

/* Text och bild behallare */
/* figure {} */
figure.item {
    float: left;
    /* width: 25%; */
    border: 2px dashed rgb(230, 215, 227);
    /* background-color:rgb(247, 168, 139); */
    /* margin:0 auto; */
    /* position: relative; */
    width: min-content;
    /* display:flex; */
    /* flex-direction: column; */
    /* padding-top: 0; */
    /* padding:0.5em; */
    margin: 0.07rem;
}

/* ram runt fotografibehallarna i galleriet */
div.hackig_ram {
    padding: 2px;
    background-color: darkslategray;
    width: min-content;
    display: inline-block;
    border: 2px dashed rgb(89, 121, 121);
    margin: 0.1em;
}

/* Container med alla behallare */
.gallery_container {
    background-color: rgb(89, 121, 121);
    box-sizing: border-box;
    padding: 1rem 0.3rem;
    /* text-align: center; */
    /* width: 100%; */
    /* display: flex;   */
    border: 10px groove darkslategray;
    text-align: center;
}

/* ram till galleriet */
div.gallery_frame {
    background-color: rgb(87, 129, 129);
    padding: 1em;
    border: 5px groove darkslategray;
    margin: 2em 2em 1em 2em;
}



/* --10. iframe -- */
main iframe {
    /* display: block; */
    /* width: 400px;
    height: 225px; */
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    margin: 0;
}

div.iframe_container {
    /* background-color:indigo; */
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9 Aspect Ratio */
    box-sizing: content-box;
    /* border: 1px solid black; */
    /* padding-bottom:0;
    padding-left:0;
    padding-right:0;
    margin:0;   */
}



/* --11. ÖVRIGA ELEMENT-- */
main hr {
    border: 2px double rgb(58, 58, 58);
    width: 75%;
    margin-top: 3em;
    margin-bottom: 3em;
    /* font-size: 5rem; */
}

/* main br{} */





/* --12. ENKLA KLASSER-- */

.max_width_big {
    max-width: 550px;
}

.max_width_medium {
    max-width: 400px;
}

.max_width_small {
    max-width: 300px;
}

p.justify {
    text-align: justify;
}

p.left {
    text-align: left;
}

p.center {
    text-align: center;
}

p.indent {
    text-indent: 1em;
}


.gra_ram {
    box-sizing: border-box;
    border: 2px solid gray;
}

.bottom_margin_1em {
    margin-bottom: 1em;
}

.bottom_margin_2rem {
    margin-bottom: 2rem;
}

.flex {
    display: flex;
}

span.nobreak {
    /* background-color: white; */
    white-space: nowrap;
}

.no_margin {
    margin: 0 !important;
}

.no_margin-top {
    margin-top: 0 !important;
}

.no_margin-bottom {
    margin-bottom: 0 !important;
}

.darkred {
    color: darkred;
}

.bold_font {
    font-weight: bold;
}

.line-height_large {
    line-height: 1.5em;
}



/* img.stor_img {
    width: 300px;
} */

/* img.liten_img {
    width: 200px;
} */





/* -- ej anvant-- */

/* main div.table_wrap {
    background-color:red;
    flex:1;
    margin:1rem auto;
    width: min-content;
    /* flex-grow:12; 
}*/

/* div.wrap_squeez_content{
    background-color: maroon;
    flex: 1;
    box-sizing: border-box;
    width: min-content;
    margin:0;
    padding: 0;
    text-align: left;
    border:1px solid black;
} */


/* div.foto_och_text {
    font-style: italic;
    text-align: left;
    padding: 0;
    display: block;
    width: min-content;
    margin: auto;
    text-indent: 2rem;
} */

/* div.foto_och_text img {
    margin:0;
    padding:0;
} */

/* .center {
    text-align: center;
    left:50%;
    transform: translate(0% -50%);
} */


/* span{
    background-color: pink;
    text-align: left;
    display:inline-block;
} */


/* p.text_fixed_width {
    background-color: silver;
    width: max-content;
    box-sizing: border-box;
    display: block;
    margin: 0.5em auto;
    padding: 0 0.5em;
} */