/**********************
ratsickle.css // PROPERTY of skumster.net
***********************/

:root {
--header-image: url('https://ratsickle.com/img/stamp/ratline.jpg');
--bubbleheader: url('https://ratsickle.com/img/titles/bubbletitle.gif');
--longratheader: url('https://ratsickle.com/img/titles/longrat_rainbow.gif');

/* ...:::%%%%%%% colours %%%%%%%:::... */

/* greys, light -> dark */
--gris: #dddddd;
--mist: #adadad;
--ash: #888888;
--dim: #3b3b3b;

/* vibrants */
--red: #cc2200;
--mf: #FF0000;
--ez: #e15f00;
--h: #FABB00;
--pee: #FFFF00;
--spk: #11ff00;
--grn: #008C11;
--sky: #00EEFF;
--blu: #0000A0;
--fln: #042033;
--purp: #42005F;
--uv: #9600F0;
--chae: #FF69EE;
--rust: #4D311D;


}

body {
font-family: 'Courier', monospace;
font-size: 13px;
margin: auto;
background-color: white;
color: black;
width: 900px;
}

* {
box-sizing: border-box;
}


a {
color: var(--chae);
font-weight: bold;
text-decoration:none; 
}

a:hover{
text-decoration:line-through;
color: var(--sky);
font-weight: normal;
}

#header {
width: 100%;
height: 222px;

}

.rathead {
background-image: var(--header-image);
background-size: 100%;
background-repeat: no-repeat;
}

.bubblehead {
background-image: var(--bubbleheader);
background-size: 100%;
background-repeat: no-repeat;
}

.longhead {
background-image: var(--longratheader);
background-size: 100%;
background-repeat: no-repeat;
}

main {
width: 900px;
margin: auto;
}

main img {
width:100%;
}


.imghvr {
opacity: 1.0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
.imghvr:hover {
opacity: 0.55;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}

.pgimg {
width:100%;
border: 9px solid var(--ash);
padding: 10px;
margin: 10px auto;
}

.pgimg img{
display:block;
width: 88%;
padding: 9px;
margin: auto;
}

.flex {
display: flex;
flex-wrap: wrap;
width: 100%;
align-content: space-evenly;
justify-content: space-around;
align-items: baseline;
gap: 9px;
}

.box {
width:33%;
padding: 10px;
margin: auto;
}

.box1{
width:33%;
border: 3px solid var(--ash);
padding: 10px;
margin: auto;
}

.box2{
width:66%;
border: 3px solid var(--ash);
padding: 10px;
margin: 10px auto;
}

.leftCol {
order: 1;
width: 32%;
}

.centreCol {
order: 2;
width: 32%;
}

.rightCol {
order: 3;
width: 32%;
}

#navbar {
height: 40px;
background-color: var(--dred);
width: 100%;
}

#navbar ul {
display: flex;
padding: 0;
margin: 0;
list-style-type: none;
justify-content: space-evenly;
}

#navbar li {
padding-top: 15px;
}

#navbar li a {
color: var(--b2v);
font-weight: 800;
text-decoration: none;
}

#navbar li a:hover {
color: var(--agl);
text-decoration: underline;
}


footer {
width: 100%;
height: 40px;
padding: 10px;
margin-top:30px;
text-align: center;
font-size: 14px;
font-weight: bold;
}

body > h1,h2,h3,h4 {
color: var(--purp);
text-decoration: underline wavy var(--mf) 0.3px ;
text-underline-offset: 2px;
margin:9px;
}

h1 {
font-size: 41px;
}
h2{
font-size: 29px;
}
h3{
font-size: 20px;
}
h4 {
font-size: 15px;
}


strong {
color: var(--dw);
}


#flex {
display: flex;
gap:9px;align-content: space-evenly;
justify-content: space-around;
}


.closebox {
width:100%;
background-color: var(--mist);
border: 3px solid var(--ash);
padding: 10px;
margin: 10px auto;
}

.openbox {
width:100%;
background-color: none;
border: 3px solid var(--ash);
padding: 10px;
margin: 10px auto;
}

.pinblurb{
width:66%;
background-color: none;
border: 3px solid var(--ash);
padding: 10px;
margin: 10px auto;
}


/** CD page styling **/

.cdblurb{
width:88%;
background-color: none;
border: 3px solid var(--ash);
padding: 10px;
margin: 10px auto;
}

.cdtitle h1 {
margin:3px;
}
.cdtitle h2 {
margin:3px;
}
.cdtitle h3 {
margin:3px;
}
.cdtitle h4 {
margin:3px;
}

.cdtitle{
text-align:right;
}

.cdblurb img {
width:69%;
float:right;
margin:6px;
}



/* box colours ~ outlines (out) and backgrounds (in) */

.outX {
border: none;
}

.outC {
border: 3px solid var(--sky);
}
.inC {
background-color: var(--sky);
}

.outM {
border: 3px solid var(--chae);
}
.inM {
background-color: var(--chae);
}

.outY {
border: 3px solid var(--pee);
}
.inY {
background-color: var(--pee);
}

.outR {
border: 3px solid var(--red);
}
.inR {
background-color: var(--red);
}

.outB {
border: 3px solid var(--blu);
}
.inB {
background-color: var(--blu);
}

.outG {
border: 3px solid var(--grn);
}
.inG {
background-color: var(--grn);
}

.outK {
border: 3px solid black;
}
.inK {
background-color: black;
color: var(--gris);
}
.inK h1 {
color:var(--ash);
}
.inK h2 {
color:var(--ash);
}
.inK h3 {
color:var(--ash);
}
.inK h4 {
color:var(--ash);
}

.inASH{
background-color: var(--mist);
}
.outASH{
border: 3px solid var(--mist);
}

.outH {
border: 3px solid var(--h);
}
.inH {
background-color: var(--h);
}

.outSPK {
border: 3px solid var(--spk);
}
.inSPK {
background-color: var(--spk);
}

.outPR {
border: 3px solid var(--purp);
}
.inPR {
background-color: var(--purp);
}

.outUV {
border: 3px solid var(--uv);
}
.inUV {
background-color: var(--uv);
}

.outEZ {
border: 3px solid var(--ez);
}
.inEZ {
background-color: var(--ez);
}

.outFLN {
border: 3px solid var(--fln);
}
.inFLN {
background-color: var(--fln);
}

.outRUST {
border: 3px solid var(--rust);
}
.inRUST {
background-color: var(--rust);
}


.fuller {
padding: 10px;
margin:10px;
border:3px solid red;
border-left:none;
border-right:none;
}
.fullerbg {
padding: 10px;
margin:10px;
background-color: var(--red);
border:3px solid var(--mf);
}





/*############below are special Functions############*/



.clearfix:after {
  content: "";
  display: table;
  clear: both;
}



.bblcon{
display: none;
animation: fadeEffect 2s;
}
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}



.flipit {
  width: 280px;
  height: 250px;
  background-color: #fff;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flipINT {
  position: relative;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flipit:hover .flipINT {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flipfront, .flipback {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flipfront {
  background-color: var(--dw);
  color: black;
}

/* Style the back side */
.flipback {
  background-color: var(--agl);
  color: white;
  transform: rotateY(180deg);
}



    /* MEDIA QUERY */


    @media only screen and (max-width: 800px) {
        #flex {
            flex-wrap: wrap;
        }

        aside {
            width: 100%;
        }


    
        #header{

            height:123px;
        }
        #centreCol {
            order: 2;
        }

        #leftCol {
            order: 1;
            margin:0;
        }

        #rightCol {
            order: 3;
            margin:0;
        }

        #navbar ul {
            flex-wrap: wrap;
        }
    }