/* =======================================================
   Theme
======================================================= */

:root{
    --frame-size:40px;
    --frame-color:#005f73;
    --frame-bg:rgba(255,255,255,.84);
}

/* =======================================================
   Page
======================================================= */

body{
    font-family:Arial,sans-serif;
    margin:0;
    padding:calc(var(--frame-size) + 12px);
    line-height:1.6;
    color:#333;
    background:url("backg.jpg") no-repeat center center fixed;
    background-size:cover;
}

/* =======================================================
   Main Content
======================================================= */

.container{
    max-width:900px;
    margin:0 auto;
    padding:40px;
    background:rgba(255,255,255,.82);
    border-radius:12px;
    box-shadow:0 8px 25px rgba(0,0,0,.15);
}

/* =======================================================
   Navigation
======================================================= */

nav{
    text-align:center;
    margin-bottom:35px;
}

nav a{
    color:#005f73;
    text-decoration:none;
    font-size:1.1rem;
    font-weight:bold;
    margin:0 18px;
    transition:.2s;
}

nav a:hover{
    color:#009688;
}

nav a.active{
    color:#009688;
    border-bottom:2px solid #009688;
    padding-bottom:4px;
}

/* =======================================================
   Typography
======================================================= */

.hero{
    text-align:center;
    margin-bottom:45px;
}

.hero h1{
    color:#005f73;
    margin-bottom:6px;
}

.hero .subtitle{
    font-size:1.1rem;
    color:#00796b;
    font-style:italic;
    margin:0;
}

.hero h2{
    color:#005f73;
    margin-top:18px;
    font-weight:normal;
}

h3{
    color:#005f73;
}

.closing{
    text-align:center;
    font-style:italic;
    margin-top:40px;
}

/* =======================================================
   Lists
======================================================= */

ul{
    list-style:none;
    padding:0;
    margin:0;
}

ul li{
    margin-bottom:24px;
}

ul li::before{
    content:"☯ ";
    color:#009688;
}

ul ul{
    margin-left:24px;
    margin-top:10px;
}

/* =======================================================
   Links
======================================================= */

a{
    color:#006d77;
}

a:hover{
    color:#009688;
}

/* =======================================================
   Decorative Frame
======================================================= */

.frame{
    position:fixed;
    background:var(--frame-bg);
    color:var(--frame-color);

    z-index:9999;

    font-size:13px;
    font-style:italic;
    letter-spacing:.12em;

    overflow:hidden;
    user-select:none;
}

/* ---------- Top ---------- */

.frame-top{

    left:0;
    top:0;

    width:100%;
    height:var(--frame-size);

    display:flex;
    align-items:center;
    justify-content:center;

    white-space:nowrap;

    border-bottom:1px solid rgba(0,95,115,.2);
}

/* ---------- Bottom ---------- */

.frame-bottom{

    left:0;
    bottom:0;

    width:100%;
    height:var(--frame-size);

    display:flex;
    align-items:center;
    justify-content:center;

    white-space:nowrap;

    border-top:1px solid rgba(0,95,115,.2);
}

/* ---------- Left ---------- */

.frame-left{

    left:0;
    top:var(--frame-size);

    width:var(--frame-size);
    height:calc(100vh - (var(--frame-size) * 2));

    border-right:1px solid rgba(0,95,115,.2);
}

.frame-left span{

    position:absolute;

    left:50%;
    bottom:0;

    transform-origin:bottom left;

    transform:
        rotate(-90deg)
        translateX(-50%);

    white-space:nowrap;
}

/* ---------- Right ---------- */

.frame-right{

    right:0;
    top:var(--frame-size);

    width:var(--frame-size);
    height:calc(100vh - (var(--frame-size) * 2));

    border-left:1px solid rgba(0,95,115,.2);
}

.frame-right span{

    position:absolute;

    left:50%;
    top:0;

    transform-origin:top left;

    transform:
        rotate(90deg)
        translateY(-50%);

    white-space:nowrap;
}