:root {
    /*color pallete*/
    --blue: #0034ff;
    --light-blue: #5da3ff;
    --white: #f8dbb0;
    --grey: #ba9f89;
    --light-grey: #dab8c1;
    --black: #000;
    --border: #0034ff;
}

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

.border {
    border: solid;
    border-radius: 0px;
    border-color: var(--blue);
}

.test {
    /*color: blue;*/
    /*background-color: red;*/
    border: dashed;
}

body {
    background-color: var(--blue);
    background-image: url(/background.png);
}

.center-all {
    display: flex;
    width: 100%;
    height: 100%;
    
    justify-content: center;
    justify-items: center;
    place-items: center;
}

.container {
    display: flex;
    width: 1200px;
    height: 100vh;
}

.header {
    display: flex;
    flex-direction: row; 
    width: 1200px;
    height: 256px;
    
    margin-top: 4rem; 
}

.avatar {
    aspect-ratio: 1 / 1;
}


.header-navigation {
    flex: 1;
    display: flex;
    flex-direction: column; 
    
}

.main-title {
    flex: 2;

}
.navbar {
    flex: 1;

}