/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@import url('https://fonts.googleapis.com/css2?family=Pirata+One&display=swap');
/*changes background of page and page font */
body {
     background-image: url("https://www.dl.dropboxusercontent.com/scl/fi/81rvhh46d748feytzz4no/photo-output.PNG?rlkey=t7blx7ptsosltsn7yt1d54xw3&st=530wdcuw&dl=0");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center,center;



    font-family: "Pirata One", system-ui;
  font-weight: 400;
  font-style: normal;

}
/*changes outer border of entire profile */
main {
    border: none;
    border-radius: 5px;
    padding: 10px 15px 10px 15px;
    background: #A7BBC480; /*background color */
    box-shadow: inset 0px 0px 0px 1px #808080, inset 0px 0px 10px 2px #535353; /* */
}
/* changes text color of topics,friends and “display comments */
p {
    text-align: center !important;
color: black;
text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff, 3px 3px 3px #000000;
font-size: 20px;
}
/* changes text color of links on profile*/
a {
    text-align: center !important;
color: black;
text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff, 3px 3px 3px #000000;
}

/* changes background of footer */
footer {
    background: none;
}
/* changes background of top of nav bar */
nav .top {
    margin-top: 10px;
    border-radius: 5px;
    background: linear-gradient(#535353 0%, #000 69%); /* */
    box-shadow: inset 0px 0px 0px 1px #808080, inset 0px 0px 10px 2px #535353; /* */
    border: 0px;
    padding: 4px;
}
/* changes spacehey logo */
.logo {
content: url();
width: 200px !important;
height: 55px !important;
}
/* customizes help and logout button text*/
.top .right {
    color: #083547;
} 
/* changes background of nav links bar and changes font and color of link text */
nav .links {
    background: ; 
    box-shadow: inset 0px 0px 0px 1px #808080, inset 0px 0px 5px 1px #535353, #000 1px 1px 10px 2px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
   font-size: 20px;
    padding: 5px;
    position: relative;
    gap: 5px;
    justify-content: center;
}
/* changes nav notification icon */
nav .links li .icon{
content: url(https://64.media.tumblr.com/c9a50c26550c1afaf767bc021f4dcafd/47a4384795cbfe1a-6a/s75x75_c1/c0964943c74543ac8c0f62a837d7234110a57e44.gifv);
}
/* creates a glow effect on nav link text */
nav .links a {
    text-shadow: 1px 1px 0px #000;
}
/* changes nav link text while hovering */
nav .links a:hover {
    color: #f00;
    text-decoration: none;
    text-shadow: 1px 1px 0px #000;
}
.left .heading {
    background: linear-gradient(#53535380 0%, #00000080 60%) !important; /*left#topcolor right#bottom */
    box-shadow: inset 0px 0px 5px 1px #535353; /*colortop/sidesofborder */
    border-radius: 5px 5px 0px 0px;
    border-bottom: 1px solid #808080; /*bottombordercolor*/
  text-align: center !important;
color: black !important;
text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff, 3px 3px 3px #000000;
    font-size: 20px;
}
/* left side of profile */
.left.col {
    Background: #083547;
    border-radius: 5px 5px 0px 0px;
    border: 0px;    
    padding: 5px;
 text-align: center !important;
color: black !important;
text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff, 3px 3px 3px #000000;
    font-size: 20px;
    position: relative;
    right: 4px;
}
/* changes your name font and background gradient*/
.section h1 {
background-image: (""); 
}
/*adds border around your pfp*/
.profile-pic .pfp-fallback {
    border: 2px ridge #55555500;     
}
/* changes background design of contact section */
.profile .contact {
    border-radius: 5px 5px 0px 0px;
    border: none;  
    background: linear-gradient(#53535380 0%, #00000080 20%);
max-height: 150px;
}
/* changes text design of contact section */
.contact .heading {
    background: none !important;
    border: none !important;
    box-shadow: none;
    text-align: center !important;
color: black !important;
text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff, 3px 3px 3px #000000;
    font-size: 25px;
}
/*Changes outer border color of interests and links sections*/
.profile .table-section {
    border-radius: 5px 5px 0px 0px;
    border: 1px solid #A7BBC4; /* border color */
}
.details-table td {
    background: linear-gradient(#535353 0%, #000 60%) !important;
    box-shadow: inset 0px 0px 0px 1px #808080, inset 0px 0px 5px 1px #535353, #000 1px 1px 10px 2px;;
    border-radius: 10px 0px;
    border: 0px;
    padding-left: 5px !important;
    text-align: center !important;
color: black !important;
text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff, 3px 3px 3px #000000;
    font-size: 20px; 

}
/* right side of profile*/
.right.col {
    background: linear-gradient(#A7BBC480 0%, #00000000 50%); /* background for blurbs and blog*/
    border-radius: 5px 5px 0px 0px;
    border: 0px;
    padding: 5px;
    position: relative;
    left: 4px;
    margin-left: 5px;
    text-align: center !important;
color: black !important;
text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff, 3px 3px 3px #000000;
    font-size: 20px;

}
/* changes design of heading for right side of profile*/
.right .heading {
    background: linear-gradient(#535353 0%, #000 60%) !important;
    box-shadow: inset 0px 0px 0px 1px #808080, inset 0px 0px 5px 1px #535353, #000 1px 1px 10px 2px;;
    border-radius: 50px 0px;
    border: 0px;
    padding-left: 10px !important;
    color: #ffffff !important;
    text-shadow: 2px 1px 0px #000;
    font-size: 20px;    
}
/* adds border around friends pfp*/
.person .pfp-fallback {
    border: 2px ridge #A7BBC4;    
}
/*changes comments border*/
.comments-table {
    border: 0px #A7BBC4;
}
/*changes design of comments */
.comments-table td {
    border: 0px;
    background: linear-gradient(#53535300 0%, #000 20%) !important;
    border-radius: 5px 5px 0px 0px;
    border: 0px #A7BBC4;
    padding: 5px;
    color: #ffffff;
    text-shadow: 2px 1px 0px #000;
    font-size: 20px;
    top: -32px;
}
/* changes color of border inbetween replies and comments */
.comment-replies {
    border: none;
    border-top: 2px ridge #A7BBC4;
}
/*adds border around commentors pfp */
.comments-table .pfp-fallback {
    border: 2px ridge #A7BBC4;
}