*{
    padding: 0;
    margin: 0;
    left: 0;
    box-sizing: border-box;
}


body{
    --width-header: 360px;
    --unit: 20px;
    font-family: 'Montserrat', sans-serif;
    --font-title: 'VG5000', 'Helvetica', sans-serif;
    font-size: 18px;
    --baseline: 28px;
    line-height: var(--baseline);
    --color-bg: #f7e6ff;
    --color-bg: #f2e6ff;
    --color-main: #c44dff;
}

h1, h2, h3{
    font-family: var(--font-title);
}

p, li {
    font-weight: 500;
}
/* HEADER */

header{
    width: var(--width-header);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    border-right: 1px solid var(--color-main);
    overflow-y: scroll;
    background-color: var(--color-bg);
    color: var(--color-main);
}

header h1{
    border-bottom: 1px solid var(--color-main);
    font-size: 1.6rem;
    line-height: calc(var(--baseline)*1.2);
    text-transform: uppercase;
    padding: calc(var(--unit)*0.5) var(--unit);
}

header nav{
    padding: var(--unit);
}

header nav h2{
    font-size: 1.3rem;
    text-transform: uppercase;
    margin-bottom: calc(var(--baseline)*1);
    margin-top: calc(var(--baseline)*1);
}

header ul{
    padding-left: calc(var(--unit)*0.75);
    margin-bottom: calc(var(--baseline)*2);
   
   
}

header li{
    margin-bottom: calc(var(--baseline)*0.5);
    
}

header li a {
    color: currentColor;
    text-decoration: none;
    border-bottom: 1px dotted black;
}

header li a:hover{
    border-bottom: 1px solid black;
}



/* MAIN */

main{
    margin-left: var(--width-header);
    padding: calc(var(--unit)*2);
}

main section {
    /* border-bottom: 1px solid #888; */
    padding-bottom: calc(var(--baseline)*1.5);
    margin-bottom: calc(var(--baseline)*2.5);
}

main section > h2 {
    font-size: 1.7rem;
    margin-top: calc(var(--baseline)*2.5);
    margin-bottom: calc(var(--baseline)*1);
    background-color: var(--color-bg);
    color: var(--color-main);
    padding: calc(var(--baseline)*0.5) var(--unit);
    border: 1px solid var(--color-main);
}

main section h3{
    font-size: 1.3rem;
    margin-top: calc(var(--baseline)*2);
    margin-bottom: calc(var(--baseline)*0.75);
}

main section ul {
    list-style-type: "➺ ";
    margin-left: calc(var(--unit)*2);
}

main section ul li{
    margin-bottom: calc(var(--baseline)*0.25);
}

main section a{
    color: var(--color-main);
}