html{position:relative;height:100%;min-height:100%}
body{
background-image:url('img_tartan-clovers/fondo-micro-blog.gif');
font:19px 'Inter';font-weight:800;
user-select:none
}
::-webkit-scrollbar{display:none}
html{-ms-overflow-style:none;scrollbar-width:none}
@font-face{font-family:'ByteBounce';src:url('fonts/ByteBounce.ttf')}
main{width:700px;height:915px;margin:auto;position:relative}
#ii-content video, #ii-content img{
width:138px;height:138px;
margin:0 0 10px 10px;
object-fit:cover;
border:1px solid rgb(211, 211, 211);border-radius:5px;
display:inline;
&:first-of-type{
margin:0 0 10px 20px;
}}
#filter{
width:160px;
position:absolute;
bottom:0;right:-55px;z-index:1;
transform:rotate(-10deg);
filter:drop-shadow(2px 0 0 #FFF) drop-shadow(0 2px 0 #FFF) drop-shadow(-2px 0 0 #FFF) drop-shadow(0 -2px 0 #FFF)
}
#i{
width:550px;height:915px;
background:linear-gradient(65deg,rgba(15, 15, 15, 1) 45%, rgba(167, 167, 167, 1) 100%);
border-radius:70px;
position:relative
}
#i-border{
width:fit-content;margin:auto;padding:10px;
background:linear-gradient(65deg,rgba(66, 66, 66, 1) 25%, rgba(166, 166, 166, 1) 80%, rgba(245, 245, 245, 1) 100%);
border:4px solid rgb(255, 255, 255);
border-radius:70px
}
#ii{
width:500px;padding-bottom:5px;
background-color:rgba(66, 66, 66, 1);
color:rgba(255, 255, 255);
font:35px 'ByteBounce';
display:flex;flex-wrap:wrap;
justify-content:center;
align-items:flex-end;
position:absolute;
top:130px;left:25px;
}
#ii-content{
width:480px;height:480px;
margin:10px 0 5px 0;
background-color:rgb(255, 255, 255);
font:12px 'Inter';
overflow:hidden
}
#scroll{height:325px;overflow:scroll}
#from, #to{
padding:8px 20px;
color:rgb(153, 153, 153);
font-size:17px
}
#from, #to, #date-entry, #entry-content{border-bottom:1px solid rgb(211, 211, 211)}
#name{
padding:4px;
background-color:rgb(148, 194, 195);
color:rgb(59, 96, 97);
border:1px solid rgb(211, 211, 211);
border-radius:5px
}
#date-entry{
padding:10px 20px;
color:rgb(153, 153, 153);
font:18px 'PT Sans Narrow';
letter-spacing:1px;
}
#type{color:rgb(104, 160, 227);font-weight:800;text-transform:uppercase}
#mature{color:rgb(255, 0, 0);font-weight:800;&::after{content:'#NSFW'}}
#entry-content{
padding:10px 0 0 0;
background-color:rgba(211, 211, 211, 0.35);
color:rgb(87, 89, 93);
font:16px 'PT Sans Narrow';
text-align:justify;
& p{margin:0 20px 10px 20px}}
#date{
padding:5px 0;
background:url('img_tartan-clovers/fondo-mobile.png'), rgba(126, 169, 194);
font-size:17px;font-weight:700;
text-align:center;
color:rgb(69, 104, 128);
}
#total-i{
padding:10px 0;
background-color:rgb(97, 143, 171);
color:rgb(255, 255, 255);
font:25px 'MS Gothic';font-weight:900;
text-align:center
}
.button-i{
width:fit-content;
background-color:rgb(97, 143, 171);
color:rgb(213, 236, 252);
font:14px 'Inter';font-weight:900;
letter-spacing:1px;
text-shadow:1px 2px 0px rgba(0, 0, 0, 0.3);
text-transform:uppercase;
border:2px outset rgb(128, 169, 194);
border-radius:5px;
position:absolute;
&:hover{cursor:pointer}
&:active{text-shadow:-1px -2px 0px rgba(0, 0, 0, 0.3);border:2px inset rgb(128, 169, 194)}}
.triangle-i, .triangle-ii{
width:0;height:0;
border-left:11px solid transparent;
border-right:11px solid transparent
}
.triangle-i{border-bottom:13px solid rgb(213, 236, 252)}
.triangle-ii{border-top:13px solid rgb(213, 236, 252)}
button.button-i.i{padding:7px;top:47px;right:67px}
button.button-i.ii{padding:7px;top:47px;right:20px}
button.button-i.iii{padding:5px 10px;top:47px;left:20px}
#buttons{
width:500px;height:40px;
background:linear-gradient(#FFB7CF 0%, #EC99B5 10%, #FA789E 50%, #DB5580 51%, #EE6C95 100%);
color:rgba(255, 255, 255);
font:19px 'Inter';font-weight:800;
text-transform:uppercase;
text-shadow:1px 2px 0px rgba(0, 0, 0, 0.3);
box-shadow:inset 2px -2px 2px #EC99B5, inset -2px 0px 2px #EC99B5;
position:absolute;
bottom:218px;left:25px
}
#buttons li{display:inline;
&:hover{color:rgb(255, 255, 0);cursor:pointer}
&:not(:last-child)::after{
content:" | ";margin:0 5px;color:rgb(249, 144, 174);font-weight:500}
}
#buttons ul{margin:10px 0 0 20px;padding:0}
mark{
margin:0 10px 0 0;
background-color:rgba(66, 66, 66, 1);
color:rgb(255, 255, 255);
text-transform:uppercase
}
textarea, marquee{
width:250px;height:25px;
background-color:rgb(110, 110, 110);
color:rgb(255, 255, 255);
font:600 19px 'Inter';
border:1px solid rgb(255, 255, 255);
resize:none
}
#button-ii{
width:81px;height:81px;
background:linear-gradient(#FFB7CF 0%, #EC99B5 10%, #FA789E 50%, #DB5580 51%, #FA789E 100%);
box-shadow:inset 2px -2px 2px #EC99B5, inset -2px 0px 2px #EC99B5;
color:rgb(255, 255, 255);
font:19px 'Inter';font-weight:800;
text-transform:uppercase;
text-shadow:1px 2px 0px rgba(0, 0, 0, 0.4);
position:absolute;
bottom:113px;right:40px;
&:hover{color:rgb(255, 255, 0);cursor:pointer} &:active{text-shadow:-1px -2px 0px rgba(0, 0, 0, 0.4)}
}
#button-iii{
padding:5px 10px;
background:linear-gradient(-225deg, rgb(213, 219, 228), rgb(248, 248, 248));
border:1px solid rgb(187, 187, 187);
font:900 18px 'Inter';
letter-spacing:1px;
text-transform:uppercase;
color:rgb(196, 54, 54);
border-radius:3px;
box-shadow:inset 0 -2px 0 0 #CDCDE6, inset 0 0 1px 1px #FFF, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
text-shadow:0 1px 0 rgba(255,255,255, .9);
position:absolute;
bottom:60px;left:235px;
&:hover{color:rgb(0, 0, 255);cursor:pointer}
}
marquee{
width:340px;height:fit-content;
padding:2px;
font-size:16px;font-weight:500;
position:absolute;
top:80px;left:140px;
}
#lol{
width:90px;height:15px;
background-color:rgb(51, 51, 51);
border:1px solid rgb(128, 128, 128);
border-radius:10px;
box-shadow:inset 0px -4px 1px rgb(32, 32, 32);
position:absolute;
top:40px;left:230px
}
#question{
padding:0 0 0 8px;
color:rgb(104, 160, 227);
font-weight:900;text-transform:uppercase;
border-left:3px solid rgb(104, 160, 227)
}