/* INNEHÅLL
    Allmänt
    Divar
    Text
    Mediaquery */


/*/////////////////////////// ALLMÄNT/////////////////////////////////////////////////*/

body {
    min-width: 320px;
    width:100%;
    height:100%;
    margin:0;
    /* background-image: url(images/Topographic\ contour\ lines\ vector\ map\ seamless\ pattern_\ Map\ of\ terrain.jpg); */
    background-image: url(images/Magnolia-Leaf-Pattern-Tile_670.png);
    background-repeat: repeat;
    background-size: 400px;
    background-color: rgba(212, 209, 209, 0.425);
}

*{
    box-sizing: border-box;
}


/* section {
    margin:1rem;
} */






/*/////////////////////////// DIVAR /////////////////////////////////////////////////*/

div#outer{
    /* background-color: white; */
    display:flex;  
    flex-direction: column;  
    align-content: center; 
    padding-left: clamp(8px, -72px + 0.25vw*100, 175px);
    padding-right: clamp(8px, -72px + 0.25vw*100, 175px);
}


div#frame {
    /* position:relative; */
    display: flex;
    flex-direction: row;
    background-color: black;
    max-width:1000px;
    margin-bottom:20px;
    margin-left:0;
    margin-right:0;
    border-radius: 20px;   
}

 div#wrapper{
    position:relative;
    display: flex;
    flex-direction: column;
    width:min-content;
    margin-left: auto;
    margin-right:auto;
    padding-right:0px;
    padding-left:0px;
    justify-self: center;
    justify-content: center;
    justify-items: flex-end;
}  


div#slideshow {
    display:flex;
    flex-direction: column;
    width: 100%;
    height:460px;
    max-width: 1000px;
    /* max-height:500px; */
    /* min-width: min-content; */
    margin-left:auto;
    margin-right:auto;
    /* margin-top:auto; */
    /* margin-bottom:auto; */
    /* border: 10px solid black; */
}

div#slideshow img {
    display: block;
    position:absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%, -51%);
    /* height:100%; */
    width: auto;
    height:84%;
    /* max-width:80%; */
    /* max-height:500px; */
    /* width:auto; */
    object-fit:cover;
    border-radius: 5px;
}

div#slideshow img {
    cursor: pointer;
}



/*////////////////////// TEXTER /////////////////////////*/

h4 {
    margin-top:15px;
    margin-bottom:15px;
    margin-left:20px;
    font-size:2.5rem;
    max-width: 500px;
}

div#caption{
    position:absolute;
    top:420px;
    left:0;
    color:white;
    text-align: left;
    transform: translate(-50%, 0);
    justify-self: left;
    width:300px;
    max-width: 1000px;
    margin-left:auto;
    margin-right:auto;
    padding-left:12px;
    padding-right:7px;
    padding-top:4px;
    font-size:1rem;
    line-height: 15px;
}


label {
    font-size: 1.2rem;
    font-weight: bolder;
    max-width: 500px;
    margin-bottom: 0px;
    margin-left:50px;
    margin-right:10px;
    text-indent: -30px;
    line-height:1.5 ;
}

label span {
    white-space: nowrap;
}

input#speedInput {
    width:40px;
    padding:3px;
    text-align: center;
    font-size: 1rem;
    background-color: white;
    border:2px solid black;
}


footer{
margin-top:15px;
margin-bottom:20px;
}


footer p  {
   margin-left: 70px;
   margin-top:0px;
   margin-bottom:0px;
   color:dimgray;
}




/*///////////MEDIAQERY///////////////////////////*/

/* @media(min-width:320px) {
    div#frame {
        margin-left:0px;
        margin-right:0px;
    }

} */

/* @media(min-width:578px) {
    div#frame {
        margin-left:10px;
        margin-right:10px;
    }

}*/

@media(min-width:1000px) {
    div#frame {
        flex: none;
        width:650px;

    }

}