@import url('https://fonts.googleapis.com/css2?family=Forum&family=Oswald:wght@200..700&display=swap');

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

body {
    font-family: 'Forum', serif;
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
}

h1, h2, h3 {
    font-family: 'Oswald', sans-serif;
    margin-bottom: 20px;
    font-weight: 400;
}

.container {
    width: 100%;
    margin: auto;
    padding: 20px;
}

.nav-links {
    gap: 20px;
    padding: 10px;
    margin-bottom: 30px;
}

.nav-links ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

.nav-links a {
    text-decoration: none;
    color: #333;
    background-color: rgb(186, 209, 255);
    padding: 10px 15px;
    border: 2px solid rgb(168, 32, 118);
    border-radius: 60px;
}

.bulleted-list {
    margin-bottom: 30px;
}
.bulleted-list ul {
    list-style-image: url(../images/bullet.svg);
    padding-left: 20px;
}

.outline-list {
    margin-bottom: 30px;
}
.outline-list ol {
    list-style-type: upper-alpha;
    padding-left: 20px;
}
.outline-list ol ol {
    list-style-type: lower-roman;
    padding-left: 20px;
}
.link-buttons ul {
    list-style: none;
    gap: 20px;
    display: flex;
}

.b1 {
    color: rgb(14, 14, 162);
    transition: color 300ms ease-in-out;
}

.b1:hover {
    color: rgb(168, 32, 118);
}
.b2 {
    display: inline-block;
    background-color: rgb(186, 209, 255);
    color:rgb(168, 32, 118);
    border: 2px solid rgb(168, 32, 118);
    padding: 10px 15px;
    border-radius: 60px;
    text-decoration: none;
    transition: all 300ms ease-in-out;
}

.b2:hover {
    background-color: rgb(168, 32, 118);
    color: rgb(186, 209, 255);
    box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
}

.b3 {
    display: inline-block;
    background-color: transparent;
    color:rgb(53, 41, 120);
    border: 2px solid rgb(168, 32, 118);
    padding: 10px 15px;
    border-radius: 60px;
    text-decoration: none;
    transition: all 300ms ease-in-out;
}

.b3:hover {
    background-color: rgb(168, 32, 118);
    color: rgb(186, 209, 255);
    box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
}

.b4 {
    color: rgb(14, 14, 162);
    text-decoration: none;
    border-bottom: 2px dashed rgb(168, 32, 118);
    padding-bottom: 5px;
    transition: all 300ms ease-in-out;
}

.b4:hover {
    color: rgb(168, 32, 118);
    border-bottom: 2px dashed rgb(186, 209, 255);
}

.b5 {
    display: inline-block;
    background-color: rgb(186, 209, 255);
    color:rgb(168, 32, 118);
    border: 2px solid rgb(168, 32, 118);
    padding: 10px 15px;
    border: 2px solid rgb(168, 32, 118);
    border-radius: 60px;
    text-decoration: none;
    box-shadow: 3px 3px 5px rgba(45, 5, 69, 0.2);
    transition: box-shadow 300ms ease-in-out;
}

.b5:hover {
    box-shadow: 6px 6px 10px rgba(45, 5, 69, 0.4);
}