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

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

    /* BACKGROUND */
    --bg1: linear-gradient(transparent 10%, lavender 50%);
    --bg2: url(images/vaio.png);
    --bg3: url(https://cinni.net/images/web/bg/Image20.jpg);
    --position: fixed;
    --bgsize: 100%;

    /* BUBBLEGUM CONTAINER, BUTTONS ETC. */
    --bubblebg: linear-gradient(hsla(330,100%,80%,0.5),hsla(240,100%,80%,0.5));
    --shadow: inset #ff80bfcc 0px 0px 5px, inset #fffc 0px 5px 5px;
    --shadow2: inset #88fc 0px 0px 5px, inset #fffc 0px 5px 5px;
    --shadow3: inset #fff8 0px 0px 5px;
    --blur: blur(5px);
    --round: 10px;
    --pad: 5px;
    --margin: 5px;
    --btnbg: linear-gradient(hsl(330, 100%, 96%),hsl(240,100%,92%));
    --btnspace: 1px;
    --btnedge: 5px;
    --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 {
    background: var(--bg1),var(--bg2);
    background-attachment: var(--position);
    background-size: var(--bgsize);
}

.container {
    max-width: 1000px;
    background: var(--bubblebg);
    box-shadow: var(--shadow);
    border-radius: var(--round);
    margin: auto;
    padding: var(--pad);
}

.wrap {
    padding: var(--pad);
    background: var(--bg3);
    box-shadow: var(--shadow2);
    border-radius: var(--round);
    display: grid;
    grid-gap: 5px;
    grid-template: "header header header" auto "left main right" auto "footer footer footer" auto / var(--nav) auto var(--nav);
}

.bubble {
    background: var(--bubblebg);
    box-shadow: var(--shadow);
    border-radius: var(--round);
    margin: var(--margin);
    padding: var(--pad);
}

.gloss {
    background: var(--gloss);
    border: var(--border);
    border-radius: 5px;
    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;
    backdrop-filter: blur(5px);
    background: var(--bubblebg);
    box-shadow: var(--shadow);
    border-radius: var(--round);
    margin: var(--margin);
    padding: var(--pad);
}

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

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

footer {
    grid-area: footer;
    backdrop-filter: blur(5px);
    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;
}

a:link{color: var(--link);}
a:hover{color: var(--hover);letter-spacing: 2px;font-weight: bold;}
a:active{color: var(--active);}
a:visited{color: var(--visited);}

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