*{
    --text-color: #c5c8c6;
    --gold: #FFC300;
    --red: #ce5757;
    --dark-blue: #066364;
    --gray: #636363;
    --light-gray: #b5b5b5;
    --dark-gray : #1b1f23;
    --dark-background-color: #252b30;
    --orange: #f89520;


    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: var(--text-color);
    border: none;
    outline: none;
    font-family: "Jersey 10", sans-serif;




}

span{
    font-weight: normal;
}

table *{
    font-weight: normal;
}

table{
    border-collapse: collapse;

}


.redacted{
    text-decoration-line: line-through;
    text-decoration-thickness: 1em;
    text-decoration-color: black;

}

ol, ul{
    list-style-type: none;
}

input[type="text"]{
    background-color: inherit;

}

input[type="text"]:focus{
    border: none;
}

body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-image: url('/img/bg/otis-redding.png');
    background-color: #1b1f23;
    font-size: 1.2em;

}

@keyframes glowingEffect {
    from{text-shadow: rgba(255, 255, 255, 1) 1px 1px 2px;}
    to{text-shadow: rgba(100, 100, 100, 1) 1px 1px 100px;}


}

header{
    padding: 20px 0;
    text-align: center;
    align-content: center;
    background-color: #0f0f0f;
    background-image: url('/img/bg/otis-redding.png');
    font-size: 4em;
    font-weight: bold;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    animation: glowingEffect 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

footer{
    height: 4em;
    background-color: #0f0f0f;
    background-image: url('/img/bg/otis-redding.png');
    text-align: center;
    align-content: center;

}

main{
    margin: 5em auto 5em auto;
    display: grid;
    grid-template-columns: 15em auto 15em;
    gap: 1em;
    width: 100%;
    flex: 1;
    justify-content: center;

}

@media  (max-width: 64em){
    main{
        grid-template-columns: 15em auto;
    }
}


.side-nav{

    grid-column: 1;
}

.wrapper{
    grid-column: 2;
    flex-direction: column;
    display: flex;
    align-self: start;
    max-width: 64em;


}

.content{
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;

}

.square{
    background-color: #252b30;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);

}

.text{
    margin: 20px;
    padding: 40px 60px 40px 60px;
    line-height: 1.2em;
    background-color: #E8E8E8;
    background-image: url("/img/bg/cream-paper.png");


}

.torn{
    clip-path: polygon(55% 3px, 64% 11px, 72% 1px, 85% 12px, 100% 3px, 100% 100%, 84% 95%, 77% 99%, 70% 94%, 62% 98%, 54% 93%, 50% 97%, 40% 100%, 29% 100%, 21% 97%, 10% 100%, 0% 100%, -0.14% 1.34px, 7% 13px, 12% 0px, 19% 7px, 28% 8px, 40% 4px, 49% 9px);
    padding-top: 10px;
}


.text p:not(.author):not(.extract){

    color: rgba(0, 0, 0,0.7);
    font-family: "Special Elite", serif;
}

.author{
    font-style: italic;
    font-family: "Courier", serif;
    color: rgba(0, 0, 0,0.7);
    font-weight: bold;
    /*border-top: 1px dashed black;*/
    text-align: right;
    font-family: "Nothing you could do", serif;
}

.extract {
    font-style: italic;
    font-family: "Courier", serif;
    color: rgba(0, 0, 0, 0.7);
    font-weight: bold;
    border-top: 1px dashed black;
    text-align: right;

}


p:not(:last-child){
    padding-bottom: 10px;
}

.shadow{
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
}



ul.side-nav{
    list-style:none;
    /*font-size: 1.2em;*/
    margin-bottom: 50px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
    padding: 0;
    border-radius: 5px 5px 0 0;
    margin-top: 0;
    /*border: 1px solid #c5c8c650;*/
    display: flex;
    flex-direction: column;




}

ul.side-nav li:first-child{
    /*background-color: #1f2428;*/
    font-weight: bold;
    border-radius: 0 5px 0 0;
    margin: auto;
    height: 2em;




}

ul.side-nav li:last-child{
    border-radius: 0 0 5px 0;

}

ul.side-nav li{
    display: flex;
    align-items: center;


}

ul.side-nav li:not(:first-child){
    background-color: #252b30;
    cursor: pointer;
    border-top: 1px solid rgba(255, 255, 255, 0.25);

}

ul.side-nav li:not(:first-child):hover{

    display: flex;

}

ul.side-nav li a{

    padding: 20px;
    width: 100%;
    text-align: left;

}

ul.side-nav li a:hover{

    background-color: rgba(255, 255, 255, 0.1);

}

ul.side-nav img{

    height: 2em;
    padding: 5px;
}

.cb{
    display: flex;
    flex-direction: column;
    background-color: #252b30;
    border-radius: 0px 0px 10px 10px;
    grid-column: 2;

    margin: auto;
    padding: 20px;
    border-bottom: rgba(165, 52, 235, 0.2) 10px solid;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);


}

.cb-text{
    height: 15em;
    overflow: hidden;
    display: flex;
    flex-direction: column-reverse;
    font-size: 1em;



}

.cb-text th{
    display: flex;
    flex-direction: row;

    margin-bottom: 10px;
    font-weight: normal;
    align-self: start;
}

.cb-text tr{
    display: flex;
    flex-direction: row;
    gap: 5px;
    line-height: 1em;

}

.cb-text .delete{
    color: red;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 1em;


}

/*.cb-text .bust img{
    height: 1em;
    margin: auto;

}*/

.cb img{
    height: 1em;
    margin: auto;

}


.cb-text .message{
    text-align: start;
    flex: 1;
    border-left: 2px solid white;
    padding-left: 5px;

}

.cb-text .time{
    width: auto;
    justify-content: space-evenly;

}

.cb form{
    display: flex;
    flex-direction: row;
    gap: 1em;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.cb input[type="text"]{
    flex: 0.6;
}

.medals{

    display: flex;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
    margin: auto;



}

.medals div{
    height: auto;
    width: 100%;
    aspect-ratio: 1/1;
    background-color: white;

}

.medals .gold{
    background-color: var(--gold);
}

.medals .red{
    background-color: var(--red);
}

.medals .orange{
    background-color: var(--orange);
}

.medals div:first-child{
    border-radius: 2px 0 0 2px;
}

.medals div:last-child{
    border-radius: 0 2px 2px 0;
}

.tooltip-text{
    font-size: 1.2em;
    width: max-content;
    max-width: 200px;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 100%;
    background-color: var(--dark-background-color);
    padding: 5px;
    border: 1px solid white;


}

.tooltip:hover > .tooltip-text{
    visibility: visible;

}