/* Color theming hex codes:

#93B5C6 - powder blue
#DDEDAA - tea green
#F0CF65 - naples yellow
#D7816A - burnt sienna
#BD4F6C - fuchsia rose

Colors are taken from this generator: https://coolors.co/93b5c6-ddedaa-f0cf65-d7816a-bd4f6c
 */

/* -bs is the default  */

@property --bs-navbar-brand-padding-y{
    inherits:true;
}

:root [my-theme=default]{
    --powder-blue: #93B5C6;
    --tea-green: #DDEDAA;
    --naples-yellow: #F0CF65;
    --burnt-sienna: #D7816A;
    --fuchsia-rose: #BD4F6C;

    /* default border radius */
}


*{
    font-family: "Noto Sans", sans-serif;
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    /* font-variation-settings:
        "wdth" 100%; */
    box-sizing: border-box;
}

.navbar{
    background-color: #93B5C6;
    min-width:14%;
    width:100%;
}

div.offcanvas{
    min-width:50%;
}

div.offcanvas-header{
    max-height:56px;
}

div.offcanvas-body { 
    background-color: #F0CF65;
}

ul.navbar-nav{
    background-color:white;
    padding: 10px;
}

li.nav-item{
    /* padding-bottom:5px; */
    padding-left:10px;
}

li.nav-item:hover{
    background-color:#DDEDAA;
    border-radius:5px;
}

body{
    z-index: 1000;

    /* note: the header width is 56 */
    margin-top: 56px; /*f12 -> computed -> view the height of the navbar */
    padding:20px;
    position:relative;
    background-color:#DDEDAA;
    width:auto;
}

/* div.container{
    display:inline-block;
    align-items:center;
    justify-content: center;
} */

div.col, div.row{
    padding: 20px;
    background-color:white;
    margin: 10px;
    border-radius: 5px;
    width:100%;
    height:100%;
}

img{
    /* max-width: fit-content; */
    max-width: 100%;
    min-width: 300px;
    padding: 20px;
    /* style: "width:fit-content" */
}



/* button:focus, button:focus-visible{
    color: var(--tea-green);
} */

/* ul{
    padding: 10px;
    padding-inline: 10px;
} */

/* li{
    padding: 10px;
    /* padding-inline: 10px; */
/* } */ 


h1 {
    padding: 10px;
    border-radius: 10px;
    background-color: #F0CF65;
    padding-inline: 20px;
    text-align: center;
}