:root {
    --bg-color: rgb(20, 20, 20);
    --card-color: rgb(23, 23, 23);
    --discord-color: rgba(114, 137, 218, 0.7);
    --discord-color-alpha: rgba(114, 137, 218, 0.2);
    --youtube-color: rgba(255, 0, 0, 0.7);
    --youtube-color-alpha: rgba(255, 0, 0, 0.2);
    --linkedin-color: rgba(0, 119, 181, 0.7);
    --linkedin-color-alpha: rgba(0, 119, 181, 0.2);
    --spotify-color: rgba(29, 215, 94, 0.7);
    --spotify-color-alpha: rgba(29, 215, 94, 0.2);
    --twitter-color: rgba(29, 161, 242, 0.7);
    --twitter-color-alpha: rgba(29, 161, 242, 0.2);
    --steam-color: rgba(102, 192, 244, 0.7);
    --steam-color-alpha: rgba(102, 192, 244, 0.2);
    --codepen-color: rgba(255, 255, 255, 0.7);
    --codepen-color-alpha: rgba(255, 255, 255, 0.2);
    --instagram-color: rgba(193, 53, 132, 0.7);
    --instagram-color-alpha: rgba(193, 53, 132, 0.2);
    --github-color: rgba(200, 200, 200, 0.7);
    --github-color-alpha: rgba(200, 200, 200, 0.2);
    --aboutme-color: rgba(0, 0, 0, 0.5);
    --aboutme-color-alpha: rgba(255, 0, 111, 0.2);
}

body {
    align-items: center;
    background-color: var(--bg-color);
    background-repeat: no-repeat;
    background-size: cover;
    /* display: flex; */
    height: 100vh;
    justify-content: center;
    margin: 0px;
    overflow: hidden;
    padding: 0px;
    font-family: "Rubik", sans-serif;
}

/* -- quick link navigation -- */

nav {
    display: block;
}

.qln {
    box-sizing: border-box;
    /* overflow-x: hidden; */
    text-size-adjust: 100%;
    transition-property: none;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.5;
    display: block;
}

.btncmp-round-label {
    overflow: visible;
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    width: 3rem;
}

.qln__buttons {
    padding-bottom: 30px;
    padding-top: 30px;
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.2); */
    display: flex;
    justify-content: center;
}

.btn-round {
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    height: 4rem;
    width: 4rem;
    /* border-color: #000000; */
}

.btn-round:focus {
    border-color: #00000000;
}

.btn-round:active {
    border-color: #00000000;
}

.btn-round:visited {
    border-color: #00000000;
}

.btncmp-round-label__label {
    appearance: auto;
    writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: buttontext;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    cursor: default;
    font-weight: 600;
    font-size: 14px;
    display: block;
    margin-top: 0.25rem;
    margin: 0em;
    overflow: hidden;
    padding: 0 0.25rem;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.qln .btncmp-round-label {
    margin: 0 3rem;
}

.qln__buttons .btn-round {
    background-color: rgba(0, 0, 0, 0.2);
    color: #ffffff;
}

.qln__buttons .btncmp-round-label__label {
    color: #ffffff
}

.qln .btncmp-round-label {
    margin: 0 3rem;
}

.qln .btncmp-round-label__label {
    max-width: 9rem;
}

button {
    background-color: transparent;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    padding: 0;
}

.btncmp-round-label .btn-round {
    transition: .25s ease;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
}

/* -- collapse -- */


.show >* {
    width: 100%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.collapsing >* {
    width: 100%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* -- cards -- */

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 1000px;
    width: calc(100% - 20px);
    align-content: center;
    justify-content: center;
}

.container:hover>.card::after {
    opacity: 1;
}

.card {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    height: 260px;
    flex-direction: column;
    position: relative;
    width: 300px;
}

.card#aboutme {
    width: 600px;
    height: 520px;
    background-color: #00000000;
}

#aboutme-content {
    background-image: url("https://i.imgur.com/bbLhbBR.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    opacity: 1;
}

.card-content#aboutme-content:hover {
    opacity: 0.5;
}

/* #service__cards>.card {
    width: calc(100% / 2 - 8px);
    height: 390px;
    background-color: #00000000;
} */


#aboutme-info>h4 {
    color: rgba(255, 255, 255, 0.6);
}

#logo-image {
    height: 500px;
}

.card:hover::before {
    opacity: 1;
}

.card::before,
.card::after {
    border-radius: inherit;
    content: "";
    height: 100%;
    left: 0px;
    opacity: 0;
    position: absolute;
    top: 0px;
    transition: opacity 500ms;
    width: 100%;
}

.card::before {
    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),
            rgba(255, 255, 255, 0.06),
            transparent 40%);
    z-index: 3;
}

.card::after {
    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y),
            rgba(255, 255, 255, 0.4),
            transparent 40%);
    z-index: 1;
}

#aboutme {
    background-color: var(--aboutme-color);
}
#aboutme::before {
    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y),
            var(--aboutme-color-alpha),
            transparent 40%);
    z-index: 3;
}
#steam {
    background-color: var(--steam-color);
}
#steam::before {
    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),
            var(--steam-color-alpha),
            transparent 40%);
    z-index: 3;
}

#discord {
    background-color: var(--discord-color);
}
#discord::before {
    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),
            var(--discord-color-alpha),
            transparent 40%);
    z-index: 3;
}

#codepen {
    background-color: var(--codepen-color);
}
#codepen::before {
    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),
            var(--codepen-color-alpha),
            transparent 40%);
    z-index: 3;
}

#youtube {
    background-color: var(--youtube-color);
}
#youtube::before {
    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),
            var(--youtube-color-alpha),
            transparent 40%);
    z-index: 3;
}
#spotify {
    background-color: var(--spotify-color);
}
#spotify::before {
    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),
            var(--spotify-color-alpha),
            transparent 40%);
    z-index: 3;
}

#linkedin {
    background-color: var(--linkedin-color);
}
#linkedin::before {
    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),
            var(--linkedin-color-alpha),
            transparent 40%);
    z-index: 3;
}

#twitter {
    background-color: var(--twitter-color);
}
#twitter::before {
    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),
            var(--twitter-color-alpha),
            transparent 40%);
    z-index: 3;
}

#github {
    background-color: var(--github-color);
}
#github::before {
    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),
            var(--github-color-alpha),
            transparent 40%);
    z-index: 3;
}

#instagram {
    background-color: var(--instagram-color);
}
#instagram::before {
    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),
            var(--instagram-color-alpha),
            transparent 40%);
    z-index: 3;
}



.card>.card-content {
    background-color: var(--card-color);
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    inset: 1px;
    padding: 10px;
    position: absolute;
    z-index: 2;
}

/* -- ↓ ↓ ↓ extra card content styles ↓ ↓ ↓ -- */

h1,
h2,
h3,
h4,
span {
    color: rgb(240, 240, 240);
    /* font-family: "Rubik", sans-serif; */
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    margin: 0px;
}

i {
    color: rgba(255, 255, 255, 0.6);
}

.card-image {
    align-items: center;
    display: flex;
    height: 140px;
    justify-content: center;
    overflow: hidden;
}

.card-image>i {
    font-size: 6em;
    opacity: 0.25;
}

.card-info-wrapper {
    align-items: center;
    display: flex;
    flex-grow: 1;
    justify-content: flex-start;
    padding: 0px 20px;
}

.card-info {
    align-items: flex-start;
    display: flex;
    gap: 10px;
}

.card-info>i {
    font-size: 1em;
    height: 20px;
    line-height: 20px;
}

.card-info-title>h3 {
    font-size: 1.1em;
    line-height: 20px;
}

.card-info-title>h4 {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85em;
    margin-top: 8px;
}

.card-link {
    visibility: hidden;
    height: 100%;
    width: 100%;
}




/* -- ↓ ↓ ↓ YouTube link styles ↓ ↓ ↓ -- */

#youtube-link {
    bottom: 10px;
}

#youtube-link>i {
    color: rgb(239, 83, 80);
}

#source-link {
    bottom: 60px;
}

#source-link>i {
    color: rgb(94, 106, 210);
}

.link {
    align-items: center;
    backdrop-filter: blur(3px);
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: inline-flex;
    gap: 5px;
    left: 10px;
    padding: 10px 20px;
    position: fixed;
    text-decoration: none;
    z-index: 100;
}

.link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.link>i,
.link>span {
    height: 20px;
    line-height: 20px;
}

.link>span {
    color: white;
}

/* -- ↓ ↓ ↓ image stuff ↓ ↓ ↓ -- */
img {
    display: none;
}

#canvas {
    /* background-color: blue; */
    position: absolute;
}

.bar {
    /* background: rgb(55,174,214); */
    background: linear-gradient(90deg, rgba(83,214,55,1) 0%, rgba(88,103,201,1) 50%, rgba(225,53,53,1) 100%);
    border-radius: 6px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    height: 4px;
    animation: gradient 8s ease infinite;
    max-width: 1100px;
    /* left: 34%; */
    margin: 8px auto;
    /* bottom: 16px; */
    position: relative;
    width: 1100px;
    background-size: 200% 100%;
    background-clip: text;
    /* text-fill-color: transparent; */
}

@keyframes gradient {
    0% {
        background-position: 100% 50%;
    }
    50% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

#glow-acc {
    size: 600px;
    margin: 10px 10px;
    transition: box-shadow 0.4s ease-out;
}

#glow-sub {
    size: 600px;
    margin: 10px 10px;
    transition: box-shadow 0.4s ease-out;
}

#glow-acc:hover {
    box-shadow: 0 0 15px rgba(84, 174, 107, 0.5);
    /* transition: box-shadow 0.6s ease-in-out; */
}
#glow-sub:hover {
    box-shadow: 0 0 15px rgba(201, 62, 80, 0.5);
    /* transition: box-shadow 0.6s ease-in-out; */
}

#glowy {
    height: 300px;
    width: 400px;
}

#glow.card {
    height: 90%;
    width: 90%;
    padding: 20px 20px;
}

#glowyystatus {
    display: flex;
    width: 100%;
    /* flex-direction: row; */
    /* align-items: left; */
    justify-content: space-between;
}

#glowyystatus>* {
    margin: 0px 10px;
}

#glowyystatus>i {
    font-size: 2em;
}

#glowystatus {
    display: flex;
    width: 100%;
    flex-direction: column;
    /* justify-content: space-between; */

}

.misc {
    max-height: 80px;
}

#acc>h1 {
    color: #54ae6b; /*db373b*/
}

#sub>h1 {
    color: #c93e50;
}

.btns {
    height: 50px;
    display: flex;
    flex-direction: row;
}

.misc-btn {
    height: 80%;
    width: 50%;
    margin: 0px 5px;
    font-size: 0.8rem;
    color: white;
    border: none;
}

#fh4 {
    background-image: url("./img/FH4.png");
}

#changepw {
    background-color: #54ae6b;
}

#connectdc {
    background-color: #6f8cde;
}

#hwid {
    background-color: #c93e50;
    width: 100%;
}

@font-face {
    font-family: "Produt Sans";
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/productsans/v5/HYvgU2fE2nRJvZ5JFAumwegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
}

/* @font-face {
    font-family: "Roboto", sans-serif;
} */


/* -- ↓ ↓ ↓ some responsiveness ↓ ↓ ↓ -- */

@media(max-width: 700px) {
    body {
        align-items: flex-start;
        overflow: auto;
        padding: 10 0px;
    }
    .qln {
        height: 20%;
        position: absolute;
    }
    nav {
        position: relative
    }

    .card-wrapper {
        position: fixed;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        top: 20%;
        height: 80%;
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    .qln__buttons {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        height: 100%;
        gap: 12px;
    }
    
    .btncmp-round-label {
        width: calc(20% - 6px);
    }

    .container {
        width: 100%;
        height: calc(100% - 8px);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .collapse {
        width: 100%;
    }
    .collapse .show {
        width: 100%;
    }

    .card-wrapper > #collapseConnect {
        position: fixed;
        width: 60%;
    }

    #connect-cards {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 50%;
        gap: 16px;
    }

    a {
        width: 15vw;
        height: 15vw;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    a > * {
        max-width: 100%;
        max-height: 100%;
    }

    a > .card {
        border-radius: 50%;
    }

    a .card-image {
        display: none;
    }
    a .card-info {
        font-size: 7.5vw;
    }

    a .card-info-wrapper {
        height: 100%;
        width: 100%;
        padding: 0;
        align-items: center;
        justify-content: center;
    }

    /* #service__cards > .card{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 30vw;
        height: 30vw;
    } */

    #connect__cards > a .card-info-title {
        display: none;
    }

    #blog__cards > a .card-info-title {
        position: FIXED;
        align-items: center;
        justify-content: center;
        
    }
    #blog__cards > a .card-info-wrapper > .card-info {
        width: 100%;
        height: 100%;
        padding: 0px;
        align-items: center;
        justify-content: center;
    }

    #blog__cards h3 {
        position: relative;
        margin-top: 20vw;
        color: rgba(240, 240, 240, 0.3);
        font-size: 0.8em;
    }
    
    #blog__cards h4 {
        display: none;
    }

    #service__cards .card {
        width: 40vw;
        height: 40vw;
    }

    #service__cards .card-image {
        display: none;
    } 

    #service__cards .card-info-title {
        position: FIXED;
        align-items: center;
        justify-content: center;
        
    }
    #service__cards i {
        font-size: 15vw;
    }
    #service__cards .card-info-wrapper {
        width: 100%;
    }

    #service__cards .card-info-wrapper > .card-info {
        width: 100%;
        height: 100%;
        padding: 0px;
        align-items: center;
        justify-content: center;
    }

    #service__cards h3 {
        position: relative;
        margin-top: 20vw;
        color: rgba(240, 240, 240, 0.3);
        font-size: 0.8em;
    }

    
    #service__cards h4 {
        display: none;
    }

    #aboutme-content {
        background-size: 85%;
    }
    
}