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 main main"
    "navbar main main"
    "navbar footer footer";
    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);
}

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;
    scroll-behavior: smooth;
}

main img {
    width:300px;
}

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

::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);
}

.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;
}