/* =====================================================
   BLAK RAINBOW STUDIO & GALLERY
   Main Stylesheet
===================================================== */


/* =====================================================
   GENERAL
===================================================== */

body {
    margin: 0;
    background-image: url("rainbowave.jpg");
    background-repeat: repeat;
    font-family: Verdana, Arial, sans-serif;
    color: white;
}

#wrapper {
    width: 1000px;
    margin: 0 auto;
}


/* =====================================================
   FLOATING DOLL
===================================================== */

.doll {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
}


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

header {
    text-align: center;
    padding: 20px;
}

header img {
    max-width: 700px;
    width: 100%;
    height: auto;
}


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

nav {
    background-image: url("bgstripes3.gif");
    background-repeat: repeat;
    padding: 15px;
    text-align: center;
    border: 3px solid white;
}

nav a {

    display: inline-block;

    background: #222;

    color: #00ffff;

    border: 3px outset #aaa;

    padding: 8px 18px;

    margin: 0 5px;

    text-decoration: none;

    text-transform: uppercase;

    font-family: Verdana, sans-serif;

}

nav a:hover {

    background: #00ffff;

    color: black;

}


/* =====================================================
   PAGE LAYOUT
===================================================== */

#container {

    display: flex;

    gap: 20px;

    align-items: flex-start;

}

aside {

    width: 220px;

    flex-shrink: 0;

    background-image: url("space2.gif");

    background-repeat: repeat;

    border: 4px solid #6e4a2f;

    padding: 15px;

    color: white;

}

main {

    flex: 1;

    background: rgba(20,20,20,.9);

    border: 4px solid #6e4a2f;

    padding: 20px;

    color: white;

}


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

h1 {

    color: gold;

    font-size: 48px;

    text-align: center;

}

h2 {

    color: gold;

}

h3 {

    color: #d4af37;

}


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

.socials {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 15px;

}

.socials a {

    display: block;

    padding: 10px;

    text-decoration: none;

    color: white;

    background: rgba(255,255,255,.08);

    border: 1px solid #8bd3ff;

    border-radius: 8px;

    font-weight: bold;

    transition: .3s;

}

.socials a:hover {

    background: #8bd3ff;

    color: black;

    transform: translateX(5px);

}


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

.visitor-counter {

    margin-top: 40px;

    text-align: center;

    padding: 15px;

    border: 2px solid gold;

    border-radius: 10px;

    background: rgba(255,255,255,.05);

}


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

#HCB_comment_box {

    margin-top: 20px;

}

#HCB_comment_box textarea {

    background: #111;

    color: white;

    border: 2px solid gold;

}

#HCB_comment_box input {

    background: #111;

    color: white;

    border: 1px solid gold;

}

#HCB_comment_box .hcb-comment-body {

    color: white;

}


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

.gallery-links {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 20px;

    margin-top: 30px;

}

.album {

    width: 220px;

    padding: 20px;

    text-align: center;

    text-decoration: none;

    color: white;

    background: rgba(255,255,255,.08);

    border: 2px solid gold;

    border-radius: 10px;

    font-weight: bold;

    transition: .3s;

}

.album:hover {

    background: gold;

    color: black;

    transform: scale(1.05);

}


/* =====================================================
   LIBRARY
===================================================== */

.library-page {
    background-image: url("mlti009.jpg");
    background-repeat: repeat;
    background-position: top left;

}

.library-text {

    color: gold;

    font-size: 24px;

    text-align: center;

}

.bookshelf {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 25px;

    margin: 40px auto;

}

.book {

    width: 220px;

    min-height: 170px;

    padding: 20px;

    background: #4b2f1c;

    border: 3px solid gold;

    border-left: 10px solid #8b0000;

    border-radius: 10px;

    color: #ffe79a;

    text-decoration: none;

    text-align: center;

    font-family: "Trebuchet MS", Verdana, sans-serif;

    font-size: 28px;

    font-weight: bold;

    line-height: 1.5;

    transition: .3s;

    box-shadow: 0 0 12px rgba(255,215,0,.25);

}

.book strong {

    display: block;

    font-size: 22px;

    color: #fff6c2;

    margin: 10px 0;

}

.book small {

    display: block;

    font-size: 16px;

    color: #f0d78a;

    font-weight: normal;

}

.book:hover {

    transform: translateY(-10px) rotate(-2deg) scale(1.08);

    background: #6b4423;

    box-shadow: 0 0 25px gold;

}


/* =====================================================
   MANUSCRIPT
===================================================== */

.manuscript {

    max-width: 800px;

    margin: 40px auto;

    padding: 30px;

    background: rgba(0,0,0,.75);

    border: 2px solid #00ff66;

    color: #00ff66;

    font-family: "Courier New", monospace;

    line-height: 1.8;

    box-shadow: 0 0 15px #00ff66;

}

.manuscript h1 {

    color: #00ff66;

    letter-spacing: 4px;

}

.manuscript a {

    color: #00ff66;

}

.manuscript a:hover {

    color: white;

}


/* =====================================================
   ARCHIVE LINK
===================================================== */

.archive-link {

    display: inline-block;

    background: black;

    padding: 8px 15px;

    margin-top: 20px;

}

.archive-link a {

    color: transparent;

    text-decoration: none;

    letter-spacing: 2px;

    transition: .35s;

}

.archive-link:hover a {

    color: #00ff66;

}


/* =====================================================
   GIF WALL
===================================================== */

.gif-wall {

    display: grid;

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

    gap: 15px;

}

.gif-wall img {

    width: 100%;

}


/* =====================================================
   88x31 BUTTONS
===================================================== */

.buttons {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 8px;

    padding: 20px;

}

.buttons img {

    image-rendering: pixelated;

    transition: .2s;

}

.buttons img:hover {

    transform: scale(1.2);

}
footer {

    text-align: center;

    margin-top: 40px;

    padding: 15px;

    color: #cccccc;

    font-size: 14px;

    border-top: 1px solid #555;

}
/* ==========================================
   WII-MA-LI EXHIBITION
========================================== */

.wiimali-page{

    background-image:url("brck007.jpg");

    background-repeat:repeat;

}

/* Photo Grid */


/* Individual Photos */

.photo-gallery img{

    width:300px;

    border:6px solid #f5deb3;

    background:#111;

    padding:8px;

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

    transition:.3s;

}

/* Hover */

.photo-gallery img:hover{

    transform:scale(1.05);

    box-shadow:0 0 25px orange;

}
/* ==========================================
   ECHOES OF EARTH
========================================== */

.echoes-page{

    background-image:url("rock.jpg");

    background-repeat:repeat;

}
/* ==========================================
   PHOTO GALLERY
========================================== */

.photo-gallery{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:25px;

    margin:40px auto;

}

.photo-gallery img{

    width:320px;

    padding:10px;

    background:#f4f0e8;

    border:4px solid #3b2d20;

    box-shadow:8px 8px 18px rgba(0,0,0,.5);

    transition:.3s;

}

.photo-gallery img:hover{

    transform:scale(1.05);

}
/* ==========================================
   STUDIO COLLECTION
========================================== */

body.studio-page{

    background-image:url("space2.gif");

    background-repeat:repeat;

}

.gallery-intro{

    text-align:center;

    color:gold;

    font-size:26px;

    font-style:italic;

    margin-bottom:35px;

}

.page-links{

    margin-top:40px;

    text-align:center;

}

.page-links a{

    display:inline-block;

    margin:10px;

    padding:12px 20px;

    background:#222;

    color:#00ffff;

    border:2px solid white;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;

}

.page-links a:hover{

    background:#00ffff;

    color:black;

}
/* ==========================================
   PAST WORKS
========================================== */

body.pastworks-page{

    background-image:url("pistars-2.gif");

    background-repeat:repeat;

}
/* ==========================================
   EXHIBITION TITLES
========================================== */

.gallery-title{

    text-align:center;

    color:gold;

    font-size:52px;

    text-shadow:0 0 12px black;

}

.gallery-intro{

    max-width:900px;

    margin:20px auto 40px auto;

    text-align:center;

    color:#f7e3a2;

    font-size:24px;

    line-height:1.7;

}
/* ==========================================
   FIRST NATIONS
========================================== */

body.firstnations-page{

    background-image:url("background1.jpg");

    background-repeat:repeat;

}


/* ==========================================
   THEATRE
========================================== */

body.theatre-page{

    background-image:url("background1.jpg");

    background-repeat:repeat;

}


/* ==========================================
   DIGITAL WORK
========================================== */

body.digitalwork-page{

    background-image:url("background1.jpg");

    background-repeat:repeat;

}
/* ==========================================
   PALESTINE EXHIBITION
========================================== */

body.palestine-page{

    background-image:url("00005-tile.gif");

    background-repeat:repeat;

}
/* ==========================================
   STUDIO UPDATES
========================================== */

body.updates-page{

    background-image: url("design.gif");

    background-repeat: repeat;

}

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

body.updates-page {

    background-image: url("design.gif");
    background-repeat: repeat;

}



/* ==========================================
   CHAPTER 2
========================================== */

body.chapter2-page{

    background-image: url("002(8).gif");
    background-repeat: repeat;
    background-position: top left;

}
/* ==========================================
   CHAPTER 1
========================================== */

body.chapter1-page{

    background-image: url("wood014.jpg");
    background-repeat: repeat;

}
/* ==========================================
   ABOUT PAGE
========================================== */

body.about-page{

    background-image:url("bgrbow.gif");

    background-repeat:repeat;

    background-position:top left;

}

.about-images{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:30px;

    margin:35px 0;

}

.about-images img{

    width:100%;

    max-width:350px;

    height:auto;

    border:6px solid gold;

    padding:8px;

    background:#111;

    box-shadow:0 0 20px hotpink;

    transition:.3s;

}
.about-text{

    max-width:850px;

    margin:auto;

    font-size:20px;

    line-height:1.9;

}

.about-text strong{

    color:#ffd700;

}

.about-page h1{

    text-shadow:0 0 15px hotpink;

}
/* ==========================================
   ABOUT PAGE
========================================== */

body.about-page {

    background: url("rainbow.gif") repeat top left !important;

}

.about-images {

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin: 35px 0;

}

.about-images img {

    width: 100%;
    max-width: 300px;
    height: auto;

}

body{
background:url(images/stars.png);
background-size:cover;
background-attachment:fixed;

}
/* ===========================
   ARCADE PAGE
=========================== */

body {

    background-image: url("rainbowwave.jpg");
    background-repeat: repeat;
    background-attachment: fixed;

    color: white;

    font-family: Verdana, Geneva, Tahoma, sans-serif;

    margin: 0;
}
/* ===========================
   HEADER
=========================== */

header {

    width: 900px;

    margin: 40px auto;

    padding: 25px;

      background-image:
        linear-gradient(rgba(20,20,20,.65), rgba(20,20,20,.65)),
        url("rainbowwave.jpg");

    background-repeat: repeat;

    border: 4px solid #6e4a2f;

    text-align: center;

    box-sizing: border-box;

}

header h1 {

    font-size: 42px;

    margin-top: 0;

    margin-bottom: 10px;

    color: #ffdd55;

    text-shadow:

        2px 2px #000,

        0 0 10px gold;

}
header p {

    font-size: 18px;

    margin-bottom: 20px;

}
header nav {

    margin-top: 25px;

}
header nav a {

    display: inline-block;

    margin: 8px;

    padding: 12px 20px;

    background: #4b2d1c;

    color: white;

    text-decoration: none;

    border: 3px solid white;

    border-radius: 8px;

    font-weight: bold;

    transition: 0.3s;

}
header nav a:hover {

    background: #ff66cc;

    color: black;

    transform: scale(1.08);

}
/* ===========================
   WELCOME SECTION
=========================== */

.welcome {

    width: 900px;

    margin: 30px auto;

    padding: 25px;

    background: rgba(20,20,20,.9);

    border: 4px solid #6e4a2f;

    text-align: center;

    box-sizing: border-box;

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

}
.welcome h2 {

    color: #66ffff;

    font-size: 32px;

    margin-top: 0;

    text-shadow:
        2px 2px black,
        0 0 12px cyan;

}
.welcome p {

    font-size: 18px;

    line-height: 1.6;

    margin-bottom: 15px;

}
/* ===========================
   GAME SECTIONS
=========================== */

.games {

    width: 900px;

    margin: 30px auto;

}
.games h2 {

    color: #66ffff;

    font-size: 30px;

    text-shadow:
        2px 2px black,
        0 0 10px cyan;

    margin-bottom: 20px;

}
.game-grid {

    display: grid;

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

    gap: 20px;

}
.game-card {

    background: rgba(20,20,20,.90);

    border: 3px solid #6e4a2f;

    padding: 20px;

    text-align: center;

    border-radius: 12px;

    transition: .3s;

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

}
.game-card h3 {

    color: #ffdd55;

    font-size: 22px;

    margin-top: 0;

}
.game-card p {

    font-size: 16px;

    line-height: 1.5;

    margin-bottom: 20px;

}
.game-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 0 20px rgba(102,255,255,.5);

    border-color: #66ffff;

}
/* ===========================
   PLAY BUTTONS
=========================== */

.play-button {

    display: inline-block;

    padding: 12px 18px;

    background: #ff66cc;

    color: black;

    text-decoration: none;

    font-weight: bold;

    border: 3px solid white;

    border-radius: 8px;

    transition: 0.3s;
    
    box-shadow: 0 0 10px rgba(255, 102, 204, 0.4);

}
.play-button:hover {

    background: #66ffff;

    color: black;

    transform: scale(1.08);
    
    box-shadow: 0 0 18px rgba(102, 255, 255, 0.6);

}
/* ===========================
   RESPONSIVE DESIGN
=========================== */

@media (max-width: 950px) {

    header,
    .welcome,
    .games {

        width: 95%;

    }

    .game-grid {

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

    }
    
    @media (max-width: 600px) {

    .game-grid {

        grid-template-columns: 1fr;

    }

    header h1 {

        font-size: 32px;

    }

    .games h2,
    .welcome h2 {

        font-size: 26px;

    }

}

}