@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');

html {
    background-color:rgba(0, 25, 138, 0.712)
}

.container {
    margin: auto;
    max-width: 1024px;
    border: 4px solid rgb(23, 34, 83);
    padding: 0 20px 40px;
    background-color:rgb(110, 131, 212);
}

::selection {
    color:rgb(5, 61, 114);
    background:rgb(141, 173, 209);
}

img {
    max-width: 100%;
    border:3px solid rgb(58, 89, 155);
    margin: 5px;
}

h1 {
    font-family: 'Fjalla One', sans-serif;
    font-size: 3em;
}

h2 {
    font-family: 'Fjalla One', sans-serif;
    font-size:1.7em;
}

h3 {
    font-family: 'Fjalla One', sans-serif;
    font-size: 1.5em;
}

p {
    font-family: Arial, Helvetica, sans-serif;
}

ul, ol {
    font-family: Arial, Helvetica, sans-serif;
    font-size:1.2em;
}

nav a {
    text-decoration: none;
}

nav li a:link, nav li a:visited {
    color: rgb(43, 43, 228)
}

nav li a:hover, nav li a:focus {
    color: lightblue;
}

nav ul {
    list-style-type: none;
}

nav li {
    display: inline-block;
    margin-right: 15px;
    font-size:larger;
    font-weight:bolder;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img.right {
    float: right;
    margin: 0 0 15px 15px;
}

img.left {
    float: left;
    margin: 0 15px 15px 0;
}

.bone-list {
    /* using png instead of gif because png better supports transparency, when converting to gif, result looked really bad */
    list-style-image: url(../images/bone-list.png);
    list-style-position: outside;
}

.split {
    border-top: 2px dotted rgb(23, 34, 83);
}

footer {
    border: 2px solid rgb(23, 34, 83);
    padding-inline-start: 6px;
    background-color:rgb(70, 97, 207);
    text-align:center;
    margin: 0 310px;
}