:root {
  --background: pink;
  --text: #faf0e6;
  --accent1: #00000;
  --accent2: #00000;
  --blue: blue;
}


body {
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  color: black;
  font-family: Verdana;
}

a {  
  color: black;
  text-decoration: none;
}

img{
  width: 100%;
}

ul {  
  background: #ff3c2e;
  background: linear-gradient(103deg,rgba(255, 60, 46, 1) 0%, rgba(255, 140, 0, 1) 14%, rgba(243, 195, 56, 1) 28%, rgba(101, 237, 83, 1) 42%, rgba(83, 237, 193, 1) 57%, rgba(83, 98, 237, 1) 71%, rgba(147, 83, 237, 1) 86%, rgba(224, 83, 237, 1) 100%);
  background-color: white;
  border: solid;
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

li {
  display: block;
  text-align: center;
  padding: 0.5%;
  flex-grow: 1;  
}

a:hover{
  background-color: black;
  color: white;
}


header-component {
  display: block;
  margin: 1%;
  width: 97%
}

main{
  display: flex;
  border: solid;
  margin: 1%;
  width: 60%;
}

navbar-component{  
  border: solid;
  background-color: white;
  margin: 1%;
  width: 97%
}

sidebar-component{
  border: solid;
  background-color: green;
  margin: 1%;
  width: 16%;
}