:root {
  --background-body: #f1f2da;
  --text-main: #00303b;
  --text-bright: #ff7777;
  --border: #ff7777;
}

html, body {
    width: 100%;
    min-height: 100%;
    background:  var(--background-body);
    color: var(--text-main);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
}
body {
    padding: 1rem;
}
a {
    color: var(--text-bright);
}
.index {
    ul {
        display: flex;
        flex-wrap: wrap;
        list-style-type: none;
        padding: 0;
    }

    li {
        margin: 0;
        border: 1px dashed var(--border);
        
        a {
            display: inline-block;
            width: 240px;
            height: 80px;
            padding: 10px;
            text-decoration: none;
            transition: .25s ease;
        }
    }
    li:hover {
        background-color: var(--text-bright);
        border: 1px solid var(--border);
        
        a {
            color: var(--background-body);
        }
    }
}
.collection {
    ul {
        display: flex;
        flex-wrap: wrap;
        list-style-type: none;
        padding: 0;
    }

    li {
        width: 240px;
        padding: 10px;
        border: 1px dashed var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: .25s ease;
    }

    li:hover {
        background-color: var(--text-bright);
        border: 1px solid var(--border);
        
        a {
            color: var(--background-body);
        }
    }

    a span {
        display: inline-block;
        width: 100%;
        height: 100%;
        text-align: left;
        text-decoration: underline dashed;
    }
}