/* 
Let's set some variables baby!! 

:root {
    --name: value;
Use this format in the value: 
var(--name, value)
*/

:root {
    /* colors */
    --main-clr: #0e497d;
    --second-clr: #E95397;
    --main-bcg-clr: #F9DCE8;
    --second-bcg-clr: #ffebf4;
    --navii-clr: #fff;
    --navii-hover-clr: #8ECBF0;
    --post-bcg-clor: #f0f8ff; 


    /* fonts */
    --post-font: 'Queen Sansson', sans-serif;
    --post-size: 14px;
    --form-font-size: 12px;
    --header-font: 'KG Summer Sunshine';
    --header2-font: 'KG Summer Sunshine Blackout';
    --form-font: 'Courier New', Courier, monospace;
    --test-font: 'Adelia';
    --test-size: 75px;

    /* padding and margins */
    --form-padding: 2px;
    --form-margin: 2px;

    /* borders */
    --post-radius: 10px; 
    --text-radius: 5px;
}

/* FONTS CURRENTLY IN USE  */
@font-face {
  font-family: 'Pixelmania';
  src: url(https://rambodrex.com/fonts/Pixelmania.ttf);
}

@font-face {
  font-family: 'Icons South St';
  src: url(https://rambodrex.com/fonts/Icons%20South%20St.ttf);
}

@font-face {
  font-family: 'KG Summer Sunshine';
  src: url(https://rambodrex.com/fonts/KGSummerSunshine.ttf);
}

/* UNUSED FONTS  */

@font-face {
  font-family: 'Adelia';
  src: url(https://rambodrex.com/fonts/adelia.ttf);
}

@font-face {
  font-family: 'All Things';
  src: url(https://rambodrex.com/fonts/All%20Things%20Must%20Pass.ttf);
}

@font-face {
  font-family: 'Blackout';
  src: url(https://rambodrex.com/fonts/BLACKOUT.TTF);
}

@font-face {
  font-family: 'Digital Dark System';
  src: url(https://rambodrex.com/fonts/digital%20dark%20system.ttf);
}

@font-face {
  font-family: 'Impact Label Reversed';
  src: url(https://rambodrex.com/fonts/Impact%20Label%20Reversed.ttf);
}

@font-face {
  font-family: 'Impact Label';
  src: url(https://rambodrex.com/fonts/Impact%20Label.ttf);
}

@font-face {
  font-family: 'KG Defying Gravity';
  src: url(https://rambodrex.com/fonts/KGDefyingGravity.ttf);
}

@font-face {
  font-family: 'KG Defying Gravity Bounce';
  src: url(https://rambodrex.com/fonts/KGDefyingGravityBounce.ttf);
}

@font-face {
  font-family: 'KG Summer Sunshine Shadow';
  src: url(https://rambodrex.com/fonts/KGSummerSunshineShadow.ttf);
}

@font-face {
  font-family: 'KG Summer Sunshine Blackout';
  src: url(https://rambodrex.com/fonts/KGSummerSunshineBlackout.ttf);
}

@font-face {
  font-family: 'Platinum Sign';
  src: url(https://rambodrex.com/fonts/Platinum%20Sign.TTF);
}

@font-face {
  font-family: 'Pop Art';
  src: url(https://rambodrex.com/fonts/PopArt-Regular.ttf);
}

@font-face {
  font-family: 'Thick Stitch';
  src: url(https://rambodrex.com/fonts/Thick%20Stitch.ttf);
}

@font-face {
  font-family: 'Vaginoplasty Club';
  src: url(https://rambodrex.com/fonts/Vaginoplasty%20club.ttf);
}

@font-face {
  font-family: 'SKETCHUP';
  src: url(https://rambodrex.com/fonts/SKETCHUP.ttf);
}

body {
    background: url(images/bcg.png);
    background-color: var(--main-bcg-clr);
    color: var(--main-clr);
}

/* SCROLLBAR START */
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--main-bcg-clr); 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #b0daff; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #53A3E9; 
}
/* SCROLLBAR END  */

/* FORMS START  */
input {
    border: solid 1px var(--main-clr);
    background-color: var(--second-bcg-clr);
    color: var(--main-clr);
    font-size: var(--form-font-size);
    padding: var(--form-padding);
    margin: var(--form-margin);
    font-family: var(--form-font);

}

input[type="submit"] {
    font-weight: bold;
    cursor: pointer;   
}

select {
    font-family: var(--form-font);
    font-size: var(--form-font-size);
    padding: var(--form-padding);
    margin: var(--form-margin);
    border: solid 1px var(--main-clr);
}

textarea {
    background-color: var(--second-bcg-clr);
    color: var(--main-clr);
    width: 80%;
    font-size: var(--form-font-size);
    font-family: var(--form-font);
}

button {
    background-color: var(--main-clr);
    color: var(--second-bcg-clr);
    font-family: var(--form-font);
    cursor: pointer;
}

form {
    font-size: var(--post-size);
    font-family: var(--post-font);
}
/* FORMS END */

.sidebar {
    position: fixed;
    left: 30px;
    top: 15px;    
    width: 90px;
    color: var(--navii-clr);
}


.navii {
    font-family: 'Icons South St';
    text-align: center;
    border-radius: var(--text-radius);
    margin: 3px;
    padding: 2px;
    height: 30px;
    color: var(--navii-clr);
    background-color: var(--second-clr);
    font-size: 20px;
}

.navii a {
    color: var(--navii-clr);
    text-decoration: none;
}

.navii a:hover {
    background-color: var(--navii-hover-clr);
    text-transform: none;
}

.navii:hover {
    background-color: var(--navii-hover-clr);
}


#bawdy {    
    position: relative;
    justify-content: center;
    width: 75%;
    margin: 0 auto;
}

.header {
    text-align: center;
}

.header h1 {
    font-family: var(--header-font);
    text-transform: uppercase;
    font-size: 40px;
    color: var(--second-clr);
}

.border {
    background:url(./images/border.png);
    border-radius: var(--post-radius);
    padding: 2px 12px 2px 2px;
    margin: 10px; /* top right bottom left */
    width: 100%;
    align-items: center;
}

.post {
    border-radius: var(--post-radius);
    background-color: var(--post-bcg-clor);
    padding: 5px;
    margin: 1%;
    width: 98%;
    color: var(--main-clr);
    font-family: var(--post-font); 
    font-size: var(--post-size);
}

.post img {
    width: 100%;
    padding-top: 3px;
}

.post h1 {
    font-family: var(--header-font);
    padding: 1px;
    font-size: 16px;
    color: var(--second-clr);
    letter-spacing: normal;
    text-align: center;
}

.testfont {
    color: var(--second-clr);
}
.testfont h1 {
    font-family: var(--test-font);
    font-size: var(--test-size);
}

.post h2 {
    font-family: 'Longsile'; 
    border-radius: var(--text-radius);
    padding-top: 3px;
    padding-left: 3px;
    margin: 5px; /* top right bottom left */
    border: solid 1px var(--second-clr);
    background-color: var(--main-bcg-clr);
    font-size: 16px;
    color: var(--second-clr);
    letter-spacing: normal;
    text-align: center;
}

.post h3 {
    font-family: 'Hilsfiger', sans-serif;
    font-size: 12px;
    text-align: left;
    padding-top: 3px;
    padding-left: 3px;
    color: var(--main-clr);
}

.post li {
    list-style-position: inside;
    color: var(--main-clr);
}

.post p {
    padding: 5px;
    font-size: var(--post-size);
    font-family: var(--post-font); 
}

.post a {
    font-family: var(--post-font); 
    color: var(--second-clr);
    font-weight: 600;
    text-decoration: none;
}

.post a:hover {
    font-style: italic;
    font-weight: 800;
    border-bottom: dashed 1px var(--second-clr) ;
}

.post hr {
    color: var(--main-clr);
}
.tags {
    font-family: 'NeoSans Light TR', sans-serif; 
    font-size: 12px;
    text-align: right;
    padding: 2px;
    color: var(--main-clr);
}

.tags a {
    font-family: 'NeoSans Light TR', sans-serif; 
    color: var(--main-clr);
    font-weight: bold;
    text-decoration: none;
}

.tags a:hover {
    font-style: italic;
    font-weight: bold;
    border-bottom: dashed 1px var(--main-clr) ;
}

.date {
    font-family: 'TheGoodMonolith', sans-serif;
    font-size: var(--form-font-size);
    text-align: right;
    border-radius: var(--text-radius);
    padding: 3px;
    margin: 5px; /* top right bottom left */
    color: var(--second-clr);
    border: solid 1px var(--second-clr);
    background-color: var(--main-bcg-clr);
}