/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* ===========================================
   JARBOE.CSS
   Main Website Styles
=========================================== */

*



{
  
margin:0;
padding:0;
box-sizing:border-box;
}

body{

background:
#193225

url("backgrounds/bg.png")

repeat

fixed;

color:#f2f2e8;

font-family:Verdana,Arial,sans-serif;

font-size:14px;

line-height:1.6;

}

/* ===========================================
   COLORS
=========================================== */

:root{

--bg:#193225;
--container:#26452f;
--header:#183020;

--box:#35563d;
--box-dark:#304d38;

--border:#64896d;
--border-dark:#101d14;

--text:#f2f2e8;
--text-light:#efffd9;

--accent:#b8e986;

}

/* ===========================================
  NAV
=========================================== */

nav{

background:#2d5338;

border-top:2px solid #54785a;

border-bottom:2px solid #54785a;

}

nav ul{

list-style:none;

display:flex;

flex-wrap:wrap;

justify-content:center;

}

nav li{

margin:8px;

}

nav a{

display:block;

padding:8px 18px;

background:#3b6544;

border:2px solid #5d8765;

color:white;

font-size:13px;

}

nav a:hover{

background:#537e5a;

transform:translateY(-2px);

}

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

a{

color:#b8e986;

text-decoration:none;

font-weight:bold;

transition:.2s;

}

a:hover{

color:#ffffff;

text-shadow:0 0 6px #95ff95;

}

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

#container{

max-width:1180px;

width:95%;

margin:30px auto;

background:#26452f;

border:4px solid #101d14;

box-shadow:0 0 25px rgba(0,0,0,.6);

}

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

header{

background:#183020;

padding:15px;

border-bottom:3px solid #3e6646;

}

.banner img{

display:block;

width:100%;

height:auto;

border:3px solid #506f57;

}

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

.layout{

display:grid;

grid-template-columns:240px minmax(0,1fr) 220px;

gap:20px;

padding:20px;

align-items:start;

}

/* ===========================================
   SIDEBARS
=========================================== */

.left-column,
.right-column{

display:flex;

flex-direction:column;

gap:18px;

}

/* ===========================================
   CENTER COLUMN
=========================================== */

.center-column{

display:flex;

flex-direction:column;

gap:18px;

}

/* ===========================================
   BOXES
=========================================== */

.box{

background:linear-gradient(to bottom,#3b5d45,#35563d);

border:2px solid #64896d;

padding:14px;

box-shadow:
3px 3px 0 rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.08);

border-radius:4px;

}

.box h2{

font-size:18px;

margin-bottom:10px;

color:#dfffc8;

border-bottom:1px solid #54785a;

padding-bottom:6px;

}

.box h3{

margin-top:10px;

margin-bottom:8px;

color:#ffffff;

}

.box p{

margin-bottom:10px;

}

.box ul{

margin-left:18px;

}

.box li{

margin-bottom:6px;

}

/* ===========================================
   PROFILE IMAGE
=========================================== */

.profile img{

width:100%;

border:2px solid #6b976f;

margin-bottom:10px;

}

/* ===========================================
   CONTENT IMAGES
=========================================== */

.featured-image img{

width:100%;

display:block;

border:2px solid #6a8c70;

margin-top:10px;

}

.gallery-preview{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:10px;

margin-top:10px;

}

.gallery-preview img{

width:100%;

display:block;

border:2px solid #5f8265;

transition:.25s;

cursor:pointer;

}

.gallery-preview img:hover{

transform:scale(1.03);

border-color:#d8ffbe;

}

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

.button-wall{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:8px;

margin-top:10px;

}

.button-wall img{

width:88px;

height:31px;

image-rendering:auto;

transition:.2s;

}

.button-wall img:hover{

transform:scale(1.08);

}

.button-wall{

background:#17281c;

padding:12px;

border:3px inset #6f8c70;

}

/* ===========================================
   BLINKIES
=========================================== */

.blinkie-wall{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    margin-top:10px;
    background:#15261a;
    padding:10px;
    border:2px inset #78966f;
}

.blinkie-wall img{
    display:block;
    height:30px !important;
    width:auto !important;
    max-width:none;
    flex:none;
}

.blinkies-cafe{

height:auto;
width:175px;
display:inline-block;
margin:auto;

}

.blinkie-wall img:last-child{
    width:205px !important;
    height:auto !important;
}

/* ===========================================
   STAMPS
=========================================== */

.stamp-wall{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:8px;

margin-top:10px;

}

.stamp-wall img{

width:99px;

height:56px;

transition:.2s;

}

.stamp-wall img:hover{

transform:translateY(-2px);

}

.stamp-ribbon{
    overflow: hidden;
    width: 100%;
    background: #15261a;
    border: 3px inset #78966f;
    padding: 10px 0;
}

.stamp-track{
    display: flex;
    width: max-content;
    animation: scroll-stamps 12s linear infinite;
}

.stamp-track img{
    height: 56px;      /* Adjust as needed */
    width: 99px;
    margin-right: 12px;
    image-rendering: pixelated;
}

@keyframes scroll-stamps{
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-50%);
    }
}

background{
  color: red;
}

/* ===========================================
   SCROLL BOX
=========================================== */

.scroll-box{

max-height:170px;

overflow-y:auto;

padding:10px;

background:#294132;

border:1px solid #58745e;

}

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

textarea{

width:100%;

padding:8px;

background:#203227;

color:#f0f0e5;

border:1px solid #63866a;

font-family:monospace;

resize:none;

margin-top:10px;

}

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

.site-footer{

margin-top:20px;

background:#203227;

border-top:3px solid #58745e;

padding:20px;

}

.footer-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

}

.footer-box{

background:#35563d;

padding:15px;

border:2px solid #62886b;

}

.footer-box h2{

margin-bottom:10px;

font-size:18px;

}

.footer-buttons{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:8px;

margin:25px 0;

}

.footer-buttons img{

width:88px;

height:31px;

}

.copyright{

text-align:center;

font-size:12px;

color:#b7c8b5;

}

/* ===========================================
   WIDGETS
=========================================== */

.latest-post{

border-left:4px solid #8fd98f;

}

.welcome-box{

background:#31553c;

}

.updates-box ul{

list-style:square;

padding-left:20px;

}

.shoutbox{

max-height:180px;

overflow-y:auto;

background:#203227;

border:1px solid #5c7d63;

padding:10px;

}

.shoutbox p{

margin-bottom:8px;

}

.site-button{

display:block;

margin:15px auto;

max-width:100%;

}

/* ===========================================
   LISTS
=========================================== */

ol{

padding-left:22px;

}

ol li,
ul li{

margin-bottom:6px;

}

/* ===========================================
   HORIZONTAL RULE
=========================================== */

hr{

border:none;

border-top:1px solid #5e7f66;

margin:10px 0;

}

/* ===========================================
   DATE TEXT
=========================================== */

.date{

font-size:12px;

color:#b9d9b7;

font-style:italic;

margin-bottom:10px;

}

/* ===========================================
   SCROLLBAR (WebKit Browsers)
=========================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#203227;

}

::-webkit-scrollbar-thumb{

background:#537b5b;

border-radius:5px;

}

::-webkit-scrollbar-thumb:hover{

background:#79a37f;

}

/* ===========================================
   IMAGE EFFECTS
=========================================== */

img{

transition:.25s;

}

/* ===========================================
   SMALL HOVER EFFECTS
=========================================== */

.box{

transition:.2s ease;

}

.box:hover{

border-color:#d6ffb8;

box-shadow:
4px 4px 0 #101d14;

}

/* ===========================================
   PAGE TITLES
=========================================== */

.page-title{

background:#35563d;

border:2px solid #5f8567;

padding:18px;

margin-bottom:20px;

text-align:center;

}

.page-title h1{

font-size:34px;

letter-spacing:2px;

color:#f4ffe8;

margin-bottom:8px;

}

.page-title p{

color:#c8dfc5;

font-size:14px;

}

/* ===========================================
   PAGE CONTENT
=========================================== */

.page-content{

display:flex;

flex-direction:column;

gap:20px;

}

.content-box{

background:#35563d;

border:2px solid #5f8567;

padding:18px;

box-shadow:3px 3px 0 #1a271d;

}

.content-box h2{

margin-bottom:15px;

color:#efffd9;

border-bottom:1px solid #64886a;

padding-bottom:6px;

}

.content-box p{

margin-bottom:12px;

}

.content-box img{

display:block;

margin:auto;

border:2px solid #6b926f;

}

/* ===========================================
   BLOG POSTS
=========================================== */

.blog-post{

background:#304d38;

border:2px solid #65896d;

padding:20px;

margin-bottom:25px;

}

.blog-post h2{

font-size:26px;

margin-bottom:8px;

}

.blog-date{

font-size:12px;

color:#b8d7b4;

margin-bottom:15px;

}

.read-more{

display:inline-block;

margin-top:12px;

padding:8px 15px;

background:#45674d;

border:2px solid #62866a;

}

.read-more:hover{

background:#5f8868;

}

/* ===========================================
   GALLERY
=========================================== */

.gallery-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:18px;

}

.gallery-item{

background:#35563d;

border:2px solid #64896b;

padding:12px;

text-align:center;

}

.gallery-item img{

width:100%;

border:2px solid #7ea684;

margin-bottom:10px;

transition:.25s;

}

.gallery-item img:hover{

transform:scale(1.03);

}

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

.album{

display:flex;

gap:15px;

margin-bottom:20px;

background:#304d38;

border:2px solid #62876b;

padding:15px;

}

.album img{

width:120px;

height:120px;

object-fit:cover;

border:2px solid #86af8b;

}

.album-info{

flex:1;

}

.album-info h3{

margin-bottom:8px;

color:#efffd9;

}

/* ===========================================
   RETRO BUTTONS
=========================================== */

nav a{

background:linear-gradient(to bottom,#54785f,#35563d);

border-top:2px solid #8bb593;

border-left:2px solid #8bb593;

border-right:2px solid #1b2b20;

border-bottom:2px solid #1b2b20;

box-shadow:2px 2px 0 rgba(0,0,0,.35);

}

nav a:hover{

background:linear-gradient(to bottom,#6a9874,#43654b);

transform:translateY(-2px);

}

nav a:active{

transform:translateY(1px);

border-top:2px solid #1b2b20;

border-left:2px solid #1b2b20;

border-right:2px solid #8bb593;

border-bottom:2px solid #8bb593;

}

/* ===========================================
   SECTION HEADERS
=========================================== */

.box h2,
.footer-box h2,
.content-box h2{

background:linear-gradient(to bottom,#496c53,#294132);

color:#f4ffe8;

padding:9px;

margin:-14px -14px 14px -14px;

border-bottom:2px solid #5d8665;

text-align:center;

letter-spacing:1px;

font-size:17px;

text-shadow:1px 1px 0 rgba(0,0,0,.5);

}

/* ===========================================
   BOX HOVER
=========================================== */

.box:hover,
.content-box:hover{

border-color:#9fd39b;

box-shadow:0 0 12px rgba(180,255,180,.15);

}

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

.button-wall img,
.footer-buttons img,
.site-button{

image-rendering:auto;

transition:.2s;

}

.button-wall img:hover,
.blinkie-wall img:hover,
.footer-buttons img:hover,
.site-button:hover{

transform:scale(1.08);

filter:brightness(110%);

}

/* ===========================================
   POLAROID IMAGES
=========================================== */

.polaroid{

background:#f8f8f2;

padding:10px 10px 25px;

border:1px solid #999;

display:inline-block;

transform:rotate(-2deg);

box-shadow:4px 4px 10px rgba(0,0,0,.4);

}

.polaroid img{

display:block;

width:100%;

}

.polaroid p{

margin-top:10px;

color:#222;

text-align:center;

font-size:13px;

}

/* ===========================================
   STICKY NOTE
=========================================== */

.sticky{

background:#fff8a8;

color:#222;

padding:15px;

border:1px solid #d6c969;

transform:rotate(1deg);

box-shadow:3px 3px 6px rgba(0,0,0,.25);

}

/* ===========================================
   SMALL LABELS
=========================================== */

.label{

display:inline-block;

background:#45684c;

padding:4px 8px;

font-size:11px;

margin-right:6px;

border-radius:4px;

color:white;

}

/* ===========================================
   FORMS
=========================================== */

input,
textarea,
select{

width:100%;

padding:10px;

margin-top:8px;

margin-bottom:12px;

background:#22372a;

color:#f5f5ee;

border:2px solid #64896d;

font-family:Verdana,Arial,sans-serif;

font-size:14px;

}

input:focus,
textarea:focus,
select:focus{

outline:none;

border-color:#b8e986;

box-shadow:0 0 8px rgba(184,233,134,.35);

}

button{

background:#466b50;

color:white;

border:2px solid #6f9977;

padding:10px 18px;

cursor:pointer;

font-weight:bold;

transition:.2s;

}

button:hover{

background:#5b8664;

transform:translateY(-2px);

}

/* ===========================================
   TABLES
=========================================== */

table{

width:100%;

border-collapse:collapse;

margin:15px 0;

}

th{

background:#35563d;

color:#efffd9;

padding:10px;

border:2px solid #64896d;

}

td{

background:#2d4935;

padding:10px;

border:2px solid #64896d;

}

.calendar{

table-layout:fixed;

margin:0;

}

.calendar th,
.calendar td{

padding:4px;

font-size:12px;

width:14.28%;

}

/* ===========================================
   UTILITIES
=========================================== */

.center{

text-align:center;

}

.right{

text-align:right;

}

.left{

text-align:left;

}

.hidden{

display:none;

}

.space-top{

margin-top:20px;

}

.space-bottom{

margin-bottom:20px;

}

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

@media (max-width:1000px){

#container{

width:95%;

}

.layout{

grid-template-columns:1fr;

}

.left-column,
.center-column,
.right-column{

width:100%;

}

.footer-grid{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

}

nav ul{

flex-direction:column;

}

nav li{

margin:4px 0;

}

}

/* ===========================================
   GALLERY CAPTIONS
=========================================== */

.gallery-item p{

margin-top:10px;

font-size:13px;

text-align:center;

color:#dbe8d7;

}

.gallery-item{

transition:.25s;

}

.gallery-item:hover{

transform:translateY(-4px);

}

.polaroid{

margin:auto;

max-width:320px;

}

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

.guest-entry{

padding:12px;

background:#2f4d38;

border:2px solid #64896d;

margin-bottom:15px;

}

.guest-entry h3{

color:#eaffd8;

margin-bottom:5px;

}

.guest-entry p{

margin-bottom:8px;

}

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

.favorite-links{

list-style:none;

padding:0;

}

.favorite-links li{

padding:10px;

margin-bottom:10px;

background:#2f4d38;

border-left:5px solid #8bc48b;

transition:.2s;

}

.favorite-links li:hover{

transform:translateX(6px);

background:#3b5d45;

}

.favorite-links a{

color:#dfffc8;

}

/* ===========================================
   REVIEW CARDS
=========================================== */

.review-card{

display:flex;

gap:20px;

background:#304d38;

border:2px solid #64896d;

padding:18px;

margin-bottom:20px;

align-items:flex-start;

}

.review-card img{

width:150px;

border:2px solid #7da584;

}

.review-info{

flex:1;

}

.review-info h2{

margin-bottom:10px;

}

.review-info p{

margin-bottom:10px;

}

/*==========================================
EXTRAS SECTION
==========================================*/

.extras{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:15px;

margin-top:20px;

margin-bottom:20px;

}

.extras .box{

min-height:170px;

}

@media (max-width:900px){

.extras{

grid-template-columns:1fr;

}

}

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

.status-list{

list-style:none;

padding:0;

margin:0;

}

.status-list li{

padding:6px 0;

border-bottom:1px dashed #6d8d75;

}

.status-list li:last-child{

border:none;

}

.guestbook-container {
    background-color: #102b20;
    border: 3px dashed #7aa67a;
    padding: 20px;
    margin-top: 20px;
    text-align: center;
}

.guestbook-container h2 {
    font-family: "Comic Sans MS", cursive;
    color: #c8e6c9;
}

/*=========================================
RETRO
=========================================*/

a:hover{

cursor:pointer;

text-shadow:
0 0 5px #fff,
0 0 10px #b8e986;

}

.box p:not(:last-child){

border-bottom:1px dotted #739878;

padding-bottom:8px;

}

.gallery-preview img,
.profile img,
.featured-image img{

border:4px ridge #78966f;

padding:3px;

background:#101d14;

}

.counter-display{

background:black;

color:#5cff72;

font-family:"Courier New",monospace;

font-size:22px;

letter-spacing:4px;

padding:8px;

border:4px inset gray;

display:inline-block;

}

body{

cursor:url("images/profile/kon2_resized.png"), auto;

}

box:hover,
textarea:hover,
img:hover {
 cursor: url("images/profile/kon2_resized.png"), pointer;
}

/* Hover cursor */
a:hover,
li:hover,
button:hover,
input:hover,
select:hover {
    cursor: url("images/profile/kon1_resized.png"), pointer;
}

.link-button{

display:inline-block;

margin-top:15px;

max-width:100%;

}

.blinkie-ribbon{

overflow:hidden;

width:100%;

background:#15261a;

border:3px inset #78966f;

padding:10px 0;

}


.blinkie-track{

display:flex;

width:max-content;

animation:scroll-blinkies 20s linear infinite;

}


.blinkie-track img{

height:30px;

width:auto;

margin-right:10px;

}


@keyframes scroll-blinkies{

from{

transform:translateX(0);

}

to{

transform:translateX(-50%);

}

}

/* ==============================
   BLOGGER FEED
============================== */

#blog-container{
    display:flex;
    flex-direction:column;
    gap:25px;
}

#blog-container .blog-post{
    background:#304d38;
    border:2px solid #64896d;
    padding:20px;
    box-shadow:3px 3px 0 #1a271d;
}

#blog-container h2{
    color:#efffd9;
    font-family:Verdana, Arial, sans-serif;
    font-size:26px;
    margin-bottom:8px;
}

#blog-feed p,
#blog-feed li,
#blog-feed span,
#blog-feed div{
    font-family:Verdana, Arial, sans-serif;
    font-size:14px;
    color:#f2f2e8;
    line-height:1.6;
}

#blog-feed a{
    color:#b8e986;
}

#blog-feed a:hover{
    color:white;
}

#blog-feed .blog-post{

    background:#314f39;

    border:2px solid #6d9172;

    padding:22px;

    position:relative;

    box-shadow:
        4px 4px 0 #16241b;

}

#blog-feed .blog-post::before{

content:"📓";

position:absolute;

top:-12px;

left:15px;

background:#45684c;

padding:5px 10px;

border-radius:5px;

font-size:18px;

}

.newest-label{

display:inline-block;

background:#7ec67e;

color:#14311c;

padding:5px 14px;

font-weight:bold;

margin-bottom:15px;

border-radius:20px;

box-shadow:2px 2px 0 rgba(0,0,0,.3);

}

.blog-post{

transition:.25s;

}

.blog-post:hover{

transform:translateY(-4px);

border-color:#b8e986;

box-shadow:
0 0 15px rgba(184,233,134,.25);

}

.blog-date{

font-size:12px;

color:#a9d8a4;

font-style:italic;

margin-bottom:15px;

border-bottom:1px dashed #6b926f;

padding-bottom:8px;

}

.header-icon{
    width:16px;
    height:16px;
    vertical-align:middle;
    margin-right:6px;
    image-rendering:pixelated;
}

audio {
    width:100%;
    margin-top:10px;
}

/* ==============================
   RETRO MUSIC PLAYER
============================== */

.retro-player{

text-align:center;

}


.player-screen{

background:#101d14;

border:3px inset #64896d;

padding:12px;

margin-bottom:12px;

font-family:"Courier New", monospace;

color:#b8e986;

box-shadow:inset 0 0 10px #000;

}


.music-buttons{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:10px;
    
    height:50px;

}