body {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    background-color: black;
} 

@font-face{
  src:url('newrocker.woff2');
  font-family: 'newrocker';
}

h2{
  font-family:'newrocker';
}

.container {
    background-color: #07181e;
    color:white;
    display:grid;
    grid-template-areas:
    "pfp header poster"
    "navbar main poster"
    "navbar footer poster";
    width:fit-content;
    min-height:500px;
    height:fit-content;
    margin:auto;
    grid-template-columns: 200px 455px 230px;
    grid-template-rows: 200px 350px 100px;
    padding:5px;
    gap:5px;
    border-radius:0 50px;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
}

.pfp {
    grid-area:pfp;
    background-image: url(ghost5.gif);
    height:200px;
    width:200px;
    background-size: cover;
    filter:sepia(70%) hue-rotate(40deg);
}

header {
    grid-area: header;
    background-image: url(header.png);
    height:200px;
    width:455px;
    background-size: cover;
}

.poster {
    grid-area:poster;
    background-image: url(poster.png);
    background-size: contain;
    border-radius:0 50px 0 0;
}

nav {
    grid-area:navbar;
    background-image: linear-gradient(#7aff05, #266610 40%, #07181e 80%);
    padding:5px;
    color:black;
    border-radius:0 0 0 50px;
}

mark{
    background-color: #7aff05;
}

nav a {
    color:white;
    text-decoration: none;
}

nav a:hover {
    background-color: #266610;
    color:#7aff05;
    text-decoration: underline;
}

li {
    list-style-type: none;
}

main {
    grid-area:main;
    background-image: linear-gradient(#266610, #07181e);
    padding:10px;
    overflow-y:scroll;
}

footer {
    grid-area:footer;
    background-color: #07181e;
    padding:10px;
    margin:auto;
}

.faggots {
    background-image: url(faggots.png);
    position:fixed;
    height:300px;
    width:300px;
    background-size: contain;
    background-repeat: no-repeat;
    right:0;
    bottom:0;
    animation-name: jump;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function:ease-in-out;
}

@keyframes jump {
    0%{bottom:0;}
    50%{bottom:10px;}
    100%{bottom:0;}
}

@media(max-width:700px){
    .faggots{
        height:100px;
        width:100px;
    }
}

::selection{
    background-color: #7aff05;
    color:#07181e;
}

   ::-webkit-scrollbar {
width: 14px;
}

::-webkit-scrollbar:horizontal {
height: 14px;
}

::-webkit-scrollbar-corner {
background: #000000;
}

::-webkit-scrollbar-track:vertical {
background: linear-gradient(90deg, #07181e, #266610 20%);
border-radius: 5px; 
}

::-webkit-scrollbar-track:horizontal {
background: linear-gradient(180deg, #07181e, #266610 20%);
border-radius: 5px; 
}

::-webkit-scrollbar-thumb {
border: 1.5px solid #39e313;
border-radius: 5px;
box-shadow: inset 0 -1px 1px #020202, inset 0 1px 1px #000000;
}

::-webkit-scrollbar-thumb:vertical {
background: linear-gradient(90deg, #39e313 0, #266610);
}

::-webkit-scrollbar-thumb:horizontal {
background: linear-gradient(180deg, #39e313 0, #266610);
}

.currently {
    background-color: #07181e;
    position: relative;
    height: fit-content;
    width: 96%;
    display: flex;
    flex-direction: column;
    font-size:.9em;
    border-radius:0 50px 0 0;
    padding:5px;
}

hr {
    width:90%;
    border-radius: 100%;
}

.disable-font-button {
  top:10;
  left:10;
  position:fixed;
  filter:drop-shadow(0 0 5px grey);
}

button {
  background-color:#07181e;
  color:#7aff05;
  border:none;
  border-radius:20px;
  padding:15px 10px;
}

button:hover{
  background-color:#266610;
  cursor:pointer;
}

button:active {
  background-color:#07181e;
}

a {
  color:#7aff05;
}