/* light/dark mode preferences */
.dark-mode {
    #ratinghint-icon {
        filter: invert(1);
    }
    #rotatecoverbutton {
        filter: invert(1);
    }
}

.homemediainfocontainer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "image"
    "info"
    "table";
    gap: 15px;
}
.homemediainfoimage {
    grid-area: image;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.homemediainfomain {
    grid-area: info;
}
.homemediainfotable {
    grid-area: table;
}

/* image */
#cover:hover {
    transform: scale(1.1);
    transition: transform 0.35s;
}
#cover {
    transform: scale(1);
    transition: transform 0.35s;
    position:relative;
    z-index:300;
}
#rotatecoverbutton:hover, #rotatecoverbutton:focus {
    filter: invert(0.4);
}
#rotatecoverbutton:active {
    filter: invert(0.6);
    position:relative;
    z-index:0;
}

/* navigation bar */
#homemedianav {
    background-color: rgb(64,199,57);
    background: linear-gradient(180deg, #3868b2 0%, #22406d 50%, #1c3458 100%);
    color: white;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 0.2fr 0.6fr 0.2fr;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-radius: 15px;
}
#homemedianav h1 {
    display: inline;
    margin: 0;
}
#homemedianav a:link, #homemedianav a:visited {
    color: inherit;
    text-decoration: none;
}
#homemedianav a:hover, #homemedianav a:focus {
    filter: invert(0.2);
    text-decoration: underline;
}
#homemedianav a:active {
    filter: invert(0.4);
    text-decoration: underline;
}
#previous {
    justify-self:start;
    text-decoration: none;
}
#next {
    justify-self:end;
    text-decoration: none;
}
.homemediaarrows {
    padding: 0px 16px;
}
.homemedianavtitlelinks {
    display: inline-block;
    text-align: center;
}

/* short status */
.unrestored {
    background-color: red;
    color: white;
}
.sdunofficial {
    background-color: rgb(121, 58, 0);
    color: white;
}
.sdrestored {
    background-color: rgb(224, 206, 43);
    color: black;
}
.hdunofficial {
    background-color: purple;
    color: white;
}
.hdrestored {
    background-color: rgb(0, 175, 0);
    color: black;
}

/* short */
table > tbody > tr > td > a:link, table > tbody > tr > td > a:visited {
    color: inherit;
}
table > tbody > tr > td > a:hover, table > tbody > tr > td > a:focus {
    filter: invert(0.3);
    text-decoration: underline;
}
table > tbody > tr > td > a:active {
    filter: invert(0.6);
}

/* the hint icon */
.ratinghint-container {
    position: relative;
}
.ratinghint-hint {
    visibility: hidden;
    max-width: 500px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 400;
    top: 100%;
    left: 29%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 11px;
    overflow-wrap: break-word;
}
.ratinghint-header {
    display: block;
}
.ratinghint-header h2 {
    display: inline-block;
}
#ratinghint-containter {
    display: inline-block;
}
#ratinghint-icon {
    transition: filter 0.35s;
}
#ratinghint-icon:hover {
    filter: contrast(0.2);
}
#ratinghint-containter:hover .ratinghint-hint {
    visibility: visible;
    opacity: 1;
}
/* #ratinghint-containter .ratinghint-hint::after {
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #555 transparent;
} */

/* main */
.homemediainfomain ul {
    margin: 0;
}
.homemediainfomain h2, .homemediainfomain h3 {
    margin-bottom: 0;
}
.homemediainfotable h2 {
    margin: 0;
}
.homemediainfotablenote {
    margin: 0;
}
/* desktop */
@media screen and (min-width: 650px) {
    .homemediainfocontainer {
        display: grid;
        grid-template-columns: 1.3fr 0.7fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: "info image"
        "table table";
        gap: 15px;
    }
}