.body {
    background: #eef4f7;
    color: #1a1a1a;
    font: normal 16px sans-serif;
    margin: 0;
    padding: 1rem 5%;
    }
    
    .app {
        position: relative;
        }
        
        .darkness {
            background: #000;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            zoom: 1;
            
            -khtml-opacity: 0.8;
              -moz-opacity: 0.8;
                   opacity: 0.8;
            }
    
        .headline {
            border-bottom: 1px solid #d8e5eb;
            font: bolder 200% Georgia, serif;
            margin: 0 0 2rem;
            }
            
        .notes {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
            gap: .7rem;
            
            list-style: none;
            margin: 0;
            padding: 0;
            }
            
            .note {
                background: #e3ecf1;
                border-bottom: 1px solid #d8e5eb;
                border-radius: 10px;
                cursor: pointer;
                font-size: 90%;
                line-height: 1.2;
                padding: .6rem 1rem 1rem;
                }
                
                .note:hover {
                    background: #d8e5eb;
                    }
                    
        .note-popup {
            position: fixed;
            left: 5%;
            right: 5%;
            top: 2rem;
            z-index: 2;
            
            background: #fff;
            border-radius: 20px;
            padding: 1rem 5% 2rem;
            }
            
            .note-popup__close {
                cursor: pointer;
                font-size: 32px;
                position: absolute;
                top: 1rem;
                right: 1rem;
                }