common.css

/*
linuxsbc.github.io is a website that I use for my projects and my business.
Copyright (C) 2021 Benedict Simmons

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program. If not, see https://www.gnu.org/licenses/.
*/
body {
    padding: 0; /*If I didn't do these two lines, the header bar wouldn't work correctly. It wouldn't touch the edges.*/
    margin: 0;
    font-family: 'Roboto', serif; /*Another Material Design thing.*/
    font-weight: normal; /*Another Material Design thing.*/
    font-size: 16px; /*Another Material Design thing.*/
}
#heading {
    text-align: center;
    padding: 1px;
    box-shadow: 0 3px 5px #000000; /*This shadow allows for perceived depth in the website.*/
    position: sticky; /*Keeps it at the top of the screen while scrolling.*/
    top: -80px; /*Makes it so that the title hides itself while scrolling.*/
}
h1 {
    font-weight: normal;
    margin-top: 15px;
    margin-bottom: 0;
}
h2 {
    margin-left: 5px;
    font-weight: normal;
    font-size: 20px;
}
#subtitle {
    margin: 0;
}
.body-segment {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); /*This shadow allows for perceived depth in the website.*/
    border-radius: 5px; /*Rounded corners are a Material Design thing.*/
    padding: 5px;
    max-width: 500px;
    /*Center it*/
    margin: 1em auto;
}
.warning-body-segment {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); /*This shadow allows for perceived depth in the website.*/
    border-radius: 5px; /*Rounded corners are a Material Design thing.*/
    padding: 5px;
    max-width: 500px;
    /*Center it*/
    margin: 1em auto;
}
form {
    margin: 5px;
}
.pages {
    display: inline-block;
    margin-right: 1em;
}
.pages > a {
    text-decoration: none;
}
div > img {
    max-width: 48%; /*This whole thing is making the images look correct. They have rounded corners, are centered, have padding, and are the right size.*/
    max-height: 320px;
    border-radius: 5px;
    padding: 2px;
}
.example-images {
    text-align: center;
}
p {
    margin-left: 5px;
    margin-right: 5px;
}
table {
    margin: 1em auto;
    border-collapse: collapse;
    border: thin;
}
th {
    padding: 5px;
}
td {
    padding: 5px;
}
#modeSwitchButton {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: transparent;
    height: 36px;
    width: 36px;
    border: none;
    cursor: pointer;
    position: fixed; /*Make it stay in the same place while the rest of the navbar moves up*/
    right: 5px;
    top: 5px;
}