@font-face {
    font-family: 'OSRSFont';
    src: url('./fonts/osrs.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

html, body {
    cursor: url('./media/cursors/Normal.cur'), default;
    background-color: #f0d099;
    background-image: url('./media/leopardprint-background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

a, 
button, 
.dropbtn, 
.dropdown-content a, 
.link-out-button, 
.paint-submit-btn {
    cursor: url('./media/cursors/Link.cur'), pointer !important;
}

.username-text  {
    cursor: url('./media/cursors/Text.cur'), text;
}
    

        

body {
    background-color: #cdd096;
    margin: 0;
    padding: 0;
    font-family: "Arial", sans-serif;
}

.header {
    position: relative;
    width: 100%;
}
.dropdown {
        position: absolute;
        display: inline-block;
        background-color: #cdd096;
        margin-left: 30px;
        margin-top: 11px;
        padding: 6px;
        border: solid 1px #00000029;
        z-index: 10;
}
.dropbtn {
        background-color: transparent;
        border: none;
        color: #000000;
        opacity: 0.73;
        filter: blur(0.5px);
        font-size: 1.09375vw;
        cursor: pointer;
        display: flex;
        align-items: center;
        line-height: 0.1;
        font-family: "arial";
        font-weight: 400;
        padding-left: 0.0;
        padding-right: 0.0;
        text-decoration: underline;
        font-weight: 600;
        img {
            margin-left: 0.8vw;
            width: 1.0vw;
            height: 1.0vw;
        }
    }

.dropdown:hover {
        box-shadow: 0 0.15625vw 0.3125vw #00000029, inset 0 0.15625vw 0.3125vw #00000029;
    }

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    left: 0px; 
    top: 100%;
    border: 0.15vw solid #000000;
}

.dropdown-content.show {
    display: block;
}

.dropdown-content a {
        position: relative;
        display: block;
        text-decoration: none;
        color: black;
        font-size: 1.09375vw;
        font-family: "arial";
        font-weight: 400;
        width: 14.12vw;
        border: 0.04vw solid #000000;
        height: 2vw;
        text-align: left;
        line-height: 2;
        padding-left: 0.7vw;
        filter: blur(0.55px)
    }



.dropdown-content a:hover {
    background-color: #f1f1f1;
    text-decoration: underline;
}

.social-icons {
    filter: blur(0.5px)
}

span.seperator {
        font-size: 1.9vw;
        position: relative;
        /* height: 1.8vw; */
        font-weight: lighter;
        font-family: "arial";
        margin-left: 0.8vw;
        width: 0;
        height: 1vw;
        line-height: 0.4;
        color: #707070;
    }

.header-banner {
    
    width: 100%;
}

.header-banner a {
    display: block;
    width: 100%;
}

.header-banner img {
    width: 100%;     
    height: auto;    
    display: block; 
}

.link-out-button {
        padding: 1.2vw;
        display: inline-block;
        background-color: #000000;
        color: #A59F6D !important;
        text-decoration: none;
        border-radius: 3px;
        font-size: 1.0417vw;
        font-family: Arial, sans-serif;
        font-weight: 700;
        transition: all 0.3s ease;
        white-space: nowrap;
        text-transform: uppercase;
        letter-spacing: -0.0313vw;
        backdrop-filter: blur(0.699999988079071px);
        box-shadow: inset 0px 3px 3px 0 rgba(0, 0, 0, 0.16);
    }

    .link-out-button:hover {
        text-decoration: underline;
    }


ul.socials {
    display: flex;               
    justify-content: flex-start;     
    background: #000;           
    
    margin: 0;                   
    padding: 0.3vw 0.5vw;      
    align-items: center;      
}

    ul.socials li {
        width: 1.2vw;
        margin-right: 0.3vw;
        padding: 0.2vw;
        list-style: none;
    }
    ul.socials li a img {
    width: 100%;
    height: auto;
    display: block;
    filter: blur(0.3px);
    filter: brightness(0);
    filter: invert(87%) sepia(13%) saturate(913%) hue-rotate(2deg) brightness(89%) contrast(87%);

}

    ul.socials li.fs-td {
        margin-right: 0;
    }

    ul.socials a:hover {
        background-color: transparent;
        opacity: 0.6;
    }

    ul.socials a {
        display: inline;
        border: none;
        font-size: 0.8854166666666666vw;
        padding: 0;
        color: #cdd096;
    }
/*
    .stats {
    display: flex;             
    align-items: center;
    background-color: #cdd096; 
    border: 2px solid #000000; 
    border-radius: 8px;        
    padding: 20px;             
    margin: 20px;              
    width: fit-content;        
    list-style: none;          
    }
*/

.stats-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 1.5vw;
    margin: 3vw auto;
    width: 95%;
}

.stats-card {
    width: 24vw;
    display: flex; 
}


li.stats {
    display: flex;
    align-items: flex-start;
    border: 1px solid #000000;
    /*box-shadow: inset 4px 4px 20px rgba(0, 0, 0, 0.42);*/
    background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(201, 189, 136, 1));
    margin: 0;                 
    border-radius: 0.4vw;
    padding: 1.5vw 1vw;
    box-sizing: border-box;
    flex-direction: row;
    width: 100%;
    flex: 1;
}

li.stats img {
    width: 4.5vw;
    height: auto;
    margin-right: 1vw;
    flex-shrink: 0;

}

.text-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* text-transform: capitalize; */
}

.text-container h3 {
    margin-top: 0%;
    margin-bottom: 0.8vw;
    text-align: left;
    text-decoration: underline;
    color: #000000;
    font-family: "Arial", sans-serif;
    font-size: 1.35vw;
    opacity: 0.73;    
    font-weight: 600;
    filter: blur(0.5px);
}

.text-container a {
    text-decoration: none;
}

.text-container a:hover {
    opacity: 0.7;
}

.text-container .subtext {
    font-size: 1.1vw;
    text-align: left;
    font-family: "Arial", sans-serif;
    color: #000000;
    opacity: 0.73;
    font-weight: 600;
    line-height: 1.4;
}

.text-container .typeracer {
    margin-top: 1.4vw;
    font-size: 2.1vw;
    text-align: left;
    font-family: "Lato", Arial, sans-serif;
    color: #23578e;
    opacity: 0.73;
    font-weight: 600;
    line-height: 1.4;

}

.text-container .chess {
    display: flex;
    margin-top: 1.4vw;
    font-size: 2.1vw;
    text-align: left;
    font-family: "system-ui", Arial, sans-serif;
    color: #000000;
    opacity: 0.73;
    font-weight: 600;
    line-height: 1.4;
}

.text-container .chess img {
    width: 2.5vw;
    height: 2.5vw;
    margin-right: 0.5vw;
}


.text-container .username-text {
    font-size: 0.9vw;
    margin-top: -0.5vw;
    margin-bottom: 0.8vw;
    opacity: 0.6;
}

.osrs-skills-row {
    display: flex;
    flex-direction: row;
    gap: 1.2vw;
    align-items: center;
    margin-top: 0.3vw;
}

.skill-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3vw;
}

.skill-item img {
    display: flex;
    width: 1.8vw !important;    
    height: 3vw !important;
    object-fit: contain;
    
    margin-right: 0 !important; 
    border: none !important;    
    box-shadow: none !important;
    padding: 0 !important;
}

.skill-item strong {
    font-size: 4cqb;
    font-family: 'OSRSFont', 'Arial', sans-serif;
    color: #000000;
    opacity: 0.73;
}

.comments-section-container {
    display: flex;
    justify-content: center;
    margin: 4vw auto;
    width: 95%;
}

.giscus-card {
    width: 100%;
    max-width: 1200px;
    border: 1px solid #000000;
    /*box-shadow: inset 4px 4px 20px rgba(0, 0, 0, 0.42); */
    background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(201, 189, 136, 1)); 
    border-radius: 0.4vw;
    padding: 2vw 2.5vw;
    box-sizing: border-box;
}

.comments-title {
    margin-top: 0;
    margin-bottom: 1.5vw;
    text-align: left;
    text-decoration: underline;
    color: #000000;
    font-family: "Arial", sans-serif;
    font-size: 1.35vw;
    opacity: 0.73;    
    font-weight: 600;
}

.giscus {
    width: 100%;
    margin-top: 1vw;
}