$primary-color-dark:   #1976D2;
$primary-color:        #2196F3;
$primary-color-light:  #BBDEFB;
$primary-color-text:   #FFFFFF;
$accent-color:         #2196F3;
$primary-text-color:   #212121;
$secondary-text-color: #757575;
$divider-color:        #BDBDBD;

@use "@material/theme" with (
  $primary: $primary-color,
  $secondary: $accent-color,
  $background: $primary-color-light,
);

@use "material-components-web";
@use "@material/switch";
@use "@material/card";
@use "@material/button";
@use "@material/tab";
@import "@material/top-app-bar/mdc-top-app-bar";



@mixin eightspacing{
	margin: 8px 8px 8px 8px;
}

@mixin eightpadding {
	padding: 8px 8px 8px 8px;

}

@mixin fourpadding {
	padding: 4px 4px 4px 4px;

}

@mixin scroll-bar{
	scrollbar-width: thin;          
	scrollbar-color: $accent-color $primary-color-light;

}

@mixin h-atr{
	font-family: 'Roboto', sans-serif;
	font-size: 24px;
	display: inline-block; 
	
}

.mdc-top-app-bar--fixed{
	width:100vw;
	height:10vh;
	padding-left:-8px;
	margin-left:-8px;
	margin-top:-8px;
	/*background-color:$primary-color;*/
	@include mdc-top-app-bar-fill-color-accessible($primary-color-dark);
	@include mdc-top-app-bar-ink-color($primary-color-text);
}



.mdc-top-app-bar--fixed-adjust{
	width:100vw;
	height:10vh;
	@include mdc-top-app-bar-fill-color-accessible($primary-color-text);
}

.mdc-button--raised{
	@include button.filled-accessible($accent-color);
	@include button.ink-color($primary-color-text);
}


p {
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	display: inline-block; 
}

a {
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	display: inline-block; 
}


h1{
	@include h-atr;
}


h1{
	@include h-atr;
}

h2{
	@include h-atr;
}

h3{
	@include h-atr;
}

h4{
	@include h-atr;
}

h5{
	@include h-atr;
}

h6{
	@include h-atr;
}

li{
	font-family: 'Roboto', sans-serif;
	font-size: 22px;
	display: inline-block; 

}

.summary-explain-p{

	font-family: 'Roboto', sans-serif;
	font-size: 22px;
	display: inline-block; 
	padding-left: 8px;
}


.summary-picto-div{
	display:flex;
	align-items:center;
}


.mdc-card{
	display:flex;
	flex-direction: coloumn;
	margin-right:4px;
	margin-bottom:4px;
	margin-left:4px;
	@include eightpadding;
	
}


.mdc-button{
	@include eightspacing;
	@include eightpadding;
	@include button.core-styles;
}