@import url('https://fonts.googleapis.com/css2?family=KoHo:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Dancing+Script:wght@400..700&display=swap');

:root {
    --black: #000;
    --white: #fff;
    --col1: rgba(33,37,41,1);
    --col2: #431a16;
    --col3: #762e20;
    --col4: #b55628;
    --col5: #b07346;
    --col6: #edad70;
    --col7: #f3d6b8;
    --col8: #d0af9e;
    --col9: #daccc3;
    --col10: #f3ebe8;
    --col11: #fefefe;
    --font1: "Dancing Script", cursive;
    --font2: 'KoHo', sans-serif;
}


body {
    background-color: var(--col10);
    color: var(--col1);
    margin: 0;
    padding: 0;
    font-family: var(--font2);
    font-size: 18px;
    line-height: 1.5;
}


/* Title - generally */

h1 {
    padding: 10px 0px 10px 0px;
    margin: 0px 0px 0px 0px;
    font-family: var(--font1);
    font-size: 35px;
    font-weight:bold;       
}


h2 {
    padding: 10px 0px 10px 0px;
    font-family: var(--font1);
    font-size: 35px;
    font-weight:bold;

}

h3 {
    font-family: var(--font1);
    font-size: 28px;
}

h4 {
    font-family: var(--font1);
    font-size: 22px;
}

p {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}


a {
    color:var(--col4);
}

a:hover, a:visited, a:active {
    color:var(--col4);
    background-color:var(--col2);
    border-radius: 5px;
    
}


/* Navigation */

.navbar {
    width: 100%;
    min-height: 60px;
    align-items: flex-start;
    align-content: flex-start;
    padding: 0px;
    color: var(--col11);
    background: var(--col1);
}


/* NAVBAR -  Tablet and Mobile */

.navbar {
    position: fixed;
    bottom: 0;
    width: 100%;
    min-height: 60px;
    align-items: flex-start;
    align-content: flex-start;
    padding: 0px;
    /*background-image: linear-gradient(180deg, var(--col4), 50%, transparent 50%, transparent 70%, var(--col4) 70%);*/
    /*border-top: 50px solid transparent;*/
    border-image: url('../assets/img/border_nav_mobile_transparent.png') 150 stretch;
}

.navcontainer-fluid {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: var(--col1);

}

.container-fluid .collapse{
    padding: 20px 0 20px 0;

}

.container-fluid {
    border-top: 5px solid var(--col1);

}

.navcontainer{
    width: 40%;
    text-align: right;
    padding-top: 10px;
    padding-bottom: 10px;
    
}

.navSocialMedia {
    width: 60%;
    display: flex;
}

.navSocialMedia .container {
    margin: 0;
    padding: 0;

}

.socialMediaButtonContainter {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}


.socialMediaImage{
    max-height: 40px;
    max-width: 40px;
    margin: 10px;
}

.navbar .container-fluid, .navbar-epand-lg .navbar-collaps, .navbar-expand-lg .navbar-nav, .navbar-expand-lg .navbar-collapse  {
    flex-direction: row-reverse;
}



.collapse .containter .row .col-6 {
    padding: 0 20px 0px 20px;
}