html {
  overflow-x: hidden;
  font-family: "Times New Roman";
}
html.font-alt {
  font-family: 'ComicSans';
}

/* https://stackoverflow.com/questions/25444657/how-to-achieve-this-bevel-button-in-css */
button {
    display: inline-block;
    color: black;
    text-shadow: 0 0 2px rgba(0,0,0,.3);
    font-family: 'Times New Roman';
    box-shadow:
        inset 0 0 2px 0 rgba(255,255,255,.4),
        inset 0 0 3px 0 rgba(0,0,0,.4),
        inset 0 0 3px 5px rgba(0,0,0,.05),
        2px 2px 4px 0 rgba(0,0,0,.25);
    border-radius: 4px;
    padding: 5px 5px;;
    font-size: 15px;
    line-height: 14px;
}

a.bright {
  color: lightcyan;
}
a.bright:visited {
  color: lightcoral;
}

details {
  margin: 10px;
  border:2px solid white;
  color:white;
  background-size: 100% 100%;
  background-attachment: fixed;
}

details.dark-green {
  background-image: url("../assets/windows_vista_beta_74.jpg");
}
details.dark-green a {
  color:cyan;
}
details.dark-green a:visited {
  color:#FF67FF;
}

details.blender {
  border:2px solid turquoise;
  color:white;
  background-image: url("../assets/dell_40.jpg");
  background-size: 120%;
}
details.blender a {
  color:rgb(47, 47, 186);
}
details.dark-green a:visited {
  color:rgb(255, 131, 255);
}

details.dark-purple {
  border: 2px solid purple;
  background-image: url("../assets/windows_vista_beta_107.jpg");
}
details.dark-purple a {
  color:greenyellow;
}
details.dark-purple a:visited {
  color:orange;
}

details.dark-red {
  border: 2px solid red;
  background-image: url("../assets/dell_17.jpg");
}
details.dark-red a {
  color:greenyellow;
}
details.dark-red a:visited {
  color:orange;
}

h1, h2, h3 {
  text-decoration-line: underline;
  text-align: center;
}
h2, h3 {
  margin-bottom: 0px;
}

img {
  margin: 5px;
}
img.fancy {
  border: 1px solid white;
}

table {
    margin-left: auto;
    margin-right: auto;
}

table, th, tr {
    font-weight: lighter;
    border: 5px groove #51414F;
    border-collapse: collapse;
    text-align: left;
}

th, tr {
    padding: 4px;
}

/*
Source - https://stackoverflow.com/a/67968068
Posted by brc-dd, modified by community. See post 'Timeline' for change history
Retrieved 2026-05-19, License - CC BY-SA 4.0
*/

.wrapper {
  max-width: 100%;
  overflow: hidden;
  margin: 0 auto;
  border: 2px solid black;
  background-color: black;
}

.marquee {
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  color: white;
  animation: marquee 60s linear infinite;
}

.marquee p {
  display: inline-block;
}

@keyframes marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* end citation */

/* IDs */
#main-content {
  display: flex;
  flex-direction: row;
}

#everything-else {
  flex: 1;
}

#sidebar-container {
  background-image: url("../assets/dell_10.jpg");
  background-position-x: center;
  flex: 100% 100% 0;
  width: 24%;
  max-width: 200px;
  margin: 10px;
  margin-right: -1.5%;
  border: 4px solid black;
  border-right: #0000;
  justify-content: space-between;
}

#sidebar {
  flex-direction: column;
  font-weight: bold;
  color: greenyellow;
  margin: auto;
  top: 0;
  position: -webkit-sticky;
  position: sticky;
  padding: 4px;
  text-align: center;
}

#sidebar a {
  color: cyan;
}

#sidebar a:visited {
  color: magenta;
}

/* classes */

.center-image {
    padding: 2em;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.center-container {
  padding-top: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

.flanking-image {
  padding: 1px;
  margin: 1px;
  vertical-align: middle;
}

.flashing {
  text-shadow: 
    -1px -1px 0 #000;
}

.footer {
  border: 2px solid blue;
  margin-top: 10px;
  padding: 5px;
  padding-top: 0px;
  background-image: url("../assets/windows_xp_37.jpg");
  background-size: 100% 100%;
  background-attachment: fixed;
  color: white;
}

.tooltip {
    scale: 150%;
    visibility: hidden;
    width: 60px;
    height: 40px;
    background-image: url("../assets/copier.gif");
    background-repeat: no-repeat;
    background-position-y: 20px;
    background-position-x: 20px;
    color: black;
    font-weight: bold;
    padding: 5px;
    text-align: center;
    z-index: 1;
    position: absolute;
}

.warning {
    text-align: center;
    color: red;
    font-size: 1.5em;
    font-weight: bold;
}

.bg-image {
  /* background-image: linear-gradient(to bottom, powderblue, thistle); */
  background-image: url("../assets/windows_vista_beta_76.jpg");
  background-size: 100% 100%;
  background-attachment: fixed;
}