:root {
    --basic-background-color: rgb(191, 170, 252);
    --inactive-background-color: rgb(247, 255, 89);
}
* {
  box-sizing: border-box;
}
html {
    width: 100%;
    height: 100%;
    font-family:  sans-serif;
    font-size: 1.0em; 
}
body {
	padding: 1rem;
    font-size: 0.9rem;
}
header {
    position: relative;
    display: block;
    width: 100%;
    margin: 1rem;
}
footer {
    position: relative;
    display: block;
    width: 100%;
    margin: 1rem;
}
h1 {
    text-align: center;
    margin: 1rem 0;
	font-size: 1.5rem;
	font-weight: bold;
}
h2 {
	text-align: center;
    margin: 1rem 0;
	font-size: 1.2rem;
	font-weight: bold;
}
p {
    line-height: 1.5rem;
    margin: 0.5rem 0;
}

.container {
    display: flex;
    gap: 10px;
}
.box {
    flex-basis: 50%;
    background-color: var(--basic-background-color);
    min-height: 90vh;
    padding: 10px;
    border-radius: 10px;
}
.box h1{
    text-align: center;
    font-size: 1.2rem;
}
.item {
    margin: 10px;
    padding: 10px;
    border-radius: 3px;
    cursor: pointer;
	color: white;
}
#item1 {
    background-color: red;
}
#item2 {
    background-color: green;
}
#item3 {
    background-color: blue;
}
#item4 {
    background-color: fuchsia;
}
#item5 {
    background-color: black;
}
.inactive {
    /* display: none;
	*/
	opacity: 0.5;
}