:root{
  --user-dark-grey: rgb(75, 101, 132);
  --user-light-grey: rgb(119, 140, 163);
  --user-blue: rgb(45, 152, 218);
  --user-green: rgb(32, 191, 107);
  --user-yellow: rgb(250, 222, 137);
  --user-red: rgb(235, 59, 90);
  --user-purple: rgb(136, 84, 208)
}

/* add some padding for the main component 
 * # stands for ids in HTML tags
 * . stands for classes
 */
#main-container{
	padding : 5% 5% 8% 5%;
}

h1.page-title {
    color: var(--user-light-grey)
}

h2.page-subtitle{
  font-weight: bold;
	font-size: 20pt;
  color: var(--user-light-grey)
}

p.par{
  margin-bottom: 0.5cm;
  text-align: justify;
}

P.subtitle-text{
  font-size: large;
  margin-bottom: 0cm;
}

a.on-page{
    font-weight: bold;
    color: var(--user-blue);
}

a.nav-link{
  color: var(--user-light-grey)
}

a.nav-link:hover{
  color: var(--user-yellow)
}

a.other-link{
    color: var(--user-light-grey)
}

a.other-link:hover{
  color: var(--user-yellow)
}

img.card-picture{
    border-radius: 50%; 
    width: 150px;
    height:auto; 
    align-self: center;
    margin-top: 5%;
    margin-bottom: 0%;
}

img.front-picture{
  width: 200px;
  height: auto;
}