/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
 *  HTML content. To learn how to do something, just try searching Google for questions like
 *  "how to change link color." */

body {
    background-color: lightgrey;
    /*background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%23ffffffff'/><path d='M10-6V6M10 14v12M26 10H14M6 10H-6'  stroke-linecap='square' stroke-width='5.5' stroke='%230000003c' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-10,0)' fill='url(%23a)'/></svg>");*/
    background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(1) rotate(15)'><rect x='0' y='0' width='100%' height='100%' fill='%23ffffffff'/><path d='M10-6V6M10 14v12M26 10H14M6 10H-6'  stroke-linejoin='round' stroke-linecap='round' stroke-width='7' stroke='%2390ee90ff' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
    color: black;
    font-family: Arial;
    padding: 0px;
    margin: 5px;
}

a {
    color: lightgreen;
    font-weight: bold;
}

ul ul {
    list-style-type: disc;
}

.header {
    background-color: white;
    text-align: center;
    padding: 10px;
    margin: 0px auto;
    width: 62.5%;
    box-shadow: 5px 5px 1px black;
}

.page {
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
}

.sidebar {
    width: 70%;
    background-color: white;
    margin: 20px auto;
    padding: 10px;
    border-radius: 0px;
    box-shadow: 5px 5px 1px black;
    h3 {
      text-align: center;
    }
}

.content {
    background-color: white;
    width: 80%;
    margin: 20px auto;
    padding: 20px;
    border-radius: 0px;
    box-shadow: 5px 5px 1px black;
    h2 {
      text-align: center;
    }
}

.footer {
    background-color: white;
    margin: 0px auto;
    margin-top: 10px;
    padding: 10px;
    width: 62.5%;
    box-shadow: 5px 5px 1px black;
    text-align: center;
}