:root {
  --nav-color: rgb(6, 47, 43);
  --bg-color: rgb(31, 71, 63);
  --bg-width:1000px;
  --bevel-main: 10px;
  --outline-color: rgb(79, 8, 8);
  --outline-thickness: 6px;
  --outline-softness: 10px;
  --text-outline: 
      var(--outline-thickness) 0px var(--outline-softness) var(--outline-color),
      0px var(--outline-thickness) var(--outline-softness) var(--outline-color),
      calc(var(--outline-thickness) - 2*(var(--outline-thickness))) 0px var(--outline-softness) var(--outline-color),
      0px calc(var(--outline-thickness) - 2*(var(--outline-thickness))) var(--outline-softness) var(--outline-color);
  
}

@font-face {
  font-family: titlefont;
  src: url(Assets/Fonts/RyujinAttack-gxApE.ttf);
}

body {
  background-color: rgb(0, 0, 0);
  background-image: url(Assets/Background/Background.png);
  background-size: 450px;
  margin: 0px;
}
.header {
  background-color: red;
  background: url(Assets/Background/Cat.png) no-repeat center bottom;
  background-size: 950px;
  max-width: var(--bg-width);
  margin: auto;
  padding: calc(200px - 2rem) 0px;
}

.paws {
  position: absolute;
  top: 115px;
  left:150px ;
  width: 950px;
  pointer-events: none;
}

.headTitle {
  margin: 0px;
  text-align: center;
  color: white;
  font-size: 4.5rem;
  font-family: titlefont;
  translate: 15px -45px;
  text-shadow: var(--text-outline);
}

.container {
  display: grid;
  grid-template-rows: 100px auto;
  gap: 10px;
  width: var(--bg-width);
  margin: auto;
  height: 1000px;

}

.navbar {
    display: grid;
    /* make sure the grid-template-columns say 'auto' the same number of times as there are  */
    grid-template-columns: auto auto auto auto auto;
    grid-template-rows: auto;
    gap: 10px;
    padding: 0px 10px;
    background-color: var(--nav-color);
    border-radius: var(--bevel-main);
    max-width: var(--bg-width);
}

.pageLink {
    transition: all 200ms;
    text-align: center;
    width: auto;
    margin: auto 0px;
    padding: calc() 0px;
    font-size: 1.5rem;
    color: white;
}
.pageLink:visited {
    color: white;
}
.pageLink:hover {
    transition: all 200ms;
    scale: 1.2;
    rotate: 10deg;
}

.content {
  background-color: var(--bg-color);
  border-radius: var(--bevel-main);
}

.footer{
  height: 400px;
}