@import url(https://fonts.bunny.net/css?family=share-tech-mono:400);

#BookInfo {

    display: flex;
    justify-content: space-evenly;

    margin-top: 5rem;

    background-color: lightskyblue;
}

/* modified from https://getcssscan.com/css-buttons-examples */
.DescriptionBorder {

    margin: 1%;

    --thickness: 3px;   /* border thickness */
    --squishing: .4em;
    --shift: calc(100% - var(--thickness) - 2*var(--squishing));

    --top_left: conic-gradient(from 90deg at var(--thickness) var(--thickness),#0000 90deg,var(--color) 0);
    --right: var(--squishing)/var(--shift);
    --bottom: var(--shift);

    background: var(--top_left) var(--squishing) var(--right) var(--bottom);

    --color: #373B44;
    color: var(--color);

    background-color: white;
}

#Description {

    margin: 1%;
    padding: 1%;
    color:black;
    font-size: 0.9em;
}

#ImageDiv {

    margin: 1% 1% 1% 1%;
}

img {

    width: 200px;
    height: 313px;
    object-fit: cover;
}

#Authors, #Commentary {

    font-family: 'Share Tech Mono';
    font-size: 1.2em;
    font-weight: 400;
    text-decoration: underline;

    margin-left: 1%;
}

#Names {

    margin-top: -0.5%;
    margin-left: 1%;
}

#TagList {
    margin-top: 2%;
    margin-bottom: 1%;
    display: flex;
    list-style-type:  none;
}

/* taken from https://getcssscan.com/css-buttons-examples */
.Tag {

    display: flex;
    justify-content: center;

    position: relative;
    width: 100%;
    height: 50px;
    max-width: 120px;

    border: 0 solid #E5E7EB;
    box-sizing: border-box;

    font-family: Trebuchet, sans-serif;
    font-size: 0.66rem;
    font-weight: 600;

    line-height: 1.75rem;
    padding: 0.5rem 0.5rem;
    margin-left: 1%;

    text-decoration: none #000000 solid;
    text-decoration-thickness: auto;

    cursor: pointer;

    color: #000000;
    background-color: #3DD1E7;
}

.Tag:focus {
  outline: 0;
}

.Tag:after {

    position: absolute;

    bottom: 4px;
    left: 4px;
    width: calc(100% - 1px);
    height: calc(100% - 1px);

  content: '';
  border: 1px solid #000000;

}

.Tag:hover:after {

  bottom: 2px;
  left: 2px;
}

.DescriptionBorderComment {

    margin: 0rem 25rem 0rem 25rem;
    padding: 5rem 5rem 5rem 5rem;

    --thickness: 3px;   /* border thickness */
    --squishing: .4em;
    --shift: calc(100% - var(--thickness) - 2*var(--squishing));

    --top_left: conic-gradient(from 90deg at var(--thickness) var(--thickness),#0000 90deg,var(--color) 0);
    --right: var(--squishing)/var(--shift);
    --bottom: var(--shift);

    background: var(--top_left) var(--squishing) var(--right) var(--bottom);

    --color: #373B44;
    color: var(--color);

    background-color: white;
}