/* ==========================================
/* ==========================================
   FONT
========================================== */

body {
    font-family: "Basiic", sans-serif;
}

.logo {
    font-family: "Basiic", sans-serif !important;
}



/* ==========================================
   EVERYTHING
========================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    background: #C3F4F2;

    color: #704d28;

    font-family: "Basiic", sans-serif;

    font-size: 15px;

    line-height: 1.12;
}


/* ==========================================
   HEADER
========================================== */

.header {
    width: 960px;

    max-width: calc(100% - 30px);

    margin: 0 auto;

    text-align: center;

    padding-top: 58px;

    padding-bottom: 42px;
}


/* ==========================================
   LOGO
========================================== */

.logo {
    font-family: "retrogression", sans-serif !important;

    font-size: 67px;

    letter-spacing: 3px;

    color: #278b5d;

    line-height: 1;

    margin-bottom: 22px;

    transform: scaleY(1.05);
}


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

.nav {
    display: flex;

    justify-content: center;

    align-items: flex-start;

    gap: 18px;

    position: relative;
}


/* NORMAL NAVIGATION LINKS */

.nav > a {
    color: #7b3f98;

    text-decoration: none;

    font-family: "Basiic", sans-serif;

    font-size: 16px;

    line-height: 1.2;
}


/* ==========================================
   MAIN CONTAINER
========================================== */

.container {
    width: 960px;

    max-width: calc(100% - 30px);

    margin: 0 auto;

    display: grid;

    grid-template-columns: 300px 300px 190px;

    column-gap: 49px;

    align-items: start;
}


/* ==========================================
   LEFT COLUMN
========================================== */

.left {
    width: 300px;
}


/* ==========================================
   WELCOME IMAGE
========================================== */

.welcome-image {
    display: block;

    width: 300px;

    height: 207px;

    object-fit: cover;

    margin-bottom: 19px;
}


/* ==========================================
   HEADINGS
========================================== */

h2 {
    font-size: 22px;

    font-weight: normal;

    color: #e6007e;

    margin-top: 0;

    margin-bottom: 18px;

    line-height: 1;
}


/* ==========================================
   PARAGRAPHS
========================================== */

p {
    margin-top: 0;

    margin-bottom: 22px;

    line-height: 1.08;
}


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

a {
    color: #9561a7;
}

a:hover {
    color: #e6007e;
}


/* ==========================================
   MIDDLE
========================================== */

.middle {
    width: 300px;
}


/* ==========================================
   RIGHT NOW LIST
========================================== */

.middle ul {
    margin-top: 0;

    margin-bottom: 18px;

    padding-left: 18px;
}

.middle li {
    padding-left: 1px;

    margin-bottom: 6px;

    line-height: 1.05;
}


/* ==========================================
   MUSIC
========================================== */

.music {
    position: relative;

    width: 300px;

    height: 170px;

    overflow: hidden;

    margin-bottom: 20px;

    background: #111;
}

.music img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}

.music iframe {
    width: 100%;

    height: 100%;

    border: none;

    display: block;
}


/* ==========================================
   PLAY BUTTON
========================================== */

.youtube-play {
    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    width: 58px;

    height: 42px;

    border-radius: 11px;

    background: #ff0033;

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-family: Arial, sans-serif;

    font-size: 25px;

    padding-left: 3px;
}


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

.updates {
    padding-left: 18px;

    margin-top: 10px;
}

.updates li {
    margin-bottom: 5px;
}


/* ==========================================
   RIGHT SIDEBAR
========================================== */

.right {
    width: 190px;

    text-align: center;
}


/* ==========================================
   SIDEBAR HEADING
========================================== */

.right h2 {
    color: #26885b;

    font-size: 22px;

    margin-bottom: 18px;
}


/* ==========================================
   BUTTON
========================================== */

.button {
    width: 105px;

    height: auto;

    display: block;

    margin: 0 auto 9px;
}


/* ==========================================
   HOTLINKING
========================================== */

.hotlink {
    font-size: 13px;

    margin-bottom: 10px;
}


/* ==========================================
   CODE TEXTAREA
========================================== */

textarea {
    display: block;

    width: 190px;

    height: 70px;

    resize: none;

    overflow: auto;

    border: 1px solid #e0bfdc;

    background: white;

    color: #8b5785;

    font-family: monospace;

    font-size: 10px;

    padding: 3px;

    margin-bottom: 24px;
}


/* ==========================================
   GUESTBOOK
========================================== */

.guestbook {
    display: block;

    width: 170px;

    margin: 0 auto;

    padding: 8px 5px;

    border: 2px solid #8b52a4;

    color: #8b52a4;

    text-decoration: none;

    font-size: 17px;
}

.guestbook:hover {
    background: #8b52a4;

    color: white;
}


/* ==========================================
   DIVIDERS
========================================== */

.divider {
    width: 190px;

    border-top: 1px dotted #d8c4df;

    margin: 18px auto;
}


/* ==========================================
   STATUS
========================================== */

.status {
    width: 190px;

    border: 1px solid #d8c9e5;

    padding: 11px;

    text-align: left;
}

.date {
    color: #858585;

    margin-bottom: 12px;
}

.status-text {
    font-style: italic;

    line-height: 1.2;

    color: #76532c;
}


/* ==========================================
   STATUS LINK
========================================== */

.statuses {
    font-size: 12px;

    margin-top: 10px;

    margin-bottom: 18px;
}


/* ==========================================
   POKEMON
========================================== */

.right h3 {
    font-size: 16px;

    font-weight: normal;

    margin-top: 0;

    margin-bottom: 14px;

    color: #684a25;
}

.pokemon {
    display: block;

    max-width: 80px;

    max-height: 70px;

    width: auto;

    height: auto;

    margin: 0 auto 9px;
}

.generated {
    font-size: 12px;

    margin-bottom: 0;
}


/* ==========================================
   RANDOM BUTTONS
========================================== */

.random {
    max-width: 45px;

    max-height: 30px;

    width: auto;

    height: auto;
}

.sap {
    max-width: 105px;

    height: auto;
}


/* ==========================================
   SOCIAL LINKS
========================================== */

.social-links {
    width: 265px;

    margin: 10px auto 15px;

    text-align: center;
}

.social-link {
    display: block;

    width: 100%;

    margin: 5px 0;

    color: #9b5da5;

    font-family: "Cascadia Code", monospace;

    font-size: 13px;

    text-decoration: underline;
}

.social-link:hover {
    color: #d45c9e;
}

.social-icon {
    margin-right: 5px;
}

.social-link small {
    margin-left: 3px;
}


/* ==========================================
   VISITOR COUNTER
========================================== */

.visitor-counter {
    width: 265px;

    margin: 15px auto;

    text-align: center;

    color: #8b5b91;

    font-family: "Cascadia Code", monospace;

    font-size: 13px;

    line-height: 1.8;
}

#hitcount {
    color: #d45c9e;

    font-weight: bold;
}


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

footer {
    width: 960px;

    max-width: calc(100% - 30px);

    margin: 105px auto 25px;

    text-align: center;

    color: #80635b;

    font-size: 13px;

    line-height: 1.35;
}

footer a {
    color: #9362a7;

    text-decoration: none;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 850px) {

    .header {
        padding-top: 35px;
    }

    .logo {
        font-size: 50px;
    }

    .container {
        width: 650px;

        grid-template-columns: 300px 300px;

        column-gap: 40px;
    }

    .right {
        grid-column: 1 / 3;

        width: 300px;

        margin: 45px auto 0;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 680px) {

    .header {
        max-width: calc(100% - 30px);
    }

    .logo {
        font-size: 38px;
    }

    .nav {
        flex-wrap: wrap;

        gap: 9px 15px;
    }

    .container {
        width: 300px;

        display: block;
    }

    .left,
    .middle,
    .right {
        width: 300px;

        margin-left: auto;

        margin-right: auto;
    }

    .middle {
        margin-top: 45px;
    }

    .right {
        margin-top: 45px;
    }

    footer {
        margin-top: 70px;
    }
    
    /* ==========================================
   PERSONAL CLICK DROPDOWN
========================================== */

.nav-dropdown {
    position: relative;
    display: inline-block;
    font-family: "Basiic", sans-serif;
    font-size: 16px;
}


/* THE PERSONAL BUTTON */

.nav-dropdown summary {
    list-style: none;
    cursor: pointer;

    color: #7b3f98;

    line-height: 1.2;

    user-select: none;
}


/* REMOVE DEFAULT ARROW */

.nav-dropdown summary::-webkit-details-marker {
    display: none;
}

.nav-dropdown summary::marker {
    display: none;
}


/* HOVER */

.nav-dropdown summary:hover {
    color: #e6007e;
}


/* ================================
   PERSONAL DROPDOWN
================================ */

.nav-dropdown {
    position: relative;
    display: inline-block;
}


/* PERSONAL */

.nav-title {
    display: block;
    cursor: pointer;
}


/* DROPDOWN BOX */

.nav-menu {
    display: none;

    position: absolute;

    top: 100%;
    left: 50%;

    transform: translateX(-50%);

    width: 130px;

    padding: 5px 0;

    background: #c5f0ef;

    border: none;

    z-index: 1000;

    text-align: center;
}


/* SHOW DROPDOWN */

.nav-dropdown:hover .nav-menu {
    display: block;
}


/* EACH DROPDOWN LINK */

.nav-menu a {
    display: block;

    width: 100%;

    padding: 3px 0;

    color: #8054a0;

    text-decoration: none;

    white-space: nowrap;
}


/* HOVER */

.nav-menu a:hover {
    color: #e00078;
}


}