body {
    margin: 0;
    padding: 0;
    background: black;
    /* background-image: url('../bg/brchecker.jpg'); */
    background-size: 45%;
    font-family: var(--main);
}

h2 button {
    font-size: 1.25em;
    font-family: digital7;

}

button {
    font-family: var(--main);
    font-size: 1em;
    border: 1px solid black;
    padding: 5px;
}

#hi {
    align-items: center !important;
}

.box {
    /* border: 1px solid red; */
    width: 90%;
    height: 80%;
    position: relative;
}

.rightbar {
    width: 20em;
    border: 1px solid black;
    position: absolute;
    top: 0;
    right: 10em;
    /* background: gray; */
}

.sorting {
    background: gray;
    padding: 1em 0;
}

.sorting div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 90%;
    margin: auto;
    gap: .75em;
}

.langSort {
    margin-bottom: 3em;
}

.mainarea {
    width: calc(50% - 40px);
    height: calc(100% - 40px);
    margin: auto;
    /* border: 2px dashed rgb(255, 240, 240); */
    font-family: var(--main);
    background: black;
    /* background-image: url('../bg/brchecker.jpg'); */
    background-size: 45%;
    color: white;
}

.diary {
    width: calc(93% - 2em);
    margin: auto;
    height: calc(100% - 2em);
    overflow: auto;
    padding: 1em;
}

.entry {
    text-align: left;
    /* border: 1px solid white; */
    padding: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2em;
    margin-bottom: 1em;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(125, 125, 125, 0.551);
}

.words img {
    border: 1px solid white;
}


.info {
    width: calc(20% - 20px);
    background: rgba(0, 0, 0, 0.348);
    backdrop-filter: blur(2px);
    padding: 10px;
}

.info img {
    vertical-align: middle !important;
}

.info>.icon {
    height: 120px;
    display: block;
    margin-bottom: 1em;
    border: 1px solid rgba(113, 113, 113, 0.501);
    padding: 8px;
    background: rgba(101, 5, 5, 0.601);
}

.info>.title {
    font-size: 1.25em;
}

.info>.date {
    font-size: 1.125em;
    /* font-weight: bold; */
    margin-top: 0em;
}


.words {
    width: 80%;
}

.words p:first-of-type {
    margin-top: 0;
}

.words p:last-of-type {
    margin-bottom: 0;
}

.netabare {
  color: rgb(63, 63, 63);
  background: rgb(63, 63, 63);
  padding: 0 5px 2px 5px;
}

.netabare:hover {
  color: white;
}