body {
  height: 1550px;
  background-image: linear-gradient(to bottom, #183D40, #091317);
  cursor: url("paw.png"), auto;
}

.body-music {
  height: 1700px;
  background-image: linear-gradient(to bottom, #183D40, #091317);
  cursor: url("paw.png"), auto;
}
.body-art {
  height: 1200px;
  background-image: linear-gradient(to bottom, #183D40, #091317);
  cursor: url("paw.png"), auto;
}
.body-shows {
  height: 2080px;
  background-image: linear-gradient(to bottom, #183D40, #091317);
  cursor: url("paw.png"), auto;
}

  a:hover {
  cursor: url("pawtwo.png"), pointer;
}

  @font-face {
   font-family:nightblood;
   src: url(NightBlood.ttf)
 }

  @font-face {
   font-family:bitlight;
   src: url(BitLight.TTF)
 }

  @font-face {
   font-family:staychill;
   src: url(StayChill.ttf)
 }

  @font-face {
   font-family:souldaisy;
   src: url(SoulDaisy.otf)
 }
 
 
/*grid box */
 .grid-container {
  display: grid;
size: 500px;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr 2fr;
  gap: 2px;
}
.grid-container {
  margin: 20px;
  height: 1125px;
  border-style: outset;
  border-color: #5480BA;
  border-radius: 20px;
  border-width: 7px;
  background-image: linear-gradient(to bottom, #243E57, #191F38);
  box-shadow: 1px 1px 15px #000000;
}

/* grid box content */
.content {
  grid-column: 2fr;
  grid-row: 2fr
}

.sidebar {
  grid-column: 1fr;
  grid-row: 1fr;
}

.footer {
  grid-column: 2fr;
  grid-row: 2fr
}

/*grid box music */
 .grid-container-music {
  display: grid;
size: 500px;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr 2fr;
  gap: 2px;
}
.grid-container-music {
  margin: 20px;
  height: 1300px;
  border-style: outset;
  border-color: #5480BA;
  border-radius: 20px;
  border-width: 7px;
  background-image: linear-gradient(to bottom, #243E57, #191F38);
  box-shadow: 1px 1px 15px #000000;
}

/* grid box content */
.content-music {
  grid-column: 2fr;
  grid-row: 2fr
}

.sidebar-music {
  grid-column: 1fr;
  grid-row: 1fr;
}

.footer-music {
  grid-column: 2fr;
  grid-row: 2fr
}

/*grid box art */
 .grid-container-art {
  display: grid;
size: 500px;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr 2fr;
  gap: 2px;
}
.grid-container-art {
  margin: 20px;
  height: 800px;
  border-style: outset;
  border-color: #5480BA;
  border-radius: 20px;
  border-width: 7px;
  background-image: linear-gradient(to bottom, #243E57, #191F38);
  box-shadow: 1px 1px 15px #000000;
}

/* grid box content */
.content-art{
  grid-column: 2fr;
  grid-row: 2fr
}

.sidebar-art {
  grid-column: 1fr;
  grid-row: 1fr;
}

.footer-art {
  grid-column: 2fr;
  grid-row: 2fr
}
 
 /*grid box shows */
 .grid-container-shows {
  display: grid;
size: 500px;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr 2fr;
  gap: 2px;
}
.grid-container-shows {
  margin: 20px;
  height: 1700px;
  border-style: outset;
  border-color: #5480BA;
  border-radius: 20px;
  border-width: 7px;
  background-image: linear-gradient(to bottom, #243E57, #191F38);
  box-shadow: 1px 1px 15px #000000;
}

/* grid box content */
.content-shows {
  grid-column: 2fr;
  grid-row: 2fr
}

.sidebar-shows {
  grid-column: 1fr;
  grid-row: 1fr;
}

.footer-shows {
  grid-column: 2fr;
  grid-row: 2fr
}

 
 
 
 
 /* ashs webpage header */
 h1 {
  color: #5FA14F;
  text-shadow: 5px 5px #090A1F;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  box-shadow: 1px 1px 15px #101C12;
  background-image: linear-gradient(to bottom, #243026, #19241C);
  border-style: outset;
  border-width: 10px;
  border-color: #306E3D;
  border-radius: 20px;
  border-right-width: 30px;
  border-left-width: 30px;
  margin-left: 300px;
  margin-right: 300px;
  padding: 15px;
  font-family: "staychill";
  text-align: center;
  font-size: 65px;
 }
 
 /* navbar settings */
 .navbar {
  width: 600px;
  margin-left: 25px;
  border-style: outset;
  border-width: 5px;
  border-color: #306E3D;
  border-radius: 10px;
  box-shadow: 1px 1px 15px #0D1A26;
  background-image: linear-gradient(to bottom, #243026, #19241C);
  text-align: left
}
/* navbar text settings */
 nav a {
  margin: 20px;
  color: #5FA14F;
  text-decoration: none;
  font-size: 40px; 
  font-family: "staychill";
  text-shadow: 5px 5px #090A1F;
 }
 
 .active {
  color: #1E6E50; 
 }
 
 /* larger class content settings "parent" */
 content {
   color: #5FA14F;
   text-shadow: 4px 4px #090A1F;
   font-family: "nightblood";
   text-align: center;
   font-size: 35px;
 }

/* about me */
 h3 {
   box-shadow: 1px 1px 15px #0D1A26;
   background-color: rgba(13, 26, 38, 0.3);
   width: 175px;
   padding-left: 20px;
   text-align: left;
   font-size: 40px;
   margin-bottom: 25px;
 }
 /* tv shows */
  h4 {
   box-shadow: 1px 1px 15px #0D1A26;
   background-color: rgba(13, 26, 38, 0.3);
   width: 600px;
   padding-left: 20px;
   text-align: left;
   font-size: 40px;
   margin-bottom: 25px;
 }
 /* main content text */
 p {
   box-shadow: 1px 1px 15px #0D1A26;
   background-color: rgba(13, 26, 38, 0.3);
   width: 950px;
   margin-top: 8px;
 }
 /* secondary content header */
 h2 {
    box-shadow: 1px 1px 15px #0D1A26;
   background-color: rgba(13, 26, 38, 0.3);
   width: 300px;
   padding-left: 20px;
   text-align: left;
   font-size: 38px;
 }
 /* interests list */
 ul {
    box-shadow: 1px 1px 15px #0D1A26;
   background-color: rgba(13, 26, 38, 0.3);
   width: 250px;
   text-align: left;
   font-size: 30px;
 }
 /* tv show list */
  .list-two {
    box-shadow: 1px 1px 15px #0D1A26;
   background-color: rgba(13, 26, 38, 0.3);
   width: 250px;
   text-align: left;
   font-size: 30px;
 }
 
 
 /* pictochat */
.image-container {
  position: relative;
  width: 400px;
  height: 295px;
  border-style: outset;
   border-color: #4C996A;
   border-radius: 30px;
   border-width: 7px;
   margin-top: 50px;
   float: right;
   box-shadow: 3px 3px 15px #000000;
   
}
/* pictoimage container */
.image-container img {
  border-radius: 26px;
  width: 100%;
}
/* pictoimage text */
.image-text {
  position: absolute;
  top: 24px;
  left: 42px;
  line-height: 1.3;
   color: #39529E;
   text-shadow: 1px 1px #091317;
   font-family: "bitlight";
   text-align: left;
   font-size: 19.4px;
}
 /* pictochat */
  .image-two {
   width: 400px;
   border-radius: 8px;

 }





 
 sidebar {
   float: right;
   background-color: #0D1A26;
   height: 1000px;
   font-family: "nightblood";
   text-align: center;
   font-size: 30px;
   color: #658BC9;
   text-shadow: 4px 4px #090A1F;
   border-style: outset;
   border-color: #4C996A;
   border-radius: 10px;
   border-width: 7px;
 }
 /* ciel */
 .image-one {
   width: 350px;
   margin: 15px;
   border-radius: 7px;
   box-shadow: 3px 3px 15px #000000;
 }

  sidebar-music{
   float: right;
   background-color: #0D1A26;
   height: 1010px;
   font-family: "nightblood";
   text-align: center;
   font-size: 30px;
   color: #658BC9;
   text-shadow: 4px 4px #090A1F;
   border-style: outset;
   border-color: #4C996A;
   border-radius: 10px;
   border-width: 7px;
}
.ghost-pic{
     width: 425px;
   margin: 15px;
   border-radius: 7px;
   box-shadow: 3px 3px 15px #000000;
}
.noahk-pic{
     width: 425px;
   margin: 15px;
   border-radius: 7px;
   box-shadow: 3px 3px 15px #000000;
}
.PG-pic{
   width: 425px;
   margin: 5px;
   margin-top: 30px;
   border-radius: 7px;
   box-shadow: 3px 3px 15px #000000;
}
 
 
   sidebar-art{
   float: right;
   background-color: #0D1A26;
   height: 700px;
   width: 550px;
   font-family: "nightblood";
   text-align: center;
   font-size: 30px;
   color: #658BC9;
   text-shadow: 4px 4px #090A1F;
   border-style: outset;
   border-color: #4C996A;
   border-radius: 10px;
   border-width: 7px;
}

   sidebar-shows{
   float: right;
   background-color: #0D1A26;
   height: 1650px;
   width: 475px;
   font-family: "nightblood";
   text-align: center;
   font-size: 30px;
   color: #658BC9;
   text-shadow: 4px 4px #090A1F;
   border-style: outset;
   border-color: #4C996A;
   border-radius: 10px;
   border-width: 7px;
}


 
 button {
   cursor: url("pawtwo.png"), pointer;
 box-shadow: 10px 10px #040D06;
 color: #42669E;
 padding: 15px;
 float: right;
 margin-left: 45px;
 margin-right: 35px;
 text-shadow: 2px 2px #090A1F;
 background-color:#5FA14F;
 font-size: 30px;
 border: outset 3px #96D4A5;
 border-radius: 20px;
 font-family: "souldaisy" 
}

button:active {
  transform: translatey(4px);
}

 
 footer {
   margin-left: 14px;
   width: 275px;
   box-shadow: 1px 1px 15px #0D1A26;
   background-color: rgba(13, 26, 38, 0.3);
   color: #5FA14F;
   text-shadow: 4px 4px #090A1F;
   font-family: "nightblood";
   text-align: left;
   font-size: 25px;
 }