@import url('https://fonts.googleapis.com/css2?family=Acme&family=Caprasimo&family=Chewy&family=Cookie&family=Josefin+Sans:wght@100;200;400;500;600;700&family=Nunito:wght@200;300;400;500;600;700;800;900;1000&display=swap');

:root{
    --primary : #e5001f;
    --secondary : #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    font-family: 'Nunito', sans-serif;
}

header {
	position: fixed;
    top: 0px;
    width: 360px;
    height: 8vh;
    background: var(--secondary);
    padding-right:; 
    padding-left: 5px;
}

.head {
	display: flex;
	height: 100%;
}

.headlogo {
	background-image: url("../img/logo.png"); 
	background-repeat: no-repeat;
  	background-position: center;
  	background-size: 100%;
  	height: 8vh;
  	width: 50px;
}

.headname {
	font-weight: 900; 
	height: 100%;
	padding: 3px 5px;
	border-radius: 5px;
}

.headname img {
    position: absolute;
    width: 20px;
    left: 30px;
}



.menu {
    position: fixed;
    bottom: 0px;
    width: 360px;
    background: var(--secondary);
    padding: 5px;
    border-radius: 5px;
}

.enter {
    width: 100%;
    display: flex;
    list-style: none;
}

.icon-names {
	display: block;
	text-align: center;
	width: 20%;
	color: var(--primary);
}

.icon-names .name {
	font-size: 10px;
}

.active {
    border-radius: 100%;
    border: 2px solid var(--secondary);
    background: var(--primary);
    color: white;
    padding: 3px 0px;
}

.dashbord {
	position: fixed;
	width: 360px;
	height: 83vh;
    background: var(--secondary);
    padding: 5px;
    border-radius: 5px;
}

.bord {
	background-image: url("../img/homes.png"); 
	background-repeat: no-repeat;
  	background-position: center;
  	background-size: 100%;
  	height: 500px;
    text-align: center;
}

.solde{
}

.solde h3 {
	font-weight: 900; 
}

/* Smartphones petits (≤ 480px) */

@media only screen and (max-width: 480px) {
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary);
        font-family: 'Nunito', sans-serif;
    }

    header {
        position: fixed;
        top: 0px;
        width: 97%;
        height: 8vh;
        background: var(--secondary);
        padding-right:; 
        padding-left: 5px;    
    }

    .menu {
        position: fixed;
        bottom: 0px;
        width: 97%;
        height: 8vh;
        background: var(--secondary);
        padding: 5px;
        border-radius: 5px;
    }

    .dashbord {
        position: fixed;
        width: 97%;
        top: 8.5vh;
        height: 83vh;
        background: var(--secondary);
        border-radius: 5px;
        overflow-y: auto;
    }

    .bord {
        background-image: url("../img/homes.png"); 
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        height: 580px;
        text-align: center;
    }
}