/* Rainbow Animation */
@keyframes rainbow {
    0% { color: #ff0000; } /* Red */
    16.666% { color: #ff7f00; } /* Orange */
    33.333% { color: #ffff00; } /* Yellow */
    50% { color: #00ff00; } /* Green */
    66.666% { color: #0000ff; } /* Blue */
    83.333% { color: #4b0082; } /* Indigo */
    100% { color: #9400d3; } /* Violet */
}

/* Apply Animation to Doge Text */
.doge {
    animation: rainbow 5s linear infinite; /* Adjust animation duration as needed */
}



/* Grid Container Styles */
.fwiendsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Adjust column width as needed */
    grid-gap: 20px; /* Adjust gap between items as needed */
}

/* Friend Face Styles */
.fwiendFace {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease-in-out; /* Smooth transition for icon scale */
    cursor: pointer;
}

.fwiendFace:hover {
    transform: translateY(-5px); /* Move icon up by 5 pixels on hover */
}

.fwiendFace img {
    border-radius: 50%; /* Make the icon circular */
    width: 100px;
    height: 100px;
    object-fit: cover;
    transition: transform 0.3s ease-in-out; /* Smooth transition for icon scale */
    margin-bottom: 5px;
}

/* Text Styles */
.fwiendName {
    font-size: 16px; /* Adjust font size as needed */
    color: #314a5a; /* Dark blue text color */
    transition: transform 0.3s ease-in-out; /* Smooth transition for text movement */
}

.fwiendName:hover {
    transform: translateY(-5px); /* Move text up by 5 pixels on hover */
}


/* Button Styles */
.button {
    padding: 8px 16px; /* Adjust padding as needed */
    font-size: 15px; /* Adjust font size as needed */
    border: none;
    background-color: #4CAF50; /* Greenish background color */
    color: white;
    border-radius: 4px; /* Rounded corners */
    transition: background-color 0.3s, color 0.3s, transform 0.2s;
    cursor: pointer;
}

.button:hover {
    background-color: #45a049; /* Darker greenish color on hover */
    transform: scale(1.05); /* Increase size by 5% on hover */
}

/* Friend Face Styles */
.fwiendFace {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease-in-out; /* Smooth transition for icon scale */
    margin-bottom: 10px;
    cursor: pointer;
}

.fwiendFace:hover {
    transform: translateY(-5px); /* Move icon up by 5 pixels on hover */
}

.fwiendFace img {
    border-radius: 50%; /* Make the icon circular */
    width: 100px;
    height: 100px;
    object-fit: cover;
    transition: transform 0.3s ease-in-out; /* Smooth transition for icon scale */
    margin-bottom: 5px;
}

/* Text Styles */
.fwiendName {
    font-size: 16px; /* Adjust font size as needed */
    color: #314a5a; /* Dark blue text color */
    transition: transform 0.3s ease-in-out; /* Smooth transition for text movement */
}

.fwiendName:hover {
    transform: translateY(-5px); /* Move text up by 5 pixels on hover */
}

/* View Friends Link Styles */
#viewFriends {
    color: #003399; /* Default link color */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s; /* Smooth transition for color change */
}

#viewFriends:hover {
    color: #000; /* Change link color on hover */
}

/* Background Color on Hover for Latest Blogs */
.fwiendslatestBlogs:hover {
    background-color: #f0f0f0; /* Light gray background color on hover */
}


.fwiendFace img,
.fwiendFace b {
    transition: transform 0.3s ease-in-out; /* Smooth transition for icon scale */
}

.fwiendFace b {
    transition: transform 0.3s ease-in-out; /* Smooth transition for text movement */
}

.fwiendFace:hover b {
    transform: translateY(-5px); /* Move text up by 5 pixels on hover */
}

.fwiendFace img {
    transition: transform 0.3s ease-in-out; /* Smooth transition for icon scale */
}

.fwiendFace:hover img {
    transform: scale(1.2); /* Increase size of icon on hover */
}



#add, #report, #block, #sMsg {
    padding: 8px 16px; /* Adjust padding as needed */
    font-size: 15px; /* Adjust font size as needed */
    border: none;
    color: #4CAF50; /* Greenish text color */
    background-color: transparent; /* Remove background color */
    border-radius: 4px; /* Rounded corners */
    position: relative; /* Enable positioning */
    transition: transform 0.2s;
}

#viewFriends {
    color: #003399; /* Default link color */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s; /* Smooth transition for color change */
}

#viewFriends:hover {
    color: #000; /* Change link color on hover */
}

.fwiendslatestBlogs:hover {
    background-color: #f0f0f0; /* Change background color on hover */
    cursor: pointer; /* Show pointer cursor on hover */
}


#add, #report, #block, #sMsg {
    padding: 8px 16px; /* Adjust padding as needed */
    font-size: 15px; /* Adjust font size as needed */
    border: none;
    color: #4CAF50; /* Greenish text color */
    background-color: transparent; /* Remove background color */
    border-radius: 4px; /* Rounded corners */
    transition: transform 0.2s;
}

#add:hover, #report:hover, #block:hover, #sMsg:hover {
    transform: scale(1.05); /* Increase size of text by 5% on hover */
    cursor: pointer;
}






button:hover {
    background-color: #45a049; /* Darker greenish color on hover */
    transform: scale(1.05); /* Increase size by 5% on hover */
    cursor: pointer;
}




body {
    background: #cde2b8;
    font-family: monospace;
    padding-top: 45px;
    font-size: 15px;

}

img {
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    image-orientation: from-image;
    border-radius: 10px;
}

.avatar {
    width: 200px;
    margin-right: 20px;
    cursor: zoom-in;
    image-orientation: from-image;
    border-radius: 10px;
    border: solid 2px #636b59;
}

.boxInfo {
    border: 1px solid #000;
    margin-bottom: 20px;
    margin-top: 20px;
    border-radius: 10px;
}

.boxHead {
    background: #636b59;
    color: #ffcbd9;
    padding: 3px;
    padding-bottom: 4px;
    padding-left: 6px;
    border-radius: 5px;
}

.box.blurbs {
    background-color: #aabd97;
    border-radius: 10px;
}

.rightHead {
    background: #636b59;
    color: #ffcbd9;
    padding-left: 4px;
    padding-bottom: 4px;
    padding-top: 4px;
    border-radius: 5px;
}

.topLeft {
    position: sticky;
    top: 0;
    float: left;
    width: calc( 40% - 20px );
    padding: 10px;
    background-color: #aabd97;
    border-radius: 10px;
}

.topRight {
    float: right;
    width: calc( 60% - 60px );
    padding: 10px;
    background-color: #aabd97;
    border-radius: 10px;
}

.extended {
    border: 1px solid #000;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 15px;
    border-radius: 10px;
}

.blurbs {
    margin-bottom: 20px;
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 6px;
    padding-top: 6px;
}

h4 {
    color: #314a5a;
    margin-bottom: 0px;
}

.fwiendCount {
    color: #314a5a;
}

.fwiendButton {
    padding: 8px 16px; /* Adjust padding as needed */
    font-size: 15px; /* Adjust font size as needed */
    border: none;
    background-color: #4CAF50; /* Greenish background color */
    color: white;
    border-radius: 4px; /* Rounded corners */
    transition: background-color 0.3s, color 0.3s, transform 0.2s;
}

.fwiendButton:hover {
    background-color: #45a049; /* Darker greenish color on hover */
    transform: scale(1.05); /* Increase size by 5% on hover */
    cursor: pointer;
}



.boxButton {
    display: inline-block;
    width: calc( 49% - 60px );
    padding-left: 30px;
    height: 24px;
    font-size: small;
    color: black;
    padding-top: 7px;
    border-radius: 10px;
}

.fwiendFace img {
    border: solid 2px #636b59;
    border-radius: 50%;
    background-position: center;
    display: absolute;
    object-fit: cover;
    height: 100px;
    width: 100px;
}

.friendRequests{
	display: inline-grid;
	width: 43%;
	background: #aabd97;
	padding: 10px;
	border: 3px solid #636b59;
	max-width: calc( 25% - 85px );
	text-align: center;
}

.allfwiedsItem{
	max-width: calc( 25% - 85px );
	display: inline-grid;
	background: #aabd97;
	border: 6px solid #636b59;
	padding: 10px;
	overflow: hidden;
	text-align: center;
}

.allfwiedsItemTop{
	background: #aabd97;
}

div#header {
    background: #aabd97;
    text-align: center !important;
    color: white;
    font-family: monospace;
}

div#hSub {
    background: #636b59;
    color: white;
    text-align: center;
    font-family: monospace;
}

.url {
    border: solid 2px #636b59;
    padding: 2px;
    border-radius: 10px;
}

.tableLeft {
    background: #cde2b8;
    width: 25%;
    padding: 10px;
    vertical-align: top;
    overflow: hidden;
    border-radius: 10px;
}

.tableRight {
    width: 75%;
    background: #cde2b8;
    padding: 10px;
    vertical-align: top;
    overflow-wrap: anywhere;
    border-radius: 10px;
    border: solid 2px #636b59;
}

.player {
    padding: 4px;
    margin-top: 20px;
    margin-bottom: 20px;
    background: #636b59;
    color: #ffcbd9;
    width: calc(100% - 10px );
    border: 1px solid #999;
    border-radius: 10px;
}

a:-webkit-any-link {
    color: #314a5a;
    cursor: pointer;
    text-decoration: underline;
}

.blog {
    background-color: #aabd97;
    padding: 15px;
}

span#hUp::before {
    content: "hai";
    font-size: 13px;
    animation-duration: 0.3s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: blinkingTextRed;
    font-family: monospace;
}

/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/nature/nat-4/nat323.ani), url(https://cur.cursors-4u.net/nature/nat-4/nat323.png), auto !important;} /* End https://www.cursors-4u.com */