/* _________________________________ */ /* / \ */ /* / JORGE VELASQUEZ' \ */ /* / \ */ /*/ STYLE SHEET \*/ /*\ OF /*/ /* \ PERFECTION / */ /* \ / */ /* \_________________________________/ */ /* /\ */ /* / \ */ /* /_/\_\ */ /* /\ /\ */ /* / |/\| \ */ /* /_/\_ /|\ */ /* / \ / | ( \ */ /* / |/\| \| \ */ /* /________________\ */ /* Questions? Comments? Concerns? */ /* Contact Jorge Velasquez @ */ /* realjorgevelasquez.magic@gmail.com */ /* GENERAL NECESSITIES */ .button { text-decoration: none; background-color: #000; border: none; outline-width: 5px; outline-style: dashed; color: #FFF; text-align: center; font-size: 12px; padding: 2px; width: 80px; height: 20px; transition: all 0.5s; cursor: pointer; font-family: 'Times New Roman', serif; font-weight: bold; } .clickIf { text-decoration: none; background-color: #000; border: none; outline-width: 5px; outline-style: dashed; color: #FFF; text-align: center; font-size: 12px; padding: 1px; width: auto; height: 20px; transition: all 0.5s; cursor: pointer; font-family: 'Times New Roman', serif; font-weight: bold; } .button:hover { background-image: url("https://megaweenie.com/rainbow.gif"); } .clickIf:hover { background-image: url("https://megaweenie.com/rainbow.gif"); } @media screen and (max-width: 7in) { .button { width: auto; height: 20px; font-weight: bold; font-size: 10pt; } .clickIf { width: auto; font-size: 10pt; }} .lefttext { text-align: left; margin-left: 5px; } .jorgeLink { color: #FF0; } .jorgeLink:hover { color: #FFaa0F; } .jorgeLink:active { color: #FaF; } body { font-family: 'Times New Roman', Times, serif; } /* INDEX */ #indWrap { text-align: center; display: block; } #indBody { height: 100vh; background-image: radial-gradient(violet, indigo); text-align: center; align-content: center; display: block; overflow: hidden; } @media screen and (max-width: 7in) { #indImg { width: 75%; height: auto; } } /* HOME PAGE */ #buttonbox { align-content: center; display: flex; margin-top: 100px; margin-right: auto; margin-left: auto; text-align: center; width: 1110px; height: 65px; padding: 5px; border: 5px ridge #B10DFF; margin-right: auto; background-color: #000; } #buttonbox .homeButton { align-content: center; text-align: center; text-decoration: none; color: #FF0; font-family: 'Times New Roman', Times, serif; font-weight: bolder; width: 90px; height: 40px; margin: 10px; background-color: #000; border: #fff dashed ; } #buttonbox .homeButton:hover { background-image: url("https://megaweenie.com/rainbow.gif"); } #maintext { width: 1100px; height: 295px; background-color: #000000; border: 5px ridge #B10DFF; padding: 5px; text-align: left; color: white; } #homecontainer { justify-content: center; display: flex; border: none; padding: 5px; width: 1200px; margin-right: auto; margin-left: auto; } #innerstack { display: flex; flex-direction: column; } /*no, the Hyperhero diss message is not coming back.*/ #homecont2 { margin-right: auto; margin-left: auto; border: none; width: 1200px; height: 600px; padding: 5px; flex-direction: row; display: flex; } #homecont3 { justify-content: center; margin-left: auto; margin-right: auto; display: flex; flex-direction: row; text-align: center; align-items: center; height: 130px; } #contact { margin-right: 15px; width: 500px; height: 125px; border: 5px ridge #B10DFF; margin-top: 50px; background-color: #000000; padding: 5px; } #contact h2 { font-size: 25px; color: #FFF000; text-align: left; } #thanks { width: 550px; height: 125px; border: 5px ridge #B10DFF; margin-top: 50px; background-color: #000000; padding: 5px; } #thanks h2 { font-size: 25px; color: #FFF000; text-align: left; } .homebody { background-image: url("https://megaweenie.com/homePage/background.png"); background-color: #cccccc; font-family: 'Times New Roman', serif; height: 2000px; } #title h1 { color: #FF0; font-weight: bold; font-size: 37px; text-shadow: -2px -2px #000; } #title h2 { color: #FF0; font-weight: bold; font-size: 35px; text-shadow: -2px -2px #000;} #bigcont { justify-content: center; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; text-align: center; align-items: center; width: 1200px; } #epic12 { text-align: center; font-size: 45px; } #favorite { width: 750px; height: 650px; border: 5px ridge #B10DFF; padding: 5px; margin-top: 10px; margin-right: 35px; margin-left: 10px; background-color: #000000; color: #FFFFFF; } #favorite h2 { font-size: 25px; color: #FFF000; text-align: left; } #favorite p { color: #FFF; text-align: left; } #faq { border: 5px ridge #B10DFF; outline-color: #FF0000; width: 400px; height: 650px; background-color: #000000; padding: 5px; margin-top: 10px; margin-left: 35px; } #faq p { color: #FFF; text-align: left; } #faq h2 { font-size: 30px; color: #FFF000; } #faq h3 { font-size: 20px; color: #FFF000; } #pronounce { font-weight: bold; color: #FFF; } @media screen and (max-width: 7in) { .homebody { display: flex; flex-direction: row;} #homecont2 { margin-bottom: 30px; } #faq { height: 700px; } #favorite { height: 700px; } #homecont3 { margin-top: 15px; } #maintext { height: 400px; } } /* GNOME SIGHTINGS */ #gnomediv { margin-left: auto; margin-right: auto; justify-content: center; text-align: center; } #img { width: 100%; height: 100%; } #sightbody { background-color: #FFF; text-align: center; vertical-align: center;} #gnometitle { text-align: center; } #gnomeFooter { text-align: center; border: ridge #000 .25vw; background-color: #000; color: #FFF; width: 40vw; height: auto; margin-left: auto; margin-right: auto; } #gnomeFunFact { color: #000; font-weight: normal; } @media screen and (max-width: 5in) { #sightbody img { max-width: 100%; max-height: 100% } #sightbody button { width: 70px; height: 20px; font-weight: bold; font-size: 10pt; } #gnomeFooter { width: 70vw; }} /* ART GALLERY */ #menubody { background-color: #000; text-align: center; justify-content: center; color: #FFF } #menubody div { border: 5px ridge #F0F; background-color: #c300ff; color: #FF0; } #menubody img { width: 100px; height: 100px; } #picCont { width: 1000px; height: auto; padding: 10px; overflow: auto; margin-right: auto; margin-left: auto; } .picFrame { width: 100px; height: 100px; display: inline-block; margin: 10px; } @media screen and (max-width: 7in) {#menubody div { max-width: 50vw; max-height: 100%; } #menubody button { width: 40px; } #menubody button { width: auto; } #picCont { width: 90%; height: auto; }} /* MUSIC PAGE */ #songText { text-align: center; } #musicbody { height: 100vh; background-image: radial-gradient(#82F, #91F, #A0F); text-align: center; justify-content: center; } .couch { max-width: 100%; height: auto; } #songInfo { background-color: #000; color: #FFF; border: double #FFF 3px; height: auto; width: 250px; margin-right: auto; margin-left: auto; text-align: center; font-size: 15px; font-family: 'Times New Roman', Times, serif; padding: 2px; } @media screen and (max-width: 7in) { #musButts { display: flex; flex-direction: column; margin-left: auto; margin-right: auto; } } /* KARAOKE MODE */ #karaokeBody { background-color: #000; text-align: center; color: #F0F; } #karaokeInfo { background-color: #000; color: #F0F; height: auto; width: 250px; margin-right: auto; margin-left: auto; outline-style: double; text-align: center; font-size: 15px; font-family: 'Times New Roman', Times, serif; padding: 2px; } #karaokeLyrics {border: double 4px; width: 600px; min-height: 100px; margin-top: 50px; margin-left: auto; margin-right: auto;} @media screen and (max-width: 7in) { #karaokeBody { width: 100%; align-content: center; } #karaokeLyrics { width: 400px; }} /* NEWS PAGE */ #newsbody { background-image: radial-gradient(black, gray, white); text-align: center; justify-content: center; } /* SECRET PAGE */ #secretbody { vertical-align: center; text-align: center; } #hidden { display: none; margin-top: 25px; margin-left: auto; margin-right: auto; } .secretButton { background-color: #FFF; border: none; outline-width: 5px; outline-style: dashed; color: #000; text-align: center; font-size: 12px; padding: 1px; width: auto; height: 20px; transition: all 0.5s; cursor: pointer; font-family: 'Times New Roman', serif; font-weight: bold; } /* WIZARD ORACLES */ .woahbody { background-color: #BC00FF; } .woahHeader { font-family: garamond, serif; color: transparent; text-align: center; text-shadow: 2px 2px #FFF, -2px -2px #000; } .woahmain { width: 600px; height: 200px; border: 5px ridge #FFF; margin-left: auto; margin-right: auto; background-color: #000; padding: 5px; } #big { color: #FFF000; margin-left: 10px; font-weight: bold; font-size: 20px; } #bigger { color: #FFF000; margin-left: 10px; font-weight: bold; font-size: 25px; } #oracle { color: #FFF; margin-left: 150px; } .woahfooter { font-size: 13px; margin-top: 100px; text-shadow: #000 1px 1px; } @media screen and (max-width: 7in) { .woahmain { width: auto; height: 225px; } } /* WIZARD BLOG */ #blogbody { text-align: center; background-color: #80F; background-image: url(https://megaweenie.com/blogPage/stars.jpg); font-family: 'Times New Roman', serif; } @keyframes color { 50% {color: blue;} } .blogdiv { height: auto; width: 600px; border: #FF00FF ridge .4vw; background-color: #000; margin-left: auto; margin-right: auto; } .blogdiv p { color: #FFFF00; text-align: left; margin-left: 5px; margin-right: 5px; font-size: 15px; } .blogdiv h2 { color: #FFFF00; text-align: left; margin-left: 5px; font-weight: bold; font-size: 22px;} .blogdiv h3 { color: #FFFF00; text-align: left; margin-left: 5px; font-weight: bold; font-size: 18px; } .blogdiv .title { color: #FFFF00; text-align: center; font-weight: bold; font-size: 28px; animation: color 5s infinite; } .blogdiv .subtit { color: #FFFFB0; text-align: center; font-size: 15px;; margin-left: auto; margin-right: auto; } .blogdiv img { max-width: 2vw; max-height: 2vw; } @media screen and (max-width: 7in) { .blogdiv { width: 100%; height: auto; } .blogdiv p { color: #FFFF00; text-align: left; margin-left: 5px; margin-right: 5px; font-size: 1.25em; } .blogdiv h2 { color: #FFFF00; text-align: left; margin-left: 5px; font-weight: bold; font-size: 1.45em; } .blogdiv h3 { color: #FFFF00; text-align: left; margin-left: 5px; font-weight: bold; font-size: 1.3em; } .blogdiv .title { color: #FFFF00; text-align: center; font-weight: bold; font-size: 1.45em; animation: color 5s infinite; } .blogdiv .subtit { color: #FFFFB0; text-align: center; font-size: 1em; margin-left: auto; margin-right: auto; } } /* BE QUIET */ #quiet { vertical-align: center; } #quietbody { text-align: center; justify-content: center; vertical-align: center; } /* TROPHY ROOM */ #trophybody { background-color: #3A2853; } /* CLICKER */ #clickbody { text-align: center; background-color: #FFa; color: #000 } .click { height: 100px; width: 200px; border: 5px ridge #FF00FF; background-color: #FFFF00; font-size: 30px; font-family: "times new roman"; } .click:hover { background-color: #FFaa00; } .click:active { background-color: #aaaa00; } .autobutton { height: 50px; width: 100px; border: 5px ridge #000; background-color: #FFFFa0; font-family: 'times new roman'; font-weight: bold; } .autobutton:hover { background-color: #FFaa00; } .autobutton:active { background-color: #aaaa00; } .littlebutton { height: 25px; width: 90px; border: 5px ridge #FF00FF; background-color: #FFFFa0; font-family: 'times new roman'; font-weight: bold; } .littlebutton:hover { background-color: #FFaa00; } .littlebutton:active { background-color: #aaaa00; } .containerparent { display: flex; flex-direction: column; } .containerchild { display: flex; } .stats { padding: 10px; border: 5px #000 ridge; background-color: #FFFF00; } #shopcont { float: right; padding: 10px; border: 5px #000 ridge; background-color: #FFFF00; overflow-y: auto; overflow-x: hidden; } #buttoncont { padding: 10px; margin-right: auto; margin-left: auto; } #wrapper { display: flex; margin-left: auto; margin-right: auto; justify-content: center; border: 1px #FFaa00; } #clickfooter { text-align: left; } @media screen and (max-width: 7in) { #clickbody { display: flex; } } /* OTHERS PAGE */ #linkbody { background-color: #FaBaFa; } #linkbody h1 { text-align: center; color: #FFFF00; text-shadow: -2px -2px #000; font-size: 40px; } #linkbody .otherLink { font-size: 20px; text-shadow: -1px -1px #000; color: #FFFF00; } #linkbody .otherLink:hover { color: #FFaa00; } #linkcontainer { text-align: center; justify-content: center; } #linkbody footer { text-align: center; justify-content: center; margin-left: auto; margin-right: auto; } @media screen and (max-width: 7in) { #linkbody button { width: 80px; height: auto; } } /* FUNK MODE */ #funkBody { background-color: #000; background-image: url('https://megaweenie.com/funkPage/funkbg.png'); height: 2000px; } #funkBody h1 { font-weight: bold; font-size: 4em; animation-name: title; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear; text-align: center; text-shadow: -1px -1px #FFF; } #funkBody h2 { font-weight: bold; font-size: 3em; animation-name: title; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear; text-align: center; text-shadow: -1px -1px #FFF; } #funkBody footer { text-align: center; } #funkBody .button { background-color: #000; color: #FFF; width: auto; } #funkBody .button:hover { font-weight: bold; background-color: #222; background-image: none; } #funkBody img { max-width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto; } #mainText { border: #FFF solid 3px; width: 20em; height: auto; padding: 5px; display: block; margin-left: auto; margin-right: auto; color: #FFF; } #mainText h3 { font-weight: bold; font-size: 175%; text-align: center; } #mainText p { font-weight: bold; font-size: 125%; text-align: center; } footer p { font-weight: bold; color: #FF0; } @keyframes title { 0% {color: red;} 15% {color: orange;} 30% {color: yellow;} 45% {color: green;} 60% {color: blue;} 75% {color: indigo;} 90% {color: violet;} 100% {color: red;} } /* WEBSITE MENTIONS */ #webBody { background-image: url('/webMentionsPage/webBackground.gif'); font-weight: bolder; text-align: center; height: 9000px; } #webBody h2 { font-size: 40px; font-weight: bolder; } #webBody h3 { font-size: 30px; font-weight: bolder; } #webBody div { margin-left: auto; margin-right: auto; } #webTitle { width: 900px;; height: auto; color: #FF0; border: 5px #F0F ridge; background-color: #000; } .webdiv { background-color: #000000; border: 5px ridge #B10DFF; padding: 15px; width: 500px; height: 500px; margin-left: auto; margin-right: auto; } .webImg { width: 300px; height: 300px; } .webImg:hover { border: #FF0 5px solid; } #webBody .webLink { font-size: 30px; color: yellow; } #webBody .webLink:hover { color: #6f6f11; } /* GAMES PAGE */ #gameBody { text-align: center; background-image: url("https://megaweenie.com/gamePage/gameBG.png"); height: 2500px;} #walkGif { filter: drop-shadow(5px 5px violet); } #gameHeader, .gameHeader2 { color: #FFF; font-weight: bolder; text-shadow: 2px 2px red, 4px 4px yellow, 6px 6px green, 8px 8px blue, 10px 10px #80F } #gameBody .gameHeader3 { text-decoration: none; font-size: 20px; color: #FFF; font-weight: bolder; text-shadow: 2px 2px red, 4px 4px yellow, 6px 6px green, 8px 8px blue, 10px 10px #80F } #gameBody h1 { font-size: 60px; } #gameBody h2 { font-size: 40px; } #gameBody .box img { width: 128px; height: 128px; } #gameBody .info { color: #FFF; margin-left: 15px; margin-right: 15px;} #gameBody .container { flex-direction: row; justify-content: center; margin-left: auto; margin-right: auto; display: flex; width: 800px; height: auto; } #gameBody .box { overflow-wrap: normal; color: #fff; margin: 15px; width: 200px; height: auto; border: #8800FF ridge 6px; background-image: radial-gradient(#306, #102)} #gameBody footer { text-shadow: 2px 2px #000, -2px -2px #000; } /* -------------------------- /* /* THE END /* /* -------------------------- /*