/* This file (style.css) contains global design rules */

/* Global colors */
:root {
  --background-primary: rgb(32,43,56);
  --background-secondary: rgba(255,255,255,0.05);

  --color-primary: rgb(37, 49, 90); /* rgb(110, 140, 251); */ 	
  --color-secondary: rgb(80,88,156);

  --textcolor-primary: rgb(255,255,255);
  --textcolor-secondary: rgb(154, 164, 201);

  --btn-background: rgb(80,88,156);
  --btn-hover: rgb(255,255,255);
}



/* Standard document layout */
* { 
	box-sizing: border-box; 	/* include padding/border in element width/height:                 
	                               https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing */
}

html {
	height: 100%;
}

body { 
	margin: 0; 
	font-family: system-ui, sans-serif; 
	background-color: var(--background-primary);		 /* page background color */	
	height: 100%;							                     /* make page always fill whole screen-height */
}


/* Standard button design */
:where(button){
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--btn-background);
  color: var(--textcolor-primary);
  border: 0;
  cursor: pointer;
}
:where(button:hover){
  background: var(--btn-hover);
  color: var(--btn-background);
}


/* Avatar-Design (set size + font-size in extra class) */
.avatar {
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  margin: 10px auto 20px;
  color: var(--textcolor-primary);   
  display: inline-flex;
  align-items: center;
  justify-content: center;  
}


/* Standard input design */
:where(input){
  width: 100%;
  padding: 8px;
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);;
  color: var(--textcolor-primary);
  border: 1px solid var(--color-primary);
}
:where(input)::placeholder{
  color: var(--textcolor-secondary);                      			/* change default text color */
  opacity: 1;  
}