html{
    font-size: 14px;
}

/* ------- *** ------- */
    body {
        font-family: 'fira mono', monospace;
        /* font-family: 'work sans', sans-serif; */
        background: rgb(208, 208, 223);
    }

    img {
        max-width:100%;
    }

    a {
        color:black;
        text-decoration: underline;
    }

    a:hover {
        color: red;
        text-decoration: none;
    }

    p {
        font-size:1rem;
        margin: 1rem 0 1rem 0;
    }

    h1 {
        margin: 0;
    }

    h2 {
        font-weight: 700;
        font-size:1rem;
        margin: .2rem 0 0 0;
    }

    h3 {
        font-weight: 700;
        font-size:3rem;
        margin: .2rem 0 0 0;
    }

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

    .flex {
        display:flex;
        flex-direction: row;
    }

/* ------- WRAPPER ------- */

    .wrapper {
        margin:3rem 0 3rem 0;
    }

    @media (min-width:800px) {
        .wrapper {
            display:flex;
            flex-direction: row;
            /* background:green; */
            margin:3rem auto 2rem auto;
            max-width:40%;
        }

        .total-left {
            /* background:red; */
            min-width:200px;
            width:200px;
            flex-direction:row;
            overflow-y:auto;
            display:none;
        }

        .total-right {
            max-width:730px;
            overflow-y:auto;
            flex-direction: row;
        }
    }

/* ------- HEADER ------- */

    .header {
        margin:0;
        background:rgb(185, 186, 241);
        padding:1rem;
        transition: margin .3s;
        border-left: 1px solid black;
        border-right: 1px solid black;
        border-top: 1px solid black;
        display:none;
    }

    .color-head {
        margin-top:1rem;
        height:500px;
        background:rgb(255, 200, 148);
    }

/* ------- NAV ------- */
    .letter-list {
        display:block;
        padding:.5rem 0 .5rem 0;
        width:100%;
    }

    .letter-list:hover {
        background: rgb(255, 160, 116);
        border-radius: 5px;
        transition: background .2s ease-out;
    }

    .nav {
        position:fixed;
        flex-flow: column wrap;
        width: 100%;
        padding:1rem 0 1rem 0;
        bottom:0;
        transition: transform .2s ease-in-out;
        background:rgb(231, 231, 231);
        transform: translateY(0px);
        border-top:1px solid black;
        z-index:3;
    }

    .nav ul{
        display:flex;
        justify-content: space-between;
        width:90%;
        margin:0 auto;
    }

    .nav a {
        color:black;
        font-size: 1 rem;
        font-weight: 700;
        text-decoration: none;
    }

    .nav a:hover {
        color: red;
        /* text-decoration: underline; */
    }

    .nav li {
        /* background:red; */
        width:20%;
        text-align: center;
    }

    .nav-big {
        display:none;
    }

/* ------- NAV RESPONSIVE ------- */

    @media (min-width:750px) {
        .nav {
            display:block;
        }

        .nav-mobile {
            display: none;
        }
    }
/* ------- COMMENT BLOCKS ------- */

    .letter {
        margin:1rem 0 1rem 0;
        padding:1rem;
        display:none;
    }

    .letter-container {
        height: 50px;
        width: 50px;
        background:rgb(112, 182, 121);
        margin-right:.2rem;
        text-align:center;
    }

    .container {
        margin:0;
        padding:1rem;
        border-top:1px solid black;
        border-right:1px solid black;
        border-left:1px solid black;
        z-index:2;
        transition: margin .3s;
        background: rgb(231, 231, 231);
    }

    .container img {
        width:100%;
        max-width:400px;
        margin-left:1rem;
        border:1px solid black;
    }

    .container:hover {
        animation: color 1s forwards alternate;
    }

    .avatar {
        height: 50px;
        min-width: 50px;
        /* background:rgb(112, 182, 121); */
        background: rgb(231, 231, 231);
        border:1px solid black;
        margin-right:.2rem;
        border-radius: 50px;
    }

    .avatar img {
        position:absolute;
        clip-path: circle(25px at 25px 25px);
        max-width: 50px;
        border:0px;
        padding-left:0;
        margin-left:0;
    }

    .right-panel {
        width:100%;
        flex-direction: column;
    }

    .word {
        padding:0 2rem 0 1rem;
        /* background:rgb(231, 174, 174); */
    }

    .comment {
        /* background: rgb(208, 208, 224); */
        padding:0 1rem 0 1rem;
    }

    .ex {
        font-size:.9rem;
        font-style:italic;
        color:rgb(255, 72, 40);
        padding:0 0 0 1rem;
    }

    .see {
        text-align: right;
    }

/* ------- COMMENT RESPONSIVE ------- */

    @media (min-width:750px) {
        .comment {
            padding-right:2rem;
        }

        .ex {
            padding-right:10rem;
        }
    }

/* --------- TOWER BLOCKS ------- */
    .tower-top {
        margin-bottom:-.3rem;
        z-index:1;
    }

    .tower-block {
        z-index:1;
        background: rgb(231, 231, 231);
        margin-bottom:-.3rem;
        border-top:1px solid black;
        border-right:1px solid black;
        border-left:1px solid black;
    }

    .tower-block:hover {
        animation: color 1s forwards alternate;
    }

/* ------- EXCESS  ------- */

    .outside-comment {
        position:fixed;
        top:45%;
        left:1000px;
        width:100%;
        display:none;
    }

    .footer {
        margin:0;
        background: rgb(231, 231, 231);
        border: 1px solid black;

    }

    .footer:hover {
        animation: color 1s forwards alternate;
    }

    @keyframes color {
        0% {background:rgb(255, 218, 169);}
        /* 50% {background:rgb(255, 195, 116);} */
        100% {background: rgb(255, 160, 116);}
    }