body {
background-color: #000825;
padding: 5px;
letter-spacing:3px;
font-size:17px;
line-height:19px;
font-family:'pixel', calibri, verdana, sans-serif;
color:#ffbbcc;
}
            
body {
  cursor: url('https://64.media.tumblr.com/3cb5a3435f7ba3ce0b0173585378a84b/3cb1fc505a591908-2a/s75x75_c1/45f9e9c186ca06ad832235b482e1dfc15a7ef136.gifv'), auto;
}

body *:hover {
  cursor: url('https://64.media.tumblr.com/3cb5a3435f7ba3ce0b0173585378a84b/3cb1fc505a591908-2a/s75x75_c1/45f9e9c186ca06ad832235b482e1dfc15a7ef136.gifv'), auto;
}

.page-layout {
display: flex;
flex-direction: row; /* header on the left, credits on the right */
gap: 20px;
align-items: flex-start; /* keeps the tops aligned */
}

.header {
background-color: #0a1647;
border-style: dotted;
border-width: 2px;
border-color: #2f53bf;
border-radius: 12px;
padding: 5px; 
gap: 12px;
height: 150px;
width: 400px;
}

.title {
font-size:31px;
color:#f66907;
border-bottom:1px dashed #f66907;
margin-bottom:5px;
display: flex;
justify-content: center;
align-items: center;
}

.gah{
font-size:17px;
line-height:19px;
height: 150px;
width: 400px;
}
            
.side-title {
font-size: 27px;
color:#f66907;
border-bottom:1px dashed #f66907;
margin-bottom:5px;
display: flex;
justify-content: center;
align-items: center;
}

.credit {
background-color: #0a1647;
border-style: dotted;
border-width: 2px;
border-color: #2f53bf;
border-radius: 12px;
padding: 5px;
gap: 12px;
height: 110px;
width: 110px;
}

.credits-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap; /* keeps everything in one long row *//* enables horizontal scrolling */
gap: 20px; /* spacing between each layout block */
padding: 10px;
width: 100%; /* ensures it spans the page */
}

.layout {
display: flex;
flex-direction: row;
gap:5px;
padding:5px;
}
.side {
flex:1;
order:1; /* ---------- change this to 0 if you want the sidebar appear left side ---------- */
gap:5px;
padding:5px;
}
.info {
background-color: #0a1647;
border-style: dotted;
border-width: 2px;
border-color: #2f53bf;
border-radius: 12px;
padding: 5px; 
gap: 12px;
}
.image-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}

.profile-1 {
width:110px;
height:110px;
border:1px solid #2f53bf;
border-radius:12px;
background:url(https://64.media.tumblr.com/45a6fd4e7a8d551b6ca811af4d50a086/171a6fb0c0fcbc88-59/s512x512u_c1/c13ec476663a38f81ffb967d70bf30103b992f07.pnj);
background-size:cover;
flex-shrink:0;
}

.profile-2 {
width:110px;
height:110px;
border:1px solid #2f53bf;
border-radius:12px;
background:url(https://44.media.tumblr.com/acd3ca9a979b204cd3718e3fb6155306/1a87eb64ce51bd21-ad/s512x512u_c1_f1/3053275b14df79b5545ff13111cb1714b84a4632.gif);
background-size:cover;
flex-shrink:0;
}

.profile-3 {
width:110px;
height:110px;
border:1px solid #2f53bf;
border-radius:12px;
background:url(https://64.media.tumblr.com/12d8e799eb17ede5ed0c3fb32fa7c4e6/a61151dd4af50172-a7/s96x96u_c1/3f86d88a5385dec3b028d099d95a943162c81732.pnj);
background-size:cover;
flex-shrink:0;
}

.profile-4 {
width:110px;
height:110px;
border:1px solid #2f53bf;
border-radius:12px;
background:url(https://64.media.tumblr.com/8703a9ff6a6205ab35af0c147d24acac/faf3c46fea452543-13/s512x512u_c1/7d2ba550e76b796f794feba4292ab055c74b9455.pnj);
background-size:cover;
flex-shrink:0;
}

.profile-5 {
width:110px;
height:110px;
border:1px solid #2f53bf;
border-radius:12px;
background:url(https://64.media.tumblr.com/34f2ef783d3826c11f58c29f054c1473/86d2ba1efe3f1fdd-79/s512x512u_c1/fd50c2b964e31010ba9a590b901770856748622a.pnj);
background-size:cover;
flex-shrink:0;
}

.profile-6 {
width:110px;
height:110px;
border:1px solid #2f53bf;
border-radius:12px;
background:url(https://64.media.tumblr.com/16427219ddf42371c4165dad27cc57b8/ecd0c8258eb1a55e-96/s512x512u_c1/382ce896f89e4cd2ec46921bf0a52daa77449675.pnj);
background-size:cover;
flex-shrink:0;
}

.main {
border-style: dotted;
border-color: #2f53bf;
border-radius: 12px;
padding: 5px; 
gap: 12px;
height: 50px;
width: 350px;
font-size: 20px;
line-height:27px;
display: flex;
justify-content: center;
align-items: center;
}


#navigation {
font-size: 20px;
line-height:27px;
height: 50px;
width: 350px;
} 
      
#navigation a:link, a:visited, a:active {
  padding:4px; letter-spacing:2px;margin-right:10px;
  color:#f66b07;/*orange*/
  }
      
#navigation a:hover {background:#ffbbcc;/*soft pink*/
  padding:4px; letter-spacing:4px;margin-right:10px; border-radius: 20px;
  color:#f66907;/*orange*/
  }
  
a:link, a:visited, a:active { 
color:#f66b07;text-decoration:none;}/*orange*/
a:hover {
color:#f66b07;}/*orange*/

.profile-7 {
width:110px;
height:110px;
border:1px solid #2f53bf;
border-radius:12px;
background:url(x);
background-size:cover;
flex-shrink:0;
}

.links-container {
    display: flex;
    flex-direction: row; /* header on the left, credits on the right */
    gap: 20px;
    align-items: flex-start; /* keeps the tops aligned */
    }