/* @import url(//db.onlinewebfonts.com/c/a0e1b1883c0cf520e9c50d0cd91cd0d0?family=PapyrusW01); */

/* @font-face {
    font-family: MyWebFont;
    src:  url('sansation_light.woff');
          url('Papyrus.woff') format('woff');
  } */

  /* @font-face {font-family: "PapyrusW01"; src: url("//db.onlinewebfonts.com/t/a0e1b1883c0cf520e9c50d0cd91cd0d0.eot"); src: url("//db.onlinewebfonts.com/t/a0e1b1883c0cf520e9c50d0cd91cd0d0.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/a0e1b1883c0cf520e9c50d0cd91cd0d0.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/a0e1b1883c0cf520e9c50d0cd91cd0d0.woff") format("woff"), url("//db.onlinewebfonts.com/t/a0e1b1883c0cf520e9c50d0cd91cd0d0.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/a0e1b1883c0cf520e9c50d0cd91cd0d0.svg#PapyrusW01") format("svg"); }  */

  /* <link href="https://fonts.cdnfonts.com/css/papyrus" rel="stylesheet">
    <style>
        @import url('https://fonts.cdnfonts.com/css/papyrus');
    </style> */

    /* @import url(//db.onlinewebfonts.com/c/a0e1b1883c0cf520e9c50d0cd91cd0d0?family=PapyrusW01); */

    /* @font-face {font-family: "PapyrusW01"; src: url("//db.onlinewebfonts.com/t/a0e1b1883c0cf520e9c50d0cd91cd0d0.eot"); src: url("//db.onlinewebfonts.com/t/a0e1b1883c0cf520e9c50d0cd91cd0d0.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/a0e1b1883c0cf520e9c50d0cd91cd0d0.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/a0e1b1883c0cf520e9c50d0cd91cd0d0.woff") format("woff"), url("//db.onlinewebfonts.com/t/a0e1b1883c0cf520e9c50d0cd91cd0d0.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/a0e1b1883c0cf520e9c50d0cd91cd0d0.svg#PapyrusW01") format("svg"); } */

    /* @font-face {
        font-family: "MinPapyrus";
        src: url("https://yoursite.com/css/fonts/CustomFont.eot");
        src: url("https://yoursite.com/css/fonts/CustomFont.woff") format("woff"),
        url("https://yoursite.com/css/fonts/CustomFont.otf") format("opentype"),
        url("https://yoursite.com/css/fonts/CustomFont.svg#filename") format("svg");
        } */

        /* @font-face {
            font-family: 'PapyrusW02';
            src: url('C/Users/Rebeka/Desktop/WebbdesignLulea/LULEAprogrammering/uppg4_project/PapyrusW02.woff2') format('woff2'),
                url('C/Users/Rebeka/Desktop/WebbdesignLulea/LULEAprogrammering/uppg4_project/PapyrusW02.woff') format('woff');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        } */

        /* @font-face {
            font-family: 'papyrusregular';
            src: url('C:\Users\Rebeka\Desktop\WebbdesignLulea\LULEAprogrammering\uppg4_project\papyrus-webfont.woff2') format('woff2'),
                 url('C:\Users\Rebeka\Desktop\WebbdesignLulea\LULEAprogrammering\uppg4_project\papyrus-webfont.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        
        } */

        @font-face {
            font-family: 'papyrusregular';
            src: url('https://www.amanreb.com/LTU/uppgift4/papyrus-webfont.woff2') format('woff2'),
                 url('https://www.amanreb.com/LTU/uppgift4/papyrus-webfont.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        
        }
        

html {
    margin: 0px;
    padding: 0px;
    width: 100%;
    
}

body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    /* font-family: MyWebFont, sans-serif; */
}

* {
    font-family: 'papyrusregular', sans-serif;
   
 }


/* /////////// GRID CONTAINER AND ITS ITEMS /////////////// */


/* #id_gridContainer{
    background-color: rgb(104, 58, 58);
    background-color: transparent;
}  */



header {
    /* position: -webkit-sticky;
    position: sticky;
    top: 0; */

    display:flex;
    flex-direction: row;
    flex-direction: row;
    justify-content: space-between;

    grid-area: header;
    background-image:url("bilder/img_header.jpg");
    background-repeat:no-repeat;
    /* background-size:100%; */
    background-position: left;
    background-size: cover;
    
}



aside {

    /* position: -webkit-sticky;
    position: sticky;
    top: 0;     */

    grid-area: aside;
    background-color: green;
}



main {
    grid-area: main;
    background-color: rgb(230, 196, 196);
    margin-top: 0;
}


footer {
    grid-area: footer;
    background-color: brown;

    display:flex;
    flex-direction: row;
    flex-direction: row;
    justify-content: space-between;
}




/* /////////////////////// DIV BIG CONTAINERS /////////////////////////// */


/* header */

#id_menuIconBox{
    /* background-color:chartreuse; */
    background-color: transparent;
    align-self:flex-end;
    width:100px;
}

#id_titleIconBox{
    /* background-color:chocolate; */
    background-color: transparent;
    align-self:center;
}

#id_flagContainer{
    /* background-color:crimson; */
    /* background-color: inherit; */
    align-self:flex-end;

    display:flex;
    flex-direction: row;
    background-color: transparent;
}

/* .cl_flagBox{

} */



/* aside */

/* #id_asideTitle{
    
} */

.cl_asideTab{
    border-style: outset;
    border-width: 5px;
    border-color: #502d0b; 

    background-color: #3c2209;
   
}



/* main  */

#id_mainTabContainer {
    display: flex;
    flex-direction: row;
    /* justify-items: stretch; */
    /* justify-content:stretch; */

}

.cl_mainTab{
    border-style: outset;
    border-width: 7px;
    border-color: coral; 

    width:100%;
    text-align:center;

}

/* article{

} */

#id_controlsContainer{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}

/* .cl_controlBox{

} */



/* footer */

/* .cl_footerBox{

} */

#id_upIconBox {
    align-self: center;
}


/* ///////////////////// TEXT ////////////////////////////// */

/* h3{
    
}

h1{

}

h2{

} */

/* h3{
    font-size: 30px;
    font-family: MyWebFont, sans-serif;
} */

/* h4{

}

h5{

} */


footer h6{
    margin:5px;
}


/* ///////////////////// GENERAL ////////////////////////////// */

img{
    width: 100%;
}


button{
    width: 100%;
    padding:0;
    height:auto;
}

/* div{
    width:100%;
} */