* {
    box-sizing:border-box;
}

body {
    margin:100px auto 100px auto;
    padding:0px;
    width:80%;
    
    font-feature-settings: "liga", "kern";
    -moz-font-feature-settings: "liga=1, kern=1";
    -o-font-feature-settings: "liga", "kern";
    -webkit-font-feature-settings: "liga", "kern";
}

::selection {
    color:dodgerblue;
    background:none;
}

@font-face {
    font-family: 'Publico Text Web';
    src: url('fonts/Publico/PublicoText-Roman-Web.woff2') format('woff2'),
        url('fonts/Publico/PublicoText-Roman-Web.woff') format('woff'),
        url('fonts/Publico/PublicoText-Roman-Web.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
}

p {
    margin:0px;
    font-family: 'Publico Text Web', serif;
    font-size: 35px;
    line-height: 47px;
}

a {
    text-decoration: none;
}

section {
    padding:15px 20px 15px 20px;
    background:rgba(255,255,255,0.6);
    box-shadow: 0px 0px 15px 0px rgba(200,200,200,0.6);
}

section + section {
    margin:35px 0px 0px 0px;
}

.info {
    margin:10px 0px 0px 0px;
    font-family: 'Helvetica', serif;
    font-size: 15px;
    line-height: 21px;
    color:rgb(200,200,200);
}

.title {
    color:rgb(150,150,150);
}

.title:hover {
    color:rgb(100,100,100);
}

.date {
    color:rgb(150,150,150);
}

.creator {
    color:rgb(150,150,150);
}

input {
    margin:0px;
    width:100%;
    font-family: 'Publico Text Web', serif;
    font-size: 35px;
    line-height: 35px;
    outline: none;
    border: none;
    display: block;
    background:rgba(0,0,0,0);
    color:red;
}

.clickedWord {
    background:rgba(255,0,0,0.8);
    color:white;
    padding:6px 8px 5px 8px;
    border:1px solid red;
}

.resultWord {
    background:rgba(255,150,0,0.8);
    color:white;
    padding:6px 8px 5px 8px;
}

.line {
    background:white;
    width:100%;
    height:100%;
    
    position:absolute;
    top:0px;
    left:0px;
    z-index: -1;
}