@font-face { font-family: "Intro"; src: url(https://dl.dropbox.com/s/6ljrkkvsmj7m2fx/Intro.otf); format("truetype"); } #blog { width: 750px; height: 550px; background: #e7eaed; overflow: hidden; border: 1px solid #ddd; } #blog .topbar { position: absolute; bottom:  45px; height: 40px; background: #fff; width: 750px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } #blog .circles { height: 20px; width: 20px; background-color: #04B404; border-radius: 50%; position: absolute; top: 230px; left: 375px; display: inline-block; } #blog .circles2 { height: 20px; width: 20px; background-color: #ffcc00; border-radius: 50%; position: absolute; top: 230px; left: 400px; display: inline-block; } #blog .circles3 { height: 20px; width: 20px; background-color: #cc0000; border-radius: 50%; position: absolute; top: 230px; left: 425px; display: inline-block; } #blog .arrow1 { color: #babcbe; font-size: 20px; position: absolute; top: 10px; left: 10px; } #blog .arrow2 { color: #babcbe; font-size: 20px; position: absolute; top: 10px; left: 45px; } #blog .link { position: absolute; background: #eaeced; padding: 10px 20px; width: 565px; height: 10px; top: 4px; left: 105px; border-radius: 20px; border: 1px solid #ddd; font: 12px Arial, sans-serif; color: #000; line-height: 100%; } #blog .reload { color: #babcbe; font-size: 18px; position: absolute; top: 11px; left: 75px } #blog .dot { color: #babcbe; font-size: 20px; position: absolute; top: 1px; left: 650px; } #blog .star { float: right; margin-right: -5px; margin-top: -1px; } #blog .name { position: absolute; color: #000; width: 560px; top: 10px; left: -200px; border-radius: 20px; font-family: arial; font-size: 12px; line-height: 100%; } #blog .pagename { position: relative; background: transparent; border: none; height: 10px; width: 500px; left: -130px; display: inline-block; top: -2px; padding: 10px; font-family: arial; color: #5f6368; font-size: 12px; text-align: center; line-height: 100%; border-radius: 5px 5px 0px 0px; margin-right: -3px; text-align: center; } #blog .menu { width: 750px; height: 30px; background: #000; border-bottom: 4px solid #cc0000; position: absolute; top: 40px; } #blog .image { width: 750px; height: 450px; background-blend-mode: multiply; background-color: #990000; background-image: url(https://www.allkpop.com/upload/2017/11/af_org/23064025/red-velvet-irene.jpg) center/cover; position: absolute; top: 73px; transition: all 2s ease-in-out; } #blog .menu span { font: 12px Arial, sans-serif; text-align: center; text-transform: uppercase; text-shadow: 2px 1px 1px #111; line-height: 160%; color: #fff; padding: 5px 10px; display: inline-block; } #blog .blogname { font: 80px Intro, sans-serif; color: #fff; text-shadow: 2px 1px 1px #000; line-height: 1.5; position: absolute; left: 100px; top: 160px; transform: translate(0%, 0%); isolation: isolate; } #blog .blogname span { border-bottom: 5px solid #cc0000; line-height: 1.5%; transform: translate(0%, 0%); isolation: isolate; } #blog .description { width: 585px; background: transparent; height: 105px; padding: 10px; position: absolute; left: 100px; top: 210px; box-sizing: border-box; outline: 1px solid #fff; outline-offset: -5px; } #blog .text { font: 13px 'Montserrat', sans-serif; color: #fff; padding: 5px; text-align: justify; line-height: 150%; text-transform: uppercase; outline: 1px solid #fff; text-shadow: 2px 1px 1px #000; transform: translate(0%, 0%); isolation: isolate; } #blog .button { width: 55px; height: 20px; background: transparent; border-right: 4px solid #fff; display: inline-block; padding: 5px; transition: all 2s ease-in-out; } #blog .image:hover { filter: grayscale(100%) brightness(190%); } #blog .button:hover { text-decoration: line-through; } #blog .menutext { font: 13px 'Montserrat', sans-serif; color: #fff; text-transform: uppercase; position: absolute; top: 2px; text-align: center; padding: 5px; transition: all 2 ease-in-out; } #blog .button:hover { background: #FFFFFF; border-right: 4px solid #cc0000; } #blog .menutext:hover { color: #000; text-shadow: -1px -1px #c40000, -2px -2px #c40000, -3px -3px #c40000, -4px -4px #c40000; transition: .5s linear; } #blog .text:after { content: "「♡」"; font: bold 8px/12px Consolas; color: #fff; text-transform: uppercase; letter-spacing: -.5px; opacity: .5; postion: absolute; top: -60px; } #blog .text:hover::after { content: "「AMERICAN QUEEN ♡ ROYALTY CODES」"; }