/* General */

:root {
    --background-color: rgb(32, 32, 32);
    --content-color-darker: #222222;
    --content-color: #333333;
    --content-color-lighter: #444444;
    --text-general-color: #f7f7f7;
    --text-link-color: #48c1df;
    --text-link-already-clicked-color: #8043c5;
}

.bi-bluesky::before {
    content: "";
    background-color: currentColor;
    -webkit-mask: url("../img/bluesky.svg") no-repeat 50% 50%;
    mask: url("../img/bluesky.svg") no-repeat 50% 50%;
    -webkit-mask-size: cover;
    mask-size: cover;
    height: 16px;
    width: 16px;
}

/* Body */

body {
    background-color: var(--background-color);
}

/* Boxes */

.content {
    background-color: var(--content-color);
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .05);
    margin-top: 2%;
    margin-bottom: 2%;
    color: #f7f7f7;
}

.subcontent {
    background-color: var(--content-color-lighter);
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .05);
}

.popover-header {
    background-color: var(--content-color-darker);
    color: var(--text-general-color);
}

.popover-body {
    background-color: var(--content-color);
    color: var(--text-general-color);
}

/* Titles */

/* Text */
* {
    font-family: 'Ubuntu Mono', serif;
}

* :link {
    color: var(--text-link-color);
}

* :visited {
    color: var(--text-link-already-clicked-color);
}

.social-link {
    text-decoration: none;
}

.noselect {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#titlepi {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Chakra Petch', 'Ubuntu Mono', serif;
}


/* Imgs */
@media only screen and (min-width:990px) {   
    .logo-title {
        width: 10%;
        height: auto;
    }
    
    .icon-info {
        width: 3%;
        height: auto;
    }
}

@media only screen and (max-width:990px) {   
    .logo-title {
        width: 40%;
        height: auto;
    }
    
    .icon-info {
        width: 10%;
        height: auto;
    }
}