a {
    color: #509acf;
    font-weight: bold;
    text-decoration: none;
}

a:hover {
    color: #2d38a5;
    cursor: url(../images/raspby-cursor-pointer.png), pointer;
}

#maincontentbg {
    background-color:rgba(245, 243, 242, 0.8);
    margin-top: 0;
    border: solid thick #bddff4;
    box-shadow: 0 0 8px 8px #f5f3f2 inset;
    margin: 8px;
}

body {
    background-color: skyblue;
    background-image: linear-gradient(to bottom right, transparent 40%, red, orange, yellow, green, blue, purple, transparent 60%)
    , url(../images/clouds.jpg);
    background-blend-mode: overlay, normal;
    background-position: center;
    background-size: auto, cover;
    background-repeat: no-repeat;
    backdrop-filter: blur(8px) saturate(80%);
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Shantell Sans', cursive;
    cursor: url(../images/raspby-cursor-default.png), default;
}

aside {
    margin: 16px;
}

.captionedfig {
    margin: 16px auto;
    width: fit-content;
}

.captionedfig img {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.captionlessfig {
    margin: auto;
    width: fit-content;
}

.transfig {
    margin: 16px auto;
    width: fit-content;
}

.transfig figcaption {
    border-radius: 4px;
}

figcaption {
    text-align: center;
    background-color: lightgray;
    overflow-wrap: break-word;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 16px;
    box-sizing: border-box;
}

#cursorcaption {
    max-width: 600px;
}

.floating {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 16px); }
    100%   { transform: translate(0, -0px); } 
}

footer {
    background-color:rgba(189, 223, 244, 0.8);
    color: black;
    width: 100%;
    font-family: sans-serif;
    font-weight: bold;
    text-align: center;
    margin-top: auto;
}

#h1bg {
    background-color: #d3eaf8;
    background-image:
      linear-gradient(45deg, #bddff4 25%, transparent 25%), 
      linear-gradient(135deg, #bddff4 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #bddff4 75%),
      linear-gradient(135deg, transparent 75%, #bddff4 75%);
    background-size:24px 24px; /* Must be a square */
    background-position:0 0, 12px 0, 12px -12px, 0px 12px; /* Must be half of one side of the square */
    text-align: center;
    border-bottom: solid thick;
    border-image: linear-gradient(to right, #bddff4, #f4eebd, #bddff4);
    border-image-slice: 1;
}

#h1bg h1 {
    margin: 0;
    margin-bottom: 16px;
    padding-top: 12px;
    color: white;
    text-shadow: 2px 2px 2px gray;
}

header {
    background-color: rgba(189, 223, 244, 0.8);
}

header a {
    float: left;
    color: black;
    text-align: center;
    padding: 16px;
    margin: 8px;
    text-decoration: none;
    font-family: sans-serif;
    font-weight: bold;
    line-height: 16px;
    border-radius: 4px;
}

header a:hover {
    background-color: lightcyan;
    color: black;
    
}

header a.active {
    background-color: cornflowerblue;
    color: white;
}

#headerdiv {
    max-width: 1440px;
    margin: auto;
}

header nav {
    float: right;
}

@media screen and (max-width: 850px) {
    header a {
        float: none;
        display: block;
        text-align: left;
    }
    header nav {
        float: none;
    }
}

hr {
    border: none;
    border-top: 32px dotted lightgoldenrodyellow;
    border-image: url(../images/hr.png) 32 space;
    margin: 32px;
}

ul, dl, ol {
    max-width: fit-content;
}

ul li::marker {
    color: skyblue;
}

li, dd {
    border-bottom: solid thin lightsteelblue;
    margin-bottom: 8px;
}

table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}

td {
    padding-left: 8px;
    padding-right: 8px;
}

tr:nth-child(even) {
    background-color: lightgray;
}

main {
    margin: auto;
    margin-top: 24px;
    margin-bottom: 24px;
    max-width: 1440px;
}

.shadow {
    border: solid thick #fbf1e6;
    border-radius: 24px;
    box-shadow: 0 4px #fbf1e6;
}

.flex {
    display: flex;
    flex-wrap:wrap;
}

.flex div {
    flex-grow: 1;
}

.sociallinks {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    margin: 24px;
}

.sociallinks div {
    background-color: white;
    width: 128px;
    height: 128px;
    margin: 16px;
    align-content: center;
    border-radius: 4px;
    flex-grow: 1;

}

.sociallinks div a {
    color: white;
    text-shadow: 2px 2px 2px gray;
}

.sociallinks div a:hover {
    opacity: 0.5;
}

.imgscale {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    font-style: italic;
}

.whiteblobbg {
    background-color: white;
    border-radius: 8px;
    margin: 16px;
    padding: 16px 32px;
    line-height: 2;
}

.whitecloudbg {
    background-color: white;
    padding: 48px;
    line-height: 2;
    --mask:
        radial-gradient(56.36px at 50% 78.4px,#000 99%,#0000 101%) calc(50% - 64px) 0/128px 51% repeat-x,
        radial-gradient(56.36px at 50% -46.4px,#0000 99%,#000 101%) 50% 32px/128px calc(51% - 32px) repeat-x,
        radial-gradient(56.36px at 50% calc(100% - 78.4px),#000 99%,#0000 101%) 50% 100%/128px 51% repeat-x,
        radial-gradient(56.36px at 50% calc(100% + 46.4px),#0000 99%,#000 101%) calc(50% - 64px) calc(100% - 32px)/128px calc(51% - 32px) repeat-x;
    -webkit-mask: var(--mask);
        mask: var(--mask);
}

.whitecloudtopbg {
    background-color: white;
    padding: 48px;
    line-height: 2;
    --mask:
        radial-gradient(56.36px at 50% 78.4px,#000 99%,#0000 101%) calc(50% - 64px) 0/128px 100%,
        radial-gradient(56.36px at 50% -46.4px,#0000 99%,#000 101%) 50% 32px/128px 100% repeat-x;
    -webkit-mask: var(--mask);
        mask: var(--mask);
}

#bluesky {
    background-color: powderblue;
}

#mal {
    background-color: lightsteelblue;
}

#twitch {
    background-color: lavender;
}

#twitter {
    background-color: lightblue;
}

#youtube {
    background-color: mistyrose;
}