html {
    background-image: url("stars.gif");
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    stext-shadow: 0 0 5px #c28dd8;
    color: white;
}

hide {
    visibility: hidden;
}
#princess-corner {
    position: fixed;
    bottom:0px;
    left:0px;
    color:red;
    display:inline-flex;
    font-size:6pt;
    padding-right: 10px;
        background-color: #9b53b096;
}
#header {
    display:flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 10px;
            background-color: #9b53b096;
}

a:link {
    color: #C7E8F3;
}

/* visited link */
a:visited {
    color: #C7E8F3;
}
#main-canvas {
    background-clip: content-box;
    width:100%;
    overflow:auto;
    display: flex;
    gap:10px;
}
#other-sites {
    width: fit-content;
    display: flex;
    flex-direction: column;
    background-color: #9b53b096;
    gap: 5px;
    padding: 10px;
    padding: 10px;
}
#other-sites a img {
    display: block;
}
.top-aligned {
    color: white;
    padding: 5px;
    border-bottom: 0px solid black;
    background-color: #9b53b096;
    text-align: left;
    padding-left: 10px;
    margin-bottom: 20px;
}

.bottom-aligned {
    color: black;
    padding: 5px;
    border-bottom: 0px solid black;
}

#bottom-images {
    text-align: center;
    padding: 0px;
    margin: 0px;
}


#center-div {
    max-width: 800px;
    overflow: hidden;
    margin: auto;

}

#content {
    background-color: #9b53b096;
    color: white;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 2px;
    padding-top: 1px;

}

#buttons {
    align-content: center;
    align-items: center;
    text-align: center;
}

#transring {
    align-content: center;
    align-items: center;
    text-align: center;
}

.inline {
    display: inline;
}
.rainbow-text {
    background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
    -webkit-background-clip: text;
    color: transparent;
}