from links, adventure

* {
font-family: “Noto Sans”, sans-serif;
}
html, body {
padding: 0;
margin: 0;
}
ul {
list-style-type: none;
padding: 0;
}
li:first-child {
border-left: #A594F9 0.25em solid;
}
li:nth-child(2) {
border-left: #F9A5A5 0.25em solid;
}
li:nth-child(3) {
border-left: #6A8FF9 0.25em solid;
}
li:nth-child(4) {
border-left: #D8A9E6 0.25em solid;
}
li:nth-child(5) {
border-left: #A6E1A6 0.25em solid;
}
li p {
padding-left: 0.5em;
}
main {
display: grid;
grid-template-columns: 2fr 3fr;
gap: 1em;
width: 100%;
}
aside {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
border-right: 0.1em lightgrey solid;
background-color: #fbedc3;
text-align: center;
}
article {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
margin-left: 2em;
}
aside h1 {
font-size: 2em;
margin: 0;
}
.marker {
font-weight: bold;
font-size: 1.5em;
color: white;
padding-left: 0.5em;
padding-right: 0.5em;
}
.marker1 {
background-color: #CDC1FF;
}
.marker2 {
background-color: #FFC1C1;
}
.marker3 {
background-color: #87A2FF;
}
.marker4 {
background-color: #E4B1F0;
}
.marker5 {
background-color: #C0EBA6;
}
a {
color: #3A6D8C;
}
article a {
font-size: 1.5em;
}
li p {
margin: 0.5em;
}
li {
margin-bottom: 2em;
}
aside h1, aside p {
color: #224f6b;
}
aside p {
margin-bottom: 0;
}
a:hover, a:focus {
text-decoration: underline;
background-color: yellow;
color: black;
}
img {
margin-bottom: 1em;
}
@media (max-width: 768px) {
main {
grid-template-columns: 1fr;
}
aside {
border-right: none;
height: auto;
border-bottom: 0.1em lightgrey solid;
padding: 1em;
justify-content: flex-start;
align-items: flex-start;
}
article {
margin-left: 0;
padding: 1em;
display: block;
}
}