/* ========================================
   PINK THEME
   ======================================== */

body {
    background-image: url('https://suxx.neocities.org/16a07a82.jpg');
    background-attachment: fixed;
    color: #696969;
    font-family: Arial, sans-serif;
    margin-top: 15px;
}

.a {
  display: inline-block;
  text-decoration: none;
  color: #111;
  transition: transform 0.25s ease,
              text-shadow 0.25s ease;
}
.a:hover {
  transform: translateY(-3px);
  text-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}


/* ========================================
   MAIN SITE
   ======================================== */

.site {
    width: 1200px;
    margin: 0 auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.site-background {
    background-image: url('https://suxx.neocities.org/logok/graphpaper3.png');
    text-align: center;
    vertical-align: middle;
    padding: 10px;
}    

.site-inner {
    width: 1035px;
    height: 815px;
    margin: auto;
    padding-bottom: 0px;
    border: 30px solid transparent;
    border-image: url('/logok/whitelace.png') 30 round;
}


/* ========================================
   TOP MARQUEE
   ======================================== */

.top-banner {
    width: 1035px;
    height: 65px;
    text-align: left;
    vertical-align: top;
    background-color: transparent;
}

.top-banner marquee {
    width: 1035px;
    height: 60px;
    padding-top: 0px;
    color: transparent;
    background-attachment: fixed;
}


/* ========================================
   THREE COLUMN LAYOUT
   ======================================== */

.main-layout {
    display: grid;
    grid-template-columns: 227px 1fr 227px;
    align-items: stretch;
    gap: 2px;
}

.sidebar,
.content,
.right-sidebar {
    background-color: white;
}

.sidebar {
    text-align: left;
    vertical-align: top;
    background-color: white;
}

.content {
    text-align: center;
    vertical-align: top;
    background-color: white;
    height: auto;
}

.right-sidebar {
    vertical-align: top;
    background-color: white;
}

.footer {
    background-color: white;
    text-align: center;
    vertical-align: middle;
    color: #696969;
    display: grid;
    grid-template-columns: 227px 1fr 227px;
    height: 35px;
    width: auto;
    gap: 2px;
}

.footer-left {
    text-align: center;
    vertical-align: middle;
}

.footer-middle {
    text-align: center;
    vertical-align: middle;
}

.footer-right {
    text-align: center;
    vertical-align: middle;
}


/* ========================================
   NAVIGATION
   ======================================== */

.urbangreymenu {
    width: 226px;
}

.urbangreymenu .headerbar {
    font: bold 16px Pixelmix;
    color: #ffb8db;
    background: transparent;
    margin-bottom: 0;
    text-transform: uppercase;
    padding: 7px 0 7px 31px;
}

.urbangreymenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.urbangreymenu ul li {
    padding-bottom: 2px;
}

.urbangreymenu ul li a {
    font: normal 11px Pixelmix;
    color: white;
    background: #ffb8db;
    display: block;
    padding: 5px 0 5px 8px;
    line-height: 17px;
    text-decoration: none;
}

.urbangreymenu ul li a:visited {
    color: white;
}

.urbangreymenu ul li a:hover {
    color: pink;
    background: white;
}


/* ========================================
   UPDATES BOX
   ======================================== */

.updates-box {
    width: 225px;
    height: 247px;
    background-image: url('https://suxx.neocities.org/logok/frame3.png');
    background-repeat: no-repeat;
    vertical-align: middle;
    text-align: left;
    margin-top: 0px;
    font-size: 14px;
    padding-top: 30px;
}

.updates-scroll {
    overflow: scroll;
    width: 165px;
    height: 155px;
    padding: 25px;
    background-color: transparent;
}

/* ========================================
   MAIN CONTENT SCROLL
   ======================================== */

.content-scroll {
    overflow: scroll;
    width: 538px;
    height: 500px;
    background-color: transparent;
    margin: 0 auto;
}

.content-text {
    color: #808080;
    text-align: justify;
}


/* ========================================
   SITE INFORMATION
   ======================================== */

.site-info {
    margin-left: 40px;
    text-align: left;
    color: #696969;
    font-size: 14px;
}

/* ========================================
   DECORATIVE ELEMENTS
   ======================================== */

.decorative-line {
    width: 222px;
    height: 19px;
}

.guestbook {
    text-align: center;
}

.center-image {
    text-align: center;
}


/* ========================================
   DARK MODE
   ======================================== */

/*
   This section is deliberately empty for now.

   Once the pink version is working, we will
   override the pink/white colours here without
   changing the HTML structure.
*/

body.dark-mode {
    /* dark body will go here */
}

body.dark-mode .sidebar,
body.dark-mode .content,
body.dark-mode .right-sidebar,
body.dark-mode .footer,
body.dark-mode .footer-left,
body.dark-mode .footer-middle,
body.dark-mode .footer-right {
    /* dark backgrounds will go here */
}