body {
  text-align: center;
  font-size: 18px;
  margin: 0;
  padding: 20px;
  color: #FFFFFF;
  font-family: 'Times New Roman', serif;
  min-height: 100vh;
  min-width: 90vw;
  overflow: auto;
  background-image: url('images/ghost.png');
  background-color: #0d2818;
  background-repeat: repeat;
  background-size: auto;
  background-position: top left;
  cursor: url('cursor/Skyrim-normal.cur'), auto;
}

h1 {
  color: #e0f2e0;
  text-shadow: 0px 0px 10px rgba(152, 251, 152, 0.8);
}

h2 {
  color: #e0f2e0;
  text-align: center;
  box-sizing: border-box;
  background-color: rgba(13, 40, 24, 0.6);
  border-radius: 8px;
  padding: 5px;
  border: 1px solid rgba(152, 251, 152, 0.3);
}

footer {
  font-size: 10px;
  justify-content: center;
  gap: 12px;
  border-style: ridge;
  width: 100%;
  box-sizing: border-box;
  border-color: #00ff00;
  background-color: #0d2818;
  color: #b3e6cc;
}

a:link {
  color: #b3e6cc;
  text-shadow: 0px 0px 5px rgba(152, 251, 152, 0.5);
}

a:visited {
  color: #81d4b3;
}

a:hover {
  color: #ffffff;
  text-shadow: 0px 0px 8px #ffffff;
  cursor: url('cursor/Skyrim-link.cur'), auto;
}

.topnav {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 4px;
  border-radius: 12px;
  gap: 4px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.topnav a {
  flex: 1 1 150px;
  display: block;
  padding: 15px;
  background-color: #90ee90;
  background-image: linear-gradient(rgb(184, 235, 184), rgb(0, 255, 0));
  color: black;
  text-align: center;
  text-decoration: none;
  font-size: 17px;
  font-family: sans-serif;
  font-weight: 100;
  border-color: black;
  text-shadow: 0px -1px #333;
  box-sizing: border-box;
  position: relative;
}

.topnav a.active {
  background-image: linear-gradient(rgb(43, 155, 43), rgb(155, 255, 155));
  color: black;
}

.topnav a:hover {
  background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
}

th, td {
  border: 3px solid #00ff00;
  border-radius: 6px;
  background-color: #215c21;
}

table {
  margin-left: auto;
  margin-right: auto;
}

td {
  vertical-align: top;
  padding: 3px;
  text-align: left;
}

hr {
  background-color: white;
  height: 3px;
  width: 95%;
}

.content {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, auto);
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.jinix, .chatbox, .hobby-links, .main-column {
  justify-content: center;
  align-items: center;
  border-style: ridge;
  border-color: #00ff00;
  background-color: #0d2818;
  box-sizing: border-box;
  position: relative;
  text-align: center;
  border-radius: 6px;
}

.jinix {
  grid-column: 5 / 6;
  grid-row: 1 / 2;
  align-self: stretch;
}

.hobby-links {
  grid-column: 1 / 2;
  grid-row: 1/2;
  align-self: stretch;
}

.main-column {
  grid-column-start: 2;
  grid-column-end: 5;
  grid-row: 1/5;
  padding: 10px;
  align-self: start;
  border-style: ridge;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

.hailey {
  color: black;
  display: grid;
  align-items: center;
  background-color: rgb(251,174,210);
  gap: 3px;
  padding: 5px;
  border-style: ridge;
  border-color: pink;
}

.hailey h2{
  background-color: pink;
}

.hailey a{
  overflow: hidden;
  position: relative;
  display: inline-block;
  background-color: lightpink;
  background-image: linear-gradient( rgb(255,228,225), rgb(222,111,161));
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 13px;
  font-family: sans-serif;
  font-weight: 100;
  border-radius: 6px;
  border-width: 6px;
  border-color: black;
  box-shadow: 0px 1px 4px -2px #333;
  text-shadow: 0px -1px #333;
}

.hailey a:hover {
  background-image: linear-gradient(rgb(255,102,204), pink);
}

.hailey td {
  border-style: none;
  border-radius: none;
  background: none;
  vertical-align: top;
  padding: 3px;
  text-align: left;
}

.photo {
  display: grid;
  grid-template-columns: auto auto auto auto;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.photo-v {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.p{
  text-align: left;
}

@media (max-width: 1400px) {
  body{
    font-size:20px;
  }
  .content {
    grid-template-columns: repeat(6, 1fr);
  }
  .hobby-links {
    grid-column: 1 / 3;
    grid-row: 1/2;
    justify-self: stretch;
  }
  .jinix {
    grid-column: 1 / 3;
    grid-row: 2 / 4;
    justify-self: stretch;
  }
  .main-column {
    grid-column-start: 3;
    grid-column-end: 7;
  }
}

@media (max-width: 950px) {
  .content{
    grid-template-columns: repeat(4, auto);
  }
  .main-column {
    grid-column: 1 / 5;
    grid-row: 1/2;
  }
  .hobby-links{
    grid-column: 2 / 4;
    grid-row: 2 / 3;
  }
  .jinix {
    grid-column: 2 / 4;
    grid-row: 3 / 4;
    justify-self: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  *{
    cursor: auto;
  }
}