/* Navigation bar */
.navbar {
    font-size: 2.5rem;
    padding: 10px;
    margin-bottom: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: space-around;
    font-family: "Web7";
    border: ridge 5px;
    margin: auto;
}
a:link {
    color: #ffffff;
    text-decoration: none;
}
a:visited {
    color: #ffffff;
    text-decoration: none;
}
a:hover {
    color: #8000b2;
    text-decoration: none;
}
a:active {
    color: #ffffff;
}
/* Navigation Bar End */

/* Margins */
.margin {
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 30px;
    resize: auto;
    overflow: auto;
}
.margin2 {
    padding-top: 15px;
    padding-left: 100px;
    padding-right: 100px;
}
.margin3 {
    padding-top: 35px;
    padding-left: 100px;
    padding-right: 100px;
    font-family: "Web3";
}
/* End Margins */

.aboutmeindex {
    width: 50%;
    height: 100%;
    min-height: 100vh; /* ensures it fills the screen on small devices */
    box-sizing: content-box;
}



/* Body */
.body {
    background: url(/Backgrounds/greenbackground.svg);
    font-family: "Web4";
    color: white;
}
.photosbody {
    background: url(/Backgrounds/background245.jpg);
    font-family: "Web4";
    color: white;
}
.personalbody {
    color: white;
    background-image: url(https://files.catbox.moe/pwn2u4.png);
    background-size: 400px;
}
.mediabody {
    background-image: url(/Backgrounds/wavy.gif);
}
.aboutbody {
    background-image: url(/Backgrounds/cdback.gif);
}
.blogbody {
    background: url(/Backgrounds/motherboard.png) 300px 300px;
}
.musicbody {
    background-image: url(/Backgrounds/wavy.gif);
}
.artbody {
    background: url(Backgrounds/vhsbackground.gif);
}
.miscbody {
    background: url(Backgrounds/bluebackground.jpg);
}
/*  Body End */

/* Text */
.hometext {
    font-family: "Web3";
    margin: auto;
    display: flex;
    align-content: center;
    justify-content: center;
}
.hometext2 {
    align-content: center;
    margin: auto;
    float: left;
}
.hometext3 {
    font-family: "Web5";
    font-size: large;
    margin: 5px;
    align-content: center;
}
.mediatext {
    font-family: "Web5";
    font-size: large;
    margin: 5px;
    align-content: center;
}
.mediatext2 {
    font-family: "Web7";
    text-shadow: #8000b2 4px 4px 2px;
}
.abouttext {
    font-family: "Web8";
    color: white;
    padding: 5px;
}
.abouttext2 {
    font-family: "Web7";
    text-shadow: #000cb2 4px 4px 2px;
}
.blogtext {
    display: block;
    color: white;
    margin: auto;
    padding-top: 1em;
}
.personaltext {
    font-family: "Web";
}
.indextext {
    display: flex;
    justify-content: center;
    align-content: center;
}
.arttext {
    color: white;
    display: flex;
    justify-content: center;
    margin: auto;
}
/* End Text*/

/* Images */
.homeimg {
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    margin: auto;
}
.homeimg2 {
    align-items: center;
    display: block;
    margin: auto;
}
.image {
    width: auto;
    height: auto;
    vertical-align: auto;
    flex-wrap: wrap;
}
.aboutimg {
    height: auto;
    width: auto;
    display: flex;
    justify-content: center;
    margin: auto;
}
.blogimg {
    width: auto;
    height: auto;
    vertical-align: auto;
    flex-wrap: wrap;
}
.musicimg {
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    margin: auto;
}
.movieimg {
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    margin: auto;
}
.img {
    width: 500px;
}
.blinkies {
    height: auto;
    width: 80%;
    display: flex;
    justify-content: center;
    margin: auto;
    transition: scale .2s;
}
.blinkies:hover {
    scale: 1.5;
}
.art {
    width: 500px;
    border: ridge 5px;
}
/* Image End */

/*Containers*/
.container {
    display: flex;
    padding-top: 10px;
}
.container2 {
    display: flex;
}
.container3 {
    display: flex;
    padding-top: 10px;
}
.guidecontainer {
    display: flex;
    align-content: 3;
    justify-content: space-around;
    padding-top: 150px;
}
.guidecontainer2 {
    display: flex;
    justify-content: space-around;
    padding-top: 250px;
}
.photoscontainer {
    margin: auto;
}
.pixcontainer {
    margin: auto;
    padding: 25px;
    width: 50%;
}
.indexcontainer {
    display: flex;
    justify-content: center;
    align-content: center;
    margin: auto;
    width: 60%;
    text-align: center;
    height: auto;
    padding-bottom: 1px;
    padding-top: 1px;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    line-height: 2;
    font-family: "Web10";
    color: white;
    padding-left: 50px;
    padding-right: 50px;
    font-size: larger;
}
.artcontainer {
    display: flex;
    justify-content: center;
    align-content: center;
    margin: auto;
    padding: 10px;
}
/* End Containers*/

/* Left Side Pane */
.sidepane {
    background-color: rgba(0, 0, 255, 0.5);
    width: 25%;
    height: 100%;
    min-height: 100vh; /* ensures it fills the screen on small devices */
    padding: 2rem 1rem;
    box-sizing: content-box;
    font-family: Web3;
}
.sidepanea {
    width: 25%;
    text-align: center;
    display: flex;
    background-color: rgba(0, 0, 0, 0.7);
    height: auto;
    padding-bottom: 1px;
    padding-top: 1px;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    line-height: 2;
    font-family: "Web10";
    color: white;
    padding-left: 50px;
    padding-right: 50px;
    font-size: larger;
    margin-left: auto;
}
/* Left Side End */

/* Middle Pane */
.middlepane {
    background-color: rgba(0, 0, 0, 0.7);
    width: 70%;
    padding: 2rem 1rem;
    padding-top: 10px;
    box-sizing: content-box;
    font-family: Web3;
    margin: auto;
    padding-left: 50px;
    padding-right: 50px;
}
.middlepanep {
    color: white;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    text-align: center;
    display: block;
    background-color: rgb(0, 0, 0, 0.7);
    height: auto;
    padding-bottom: 1px;
    padding-top: 1px;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    box-sizing: border-box;
    line-height: 1.6;
    padding-left: 50px;
    padding-right: 50px;
}
.middlepanem {
    color: white;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    text-align: center;
    display: block;
    background-color: rgb(0, 0, 0, 0.5);
    height: auto;
    padding-bottom: 1px;
    padding-top: 1px;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    box-sizing: border-box;
    line-height: 1.6;
}
.blogmiddle {
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    text-align: center;
    display: block;
    background-color: rgba(0, 0, 0, 0.5);
    height: auto;
    padding-bottom: 1px;
    padding-top: 1px;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    box-sizing: border-box;
    line-height: 1.6;
    font-family: "Web8";
    color: white;
}
.aboutmiddle {
    margin: auto;
    width: 60%;
    text-align: center;
    display: block;
    background-color: rgba(0, 0, 0, 0.7);
    height: auto;
    padding-bottom: 1px;
    padding-top: 1px;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    line-height: 2;
    font-family: "Web10";
    color: white;
    padding-left: 50px;
    padding-right: 50px;
    font-size: larger;
}
.artmiddle {
    align-content: center;
}
.artheader {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    width: auto;
    max-width: fit-content;
    color: white;
    font-family: "Web3";
    margin: auto;
    border-radius: 50px;
}
/* Middle Pane End */

/* Right Side Pane */
.rightsidepane {
    float: right;
    background-color: rgba(177, 171, 0, 0.5);
    width: 25%;
    height: auto;
    padding: 2rem 1rem;
    box-sizing: content-box;
    font-family: Web3;
}
/* Right Pane End */

/* Photos.html*/
.wrapper {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    padding-top: 10px;
    width: 100%;
    justify-content: center;
    gap: 50px;
}
.photosheader {
    background-color: rgba(0, 0, 0, 0.75);
    width: 70%;
    margin: auto;
    padding: 15px;
    text-align: center;
    padding-top: 30px;
}
/* End Photos.html */

.movies-section {
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: center;
    gap: 20px;
    padding: 10px;
    flex-direction: row-reverse;
}
.movie-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    width: 20%;
    padding: 10px;
    box-sizing: border-box;
    font-family: "web3";
}
.movie-item2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(255, 0, 225, 0.5);
    border-radius: 10px;
    width: 20%;
    padding: 10px;
    box-sizing: border-box;
    font-family: "web3";
}
.movie-item3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(38, 210, 46, 0.5);
    border-radius: 10px;
    width: 20%;
    padding: 10px;
    box-sizing: border-box;
    font-family: "web3";
}
/* Media CSS */
.music-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 10px;
}
.music-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    width: 40%;
    padding: 10px;
    box-sizing: border-box;
    font-family: "web11";
}
.mediaheader {
    padding: 10px;
    margin-bottom: 10px;
    justify-content: space-around;
    font-family: "Web3";
    margin: auto;
    color: white;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    text-align: center;
    display: block;
    height: auto;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
    box-sizing: border-box;
}
aside {
    border-top: none;
    border-bottom: none;
    background-color: rgba(0, 0, 0, 0.5);
    width: 25%;
    height: 100%;
    min-height: 115vh; /* ensures it fills the screen on small devices */
    font-family: Web3;
    color: white;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: block;
    padding-bottom: 1px;
    padding-top: 1px;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    box-sizing: content-box;
    line-height: 2;
    place-content: start;
}
aside {
    position: static;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 80vh;
    overflow: visible;
}
section,
aside {
    border-radius: 8px;
}
/* End Media CSS */

.menupix {
    background-color: rgba(180, 15, 30, 0.7);
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding-top: 10px;
    width: 100%;
    justify-content: center;
    gap: 50px;
    border-radius: 15px;
    border: ridge #ffaf00;
    padding: 10px;
}
#guestbook {
    display: flex;
    justify-content: center;
    align-content: center;
    margin: auto;
}

/* Font Faces */
@font-face {
    font-family: "Web1";
    src:
        url("Typewriter.ttf") format("ttf"),
        /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url("Typewriter.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
@font-face {
    font-family: "Web2";
    src:
        url("shootingstar.ttf") format("ttf"),
        /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url("shootingstar.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
@font-face {
    font-family: "Web3";
    src:
        url("engineer.otf") format("otf"),
        /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url("engineer.otf") format("truetype"); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
@font-face {
    font-family: "Web4";
    src:
        url("osaka.ttf") format("ttf"),
        /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url("osaka.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
@font-face {
    font-family: "Web5";
    src:
        url("europeantypewriter.ttf") format("ttf"),
        /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url("europeantypewriter.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
@font-face {
    font-family: "Web6";
    src:
        url("neonvampire.ttf") format("ttf"),
        /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url("neonvampire.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
@font-face {
    font-family: "Web6Italics";
    src:
        url("neonvampireitalics.ttf") format("ttf"),
        /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url("neonvampireitalics.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
@font-face {
    font-family: "Web7";
    src:
        url("vampirezone.ttf") format("ttf"),
        /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url("vampirezone.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
@font-face {
    font-family: "Web8";
    src:
        url("engineer.otf") format("otf"),
        /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url("engineer.otf") format("truetype"); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
@font-face {
    font-family: "Web9";
    src:
        url("cravelo.otf") format("otf"),
        /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url("cravelo.otf") format("truetype"); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
@font-face {
    font-family: "Web10";
    src:
        url("quinferly.ttf") format("ttf"),
        /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url("quinferly.otf") format("truetype"); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
@font-face {
    font-family: "Web11";
    src:
        url("cdrom.ttf") format("ttf"),
        /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url("cdrom.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
@font-face {
    font-family: "Web12";
    src:
        url("vhs-gothic.ttf") format("ttf"),
        /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url("vhs-gothic.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
/* Font Face End */