/* ==========================================
   THE CUTE CAVE (Full-Width Layout Fix)
   ========================================== */

body {

    cursor: url("cursor.cur"), auto;

    background-color: #ffcce6;
    background-image: 
        radial-gradient(#ffffff 3px, transparent 3px),
        radial-gradient(#ffffff 3px, transparent 3px);

    background-size: 40px 40px;
    background-position: 0 0, 20px 20px;
    
    color: #ff66a3; 

    font-family: "Courier New", Courier, monospace; 

    font-size: 14px;

    margin: 0;
    padding: 20px;
}

/* ==========================================
   GLOBAL CURSOR STUFF
   ========================================== */

a,
button,
.sidebar a,
img,
h1 {
    cursor: url("cursor.cur"), pointer;
}

.page {

    display: flex;

    gap: 25px;

    max-width: 1200px;

    margin: 20px auto;

    align-items: flex-start;
}

/* ==========================================
   CONTAINERS 
   ========================================== */

.sidebar,
.main {

    background-color: #fff0f5; 

    padding: 15px;

    border-radius: 0px; 
    
    border: 3px solid;

    border-image: linear-gradient(
        to bottom right,
        #ffb3ba,
        #ffdfba,
        #ffffba,
        #baffc9,
        #bae1ff,
        #dcb3ff
    ) 1;
}

.sidebar {
    width: 240px;
}

/* NO MORE SIDE EMPTINESS */
.main {

    flex: 1; 

    display: flex;

    flex-direction: column;

    gap: 15px; 
}

/* ==========================================
   TITLE BARS 
   ========================================== */

h1 {

    background: linear-gradient(
        to right,
        #ffb3ba,
        #ffdfba,
        #ffffba,
        #baffc9,
        #bae1ff,
        #dcb3ff
    );

    color: #ff3399; 

    font-family: 'Arial Black', Impact, sans-serif; 

    font-size: 20px;

    font-weight: bold;

    text-transform: uppercase;

    letter-spacing: 1px;
    
    padding: 8px 12px;

    margin-top: -15px;

    margin-left: -15px;

    margin-right: -15px;

    margin-bottom: 20px;
    
    display: flex;

    justify-content: space-between;

    align-items: center;

    border-bottom: 3px dotted #ffffff;
}

h1::before {

    content: "✧･ﾟ:* ";

    color: #ffffff;

    font-weight: normal;
}

h1::after {

    content: " (✿◠‿◠)"; 

    font-family: monospace;

    color: #ffffff;
}

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

.sidebar a {

    display: block;

    background-color: #ffffff;

    border: 2px dashed #ff99cc; 

    color: #ff66a3;

    text-decoration: none;

    font-weight: bold;

    text-transform: uppercase;

    padding: 10px;

    margin-bottom: 12px;

    text-align: center;
}

.sidebar a:hover {

    background-color: #ff99cc;

    color: #ffffff;

    border: 2px dashed #ffffff;
}

/* ==========================================
   CONTENT & TEXT ROWS
   ========================================== */

p {

    color: #ff66a3; 

    background-color: #ffffff;

    border: 2px dashed #ffb3ba;

    padding: 12px;

    margin: 5px 0; 

    line-height: 1.4;

    text-align: left;
}

.main img {

    border: 2px dashed #baffc9; 

    padding: 4px;

    background-color: #ffffff;

    max-width: 100%;

    height: auto;

    display: block;

    margin: 5px 0;
}

/* ==========================================
   FOOTER
   ========================================== */

.madeby {

    font-size: 11px;

    color: #ff99cc;

    text-align: right;

    margin-top: 15px;

    text-transform: lowercase;
}