*{
    /* border: 1px solid black; */
}
.container{
    margin: 0 auto;
    width: 100%;
    height:auto;
    background-color: var(--container-color);
    z-index: -5;   
}

body, p, span{
   font-size: var(--font-size);
   font-family: var(--font-roboto);
   font-weight: var(--font-weight);
   line-height: var(--font-line-height);
}

button{
    width: 150px;
    height: 50px;
    color: var(--button-font-color);
    background-color: var(--button-color);
    cursor: pointer;
    border-radius: var(--border-radius);  
    font-size: var(--button-font-size);  
}

.btn-secondary{
   background-color: var(--button-color-sec); 
}

div,main,section,footer,button{
    box-shadow: var(--box-shadown);
}

h1{
    font-size: var(--font-headline-lg-size);
    font-family: var(--font-family-roboto);
    font-weight: var(--font-headline-lg-weight);
    color: var(--font-headline-color); 
}

header{
    display:flex;
    width: 99%;
    height: 60px;
    padding: var(--padding-default);
    margin: var(--margin-default); 
    border-radius: var(--border-radius); 
    background-color: var(--background-color); 
    z-index: 1;
}

.brand{
    width: 200px;
    height: inherit;
    padding: inherit;  
}

.brand img{
    width: 90%;
    height: auto;
}

.title{
    width: 50%;
    height: auto;
    padding: inherit;  
}

.screen-mode{
    width: 20%;
    height: auto;
}

.screen-mode-dark,
.screen-mode-light{
    width: 49%;
    height: auto;
}