/* import font */
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+French+Canon+SC&family=Pixelify+Sans:wght@400..700&display=swap');


/* Set font to all/most text */
* {
    filter: grayscale(0.15);
    font-family: "Pixelify Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

/* Set cursor to red */
* {
  cursor: url('https://www.rw-designer.com/cursor-view/178347.png'), auto;
}

/* set text links*/
a {
    color: rgba(255, 0, 0, 0.674);
}

a:hover {
    color: rgb(225, 220, 220);
}

/* set all p element text */
p {
    color: red;
}

/* config background */
body {
    background-image: url("https://i.pinimg.com/1200x/13/56/e6/1356e68cf40ffb2a10cd31c1dad9030d.jpg");
    background-color: black;
    background-position: right;
    background-repeat: repeat-y;
    backdrop-filter: grayscale(0.1) sepia(0.2);
}

/* config main content box */
.main-content {
    background-color: rgba(233, 4, 4, 0);
    width: 800px;
    height: 2000px;
    float: left;
}

/* config button box */
.navigation {
    background-color: rgb(0, 0, 0);
    width: 80%;
    height: auto;
    display: flex;
    justify-content: center;
}

/* config button sizes and colors */
.button-nav {
    width: 6em;
    height:30px;
    margin: 0.1em 5em 0.1em 5em;
    border: solid 2px rgb(80, 0, 0);
    border-radius: 5%;
    background: linear-gradient(red, rgb(82, 1, 1));
    font-size: 20px;
    text-align: center;
    margin-right: 3px;
}

.button-nav:hover {
    color: rgb(225, 220, 220);
}

/* config about me section */
.about-me {
    background-color: rgb(0, 0, 0);
    width: 78%;
    height: 14%;
    margin-top: 1%;
}

.bio-section {
    background-color: black;
    width:60%;
    height: 100%;
    border-radius: 10% 10% 1% 1%;
    margin-left: 4%;
    display: flex;
    float: left;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bio-header {
    background: linear-gradient(#770101, red);    width: 100%;
    height: 20%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    display: flex;
    border-radius: 10% 10% 0 0;
}

.bio-text {
    color: black;

}


/* config bio scroll */
#container1 {
        overflow: scroll;
        overflow-x: hidden;
        width: 90%;
        height: 100%;
        background-color: rgb(0, 0, 0);
        border: solid 2px rgb(65, 4, 4);
        border-radius: 0 0 1% 1%;


        padding: 1rem;
    }

        ::-webkit-scrollbar {
        width: 14px;
        }

        ::-webkit-scrollbar:horizontal {
        height: 14px;
        }

        ::-webkit-scrollbar-corner {
        background: #000000;
        }

        ::-webkit-scrollbar-track:vertical {
        background: linear-gradient(90deg, #000000, #620808 20%);
        border-radius: 5px;
        }

        ::-webkit-scrollbar-track:horizontal {
        background: linear-gradient(180deg, #000000, #0a0202 20%);
        border-radius: 5px;
        }

        ::-webkit-scrollbar-thumb {
        border: 1.5px solid #000000;
        border-radius: 5px;
        box-shadow: inset 0 -1px 1px #000000, inset 0 1px 1px #000000;
        }

        ::-webkit-scrollbar-thumb:vertical {
        background: linear-gradient(90deg, #ff0000 45%, #a30202 0, #5d0303);
        }

        ::-webkit-scrollbar-thumb:horizontal {
        background: linear-gradient(180deg, #1a0606 45%, #000000 0, #000000);
        }

        ::-webkit-scrollbar-button:horizontal:end:increment,
        ::-webkit-scrollbar-button:horizontal:start:decrement,
        ::-webkit-scrollbar-button:vertical:end:increment,
        ::-webkit-scrollbar-button:vertical:start:decrement {
        display: block;
        }

        ::-webkit-scrollbar-button:vertical {
        height: 15px;
        }

        ::-webkit-scrollbar-button:vertical:start:decrement {
        background: rgb(10, 5, 5);
        background: url("https://dl.dropbox.com/s/n9ji42h9hdgdtpc/scroll3.png"), #800606;
        background-repeat: no-repeat;
        background-position: center;
        -moz-background-size: 100% auto, cover;
        -webkit-background-size: 100% auto, cover;
        -o-background-size: 100% auto, cover;
        background-size: 100% auto, cover;
        border: 1.5px solid #191111;
        border-radius: 5px;
        }

        ::-webkit-scrollbar-button:vertical:start:increment {
        display: none;
        }

        ::-webkit-scrollbar-button:vertical:end:decrement {
        display: none;
        }

        ::-webkit-scrollbar-button:vertical:end:increment {
        background: rgb(0, 0, 0);
        background: url("https://dl.dropbox.com/s/cdcco6pih7n1lae/scroll4.png"), #800606;
        background-repeat: no-repeat;
        background-position: center;
        -moz-background-size: 100% auto, cover;
        -webkit-background-size: 100% auto, cover;
        -o-background-size: 100% auto, cover;
        background-size: 100% auto, cover;
        border: 1.5px solid #1d1212;
        border-radius: 5px;
        }

        ::-webkit-scrollbar-button:horizontal {
        width: 14px
        }
        ::-webkit-scrollbar-button:horizontal:start:increment {
        display: none;
        }
        ::-webkit-scrollbar-button:horizontal:end:decrement {
        display: none;
        }

        ::-webkit-scrollbar-button:horizontal:start:decrement {
        background: rgb(0, 0, 0);
        background: url("https://dl.dropbox.com/s/xcm618ghd823271/scroll5.png"), linear-gradient(180deg, #000000, #000000 20%);
        background-repeat: no-repeat;
        background-position: center;
        -moz-background-size: 100% auto, cover;
        -webkit-background-size: 100% auto, cover;
        -o-background-size: 100% auto, cover;
        background-size: 100% auto, cover;
        background-position: center;
        border-radius: 5px;
        border: 1.5px solid #000000;
        }

        ::-webkit-scrollbar-button:horizontal:end:increment {
        background: rgb(0, 0, 0);
        background: url("https://dl.dropbox.com/s/byeyi7am889ii9m/scroll6.png"), linear-gradient(180deg, rgb(0, 0, 0), #f0f0f0 20%);
        background-repeat: no-repeat;
        background-position: center;
        -moz-background-size: 100% auto, cover;
        -webkit-background-size: 100% auto, cover;
        -o-background-size: 100% auto, cover;
        background-size: 100% auto, cover;
        background-position: center;
        border-radius: 5px;
        border: 1.5px solid #000000;
}

.chuuya-lookup-img {
    width: 35%;
    display: flex;
    float: right;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    filter: brightness(.6)
}