html {
    background-color: #0A5788;
    color: whitesmoke;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    scroll-behavior: smooth;
}

body {
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    flex-shrink: 1;
}

span {
    font-weight: bold;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    color: greenyellow;
    line-height: 2rem;
    font-weight: lighter;
}

span:hover {
    color: limegreen;
}

li {
    list-style: none;
}

#title {
    color: gold;
}

.code-parents {
    display: flex;
    color: yellow;
    flex-direction: column;
    border: 5px groove greenyellow;
    border-radius: 5pt;
    background-color: #141421;
    max-width: 280px;
    padding: 1.5rem;
    line-height: 2rem;
    font-weight: lighter;
    max-width: 40ch;
}

.code-parents > * {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}


.container {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    height: 100vh;
    max-width: 720px;
    gap: 10px;
    min-width: 200px;
}

.container > * {
    background-color: #0A5784;
    border: 20px ridge greenyellow;
    border-radius: 2%;
}

hr {
    display: block;
    border-radius: 30px;
    border: dotted lightcyan 1px;
    height: 0px;
}


h1 {
    font-weight: 900;
}

h2 {
    color: darkkhaki;
}

h3 {
    color: white;
}

p {
    margin: 10px;
    max-width: 80ch;
    line-height: 3ch;
}

a {
    color: lightcoral;
}

a:hover {
    color: #f15152;
}

.css-route {
    display: flex;
    justify-content: center;
}

.javascript-route {
    display: flex;
    justify-content: center;
}

.dom-section {
    display: flex;
    justify-content: center;
}