@font-face {
    font-family: Kepler;
    src: url(/Kepler.ttf);
}

@font-face {
    font-family: Scribbled;
    src: url(/Scribbled.ttf);
}

table {
    width: 100%;
        border-collapse: collapse;
    }
    td {
        padding: 0.4em;
        line-height: 0.9em;
    }
    td:first-child {
        font-style: italic;
        color: #7C3A15;
    }
    td:last-child {
        text-align: right;
    }
    tr {
        border-bottom: 1px solid #7C3A15;
    }
    tr:last-child {
        border-bottom: none;
    }

    h3 {
        margin-top: 0.2em;
    }


body {
    margin: 2em auto;
    background-image: url('bg.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: #815E4C;
    font-family: Kepler;
    font-size: 19px;
}

main {
    background: #f2cea2;
    background: linear-gradient(0deg,#f2cea2 83%, #f7e4c6 100%);
    border-radius: 10px;
    border: 5px outset #b8813a;
    width: 1300px;
    padding: 1.3em;
    margin: 2em auto;
    display: grid;
    grid:
    [row1-start] "portrait facts facts . deco1 deco1" 100px [row1-end]
    [row2-start] "portrait facts facts person person person" 300px [row2-end]
    [row3-start] "name icons icons person person person" 50px [row3-end]
    [row4-start] "hooks hooks likes likes dislikes deco2" 300px [row4-end]
    / 300px 300px 100px 100px 210px 1fr;
    gap: 1em;
}

.portrait {
    grid-area: portrait;
    margin-top: 1em;
    border-radius: 10px;
    border: 5px outset #b8813a;
    width: 98%;
}

.facts {
    grid-area: facts;
    padding: 0.5em;
}

.icons {
    grid-area: icons;
    img {
        width: 50px;
        height: 50px;
    }
}

.person {
    grid-area: person;
    padding: 0.5em 1em;
    font-size: 20px;
    p {
        text-indent: 2em;
    }
    p::first-letter {
        font-size: 20px;
        font-weight: 600;
        color: #5a2104;
    }
}

.name {
    grid-area: name;
    text-align: center;
    h2 {
        margin: 0;
    }
    h4 {
        margin: 0;
    }
}

.hooks {
    grid-area: hooks;
    padding: 0.5em;
    display: grid;
    grid:
    [row1-start] "list text" auto [row1-end]
    [row2-start] "stamps text" 150px [row2-end]
    / 1fr 1fr;
    column-gap: 0.5em;

    .list {
        grid-area: list;
        display: flex;
        flex-direction: column;
    }

    .stamps {
        grid-area: stamps;
        height: 100%;
    }
    .text {
        grid-area: text;
        border-radius: 10px;
        height: 290px;
        border: 5px outset #b8813a;
        background: #f2cea2;
        background: linear-gradient(0deg,#f2cea2 60%, #f7e4c66c 100%);
        hr {
            border: 1px solid #7C3A15;
        }
        h3 {
            margin: 0;
            text-align: center;
        }
        p {
            text-indent: 2em;
            margin: 0;
        }
    }
}

.hooktext {
    padding: 0.5em;
    display: none;
    overflow-y: scroll;
}

button {
    margin-bottom: 0.3em;
    padding: 5px;
    border-radius: 5px;
    color: #f8ead9;
    border: 1px outset #332007;
    background: #41331E;
    background: linear-gradient(0deg,#6d522a 46%, #b99f87 81%);
    font-family: Scribbled;
    font-size: 18px;
}

button:hover {
    color: #eed9c4;
    border: 1px outset #332007;
    background: #41331E;
    background: linear-gradient(0deg,#947649 46%, #d8b89a 81%);
}

.likes {
    grid-area: likes;
    h3 { color: #4f8835; }
    li {
        color: #4f8835;
        border: 1px solid #4f8835;
    }
}

.dislikes {
    grid-area: dislikes;
    h3 { color: #883535; }
    li {
        color: #883535;
        border: 1px solid #883535;
    }
}

.likes, .dislikes {
    padding: 0;
    h3 { margin: 0; }
    ul {
        margin: 0;
        padding-left: 0;
    }
    li {
        list-style-position: inside;
        margin: 0.5em;
        padding: 0.2em;
        text-align: center;
        i {
            font-size: 12px;
        }
    }
    h3 {
        text-align: center;
    }
}

.deco1 {
    grid-area: deco1;
    height: 100%;
}

.deco2 {
    grid-area: deco2;
    height: 100%;
}

footer {
    position: absolute;
    bottom: 1em;
    right: 1em;
    text-align: right;
    padding: 0.5em;
    background: #f2cea2;
    background: linear-gradient(0deg,#f2cea2 83%, #f7e4c6 100%);
    border-radius: 10px;
    border: 5px outset #b8813a;
}

@media only screen and (max-width: 800px) {

    body {
        width: 90vw;
        margin: 5px;
    }
    main {
        display: grid;
        width: 95%;
        height: auto;
        grid:
        [row1-start] "deco1 deco1" auto [row1-end]
        [row2-start] "portrait portrait" auto [row2-end]
        [row3-start] "name name" auto [row3-end]
        [row4-start] "icons icons" auto [row4-end]
        [row5-start] "facts facts" auto [row5-end]
        [row6-start] "person person" auto [row6-end]
        [row7-start] "likes dislikes" auto [row7-end]
        [row8-start] "hooks hooks" auto [row8-end]
        / 1fr 1fr;
    }

    .deco1 {
        width: 100%;
    }

    .icons {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .hooks {
        height: 300px;
        .text {
            height: 290px;
            p {
                text-indent: 0;
                font-size: 16px;
        }
    }
}

    .deco2 {
        display: none;
    }

    footer {
        position: relative;
        width: fit-content;
        float: right;
    }
    
}