/* ================================================================ */
/* VARIABLES */
/* ================================================================ */

:root {
    /* TEXT */
    --font1: Verdana;
    --font2: Helvetica;
    --font3: MS Gothic;
    --font4: MS Mincho;
    --font-size: 11pt;
    --txtshadow: #ff80bf 1px 1px 2px;
    --txt: white;

    /* BACKGROUND */
    --bg1: linear-gradient(transparent 10%, lavender 50%);
    --bg2: url(vaio.png);
    --position: fixed;
    --bgsize: cover;

    /* BUBBLEGUM CONTAINER, BUTTONS ETC. */
    --bubblebg: linear-gradient(hwb(330 80% 0%),hwb(240 80% 0%));
    --shadow: inset #ff80bfcc 0px 0px 3px, inset #fffc 0px 3px 3px;
    --shadow2: inset #88fc 0px 0px 3px, inset #fffc 0px 3px 3px;
    --shadow3: inset #fff8 0px 0px 3px;
    --blur: blur(3px);
    --round: 10px;
    --pad: 3px;
    --margin: 3px;
    --btnbg: linear-gradient(hwb(330 80% 0%),hwb(240 80% 0%));
    --btnspace: 1px;
    --btnedge: 3px;
    --border: #ff80bf80 1px solid;
    --visited: #ff80bf80;
    --active: #fff8;
    --hover: white;
    --link: #ff80bf;
    --nav: 200px;
    --gloss: linear-gradient(hsl(330,100%,96%) 10%,hsl(330,100%,92%)50%,hsl(330,100%,86%)51%, hsl(240,100%,90%));
}

/* ================================================================ */
/* LAYOUT */
/* ================================================================ */

::selection {background: #ff80bf80;color:var(--txt);}

body {
    font-family: ms ui gothic;
    font-size:11pt;
    background: var(--bg1),var(--bg2);
    background-attachment: var(--position);
    background-size: var(--bgsize);
    background-position: center;
}

.container {
    max-width: 1000px;
    margin: auto;
    padding: var(--pad);
    position: absolute;
    left:0;right:0;top:0;bottom:0;
}

.wrap {
    border-width:8px;
border-style:solid;
border-image: url("https://dl.dropbox.com/s/l61yvavjx2e501e/image.png") 8 fill round;
    font-family: ms ui gothic;
    font-size:11pt;
    padding: var(--pad);
    display: grid;
    grid-gap: 3px;
    grid-template: "header header header" auto "left main right" auto "footer footer footer" auto / var(--nav) auto var(--nav);
}

.box {
    font-family: ms ui gothic;
    font-size:11pt;
    border-width:8px;
border-style:solid;
border-image: url("https://dl.dropbox.com/s/l61yvavjx2e501e/image.png") 8 fill round;
padding: 3px;
}

li {
    list-style-image:url(image/arrow.gif);
}

.bubble {
    font-family: ms ui gothic;
    font-size:11pt;
    background: var(--bubblebg);
    box-shadow: var(--shadow);
    border-radius: var(--round);
    margin: var(--margin);
    padding: var(--pad);
}

.column{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.placeholder {
    background: #ff80bf;
    width: 100px;
    height: 100px;
    border-radius: var(--round);
}

.gloss {
    text-align: center;
    background: linear-gradient(#0000,#fcfc),var(--gloss);
    border: var(--border);
    border-radius: 3px;
    padding: var(--pad);
    box-shadow: var(--shadow3);
    color: var(--txt);
    text-shadow: var(--txtshadow);
    font-weight: bold;
    margin: var(--margin);
}

.btn {
    background: var(--btnbg);
    margin: var(--btnspace);
    border-radius: var(--btnedge);
    padding: var(--pad);
    box-shadow: var(--shadow);
    border: var(--border);
}

main {
    grid-area: main;
}

aside {
    grid-area: aside; 
}

header {
    grid-area: header;
    backdrop-filter: blur(3px);
    background: var(--bubblebg);
    box-shadow: var(--shadow);
    border-radius: var(--round);
    margin: var(--margin);
    padding: var(--pad);    
}

footer {
    text-align: center;
    grid-area: footer;
    backdrop-filter: blur(3px);
    background: var(--bubblebg);
    box-shadow: var(--shadow);
    border-radius: var(--round);
    margin: var(--margin);
    padding: var(--pad);    
}

.nav1 {grid-area: left;}

.nav2 {grid-area: right;}

.ringhost {
    position: fixed;
    bottom: 0px;
    right: 0px;
    z-index:99999999999999999999999999999999999;
}

.rssHeading::before {
    content: url(image/sion_a60.gif);
    float: left;
    padding-right: 10px;
}

#s-m-t-tooltip {
max-width:100px; /* maximum width */
background: linear-gradient(hwb(329 80% 0% / 0.5), hwb(240 80 0/0.5)); /* color background */
font-family: ms ui gothic; /* font of lyrics */
font-size: 11pt;
box-shadow:inset hwb(330 50 0) 0px 0px 3px, inset white 0px 3px 3px;
backdrop-filter: blur(3px);
padding: 3px;
margin:20px 0px 0px 20px; /* margin size */
z-index:999999999999999999999999999999999999;
border-radius: 3px; /* border radius */

}

#aero-ring {
            background: linear-gradient(to bottom, hwb(330 80 0) 0%, #ccf 100%);
            border-radius: 10px;
            box-shadow: inset 0 0px 10px #ff80bf,
            inset 0 10px 10px #fff;
            font-family: ms pgothic;
            margin: 10px auto 0px auto;
            max-width: 15rem;
            padding: 0.75rem;
            backdrop-filter: blur(5px);
}

#aero-ring a,
#aero-ring a:visited {
            color: white !important;
}

  #aero-ring a:focus,
  #aero-ring a:hover,
  #aero-ring a:active {
    color: #fff !important;
  }

.rss {
    height: 300px;
    overflow: auto;
}

a{transition: 0.5s;text-decoration: none;}
a:link{color: var(--link);}
a:hover{letter-spacing: 3px;font-weight: bold;}
a:active{color: var(--active);}
a:visited{color: var(--visited);}

@media (max-width: 800px) {
  .wrap {
    grid-template:
      "main"
      "right"
      "left"
      "footer";
  }
  
  .ringhost {
    display: none;
  }
}