@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');



html{
    margin: 0px;
    padding: 0px;
    scroll-behavior: smooth;
}
body{
    margin: 0px;
    padding: 0px;
    font-family: "Open Sans", sans-serif;
}

p{
    text-indent: 20px;
}

.concept_art_thumb{
    width: 100%;
}

.top_image{
    position: absolute;
    width: 100%;
    top: 0px;
    z-index: -10;
}

.angler_body{
    background-image:  url("../images/stars.png"), linear-gradient(#234c73, #0f293f);
    background-size: 512px, 100vw 100%;
    background-position: top,  top right;
    background-repeat: repeat, no-repeat;
    background-color: #234c73;
    /* background-attachment: fixed; */
}

.page_body_content{
    width: 60%;
    margin: auto;
    background-color: #282f38;
    min-height: 300px;
    display: grid;
    grid-template-columns: 20% auto;
    border-radius: 15px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.514);
}

.angler_title{
    margin: 18vw;
    color: white;
    text-align: center;
    font-size: 120px;
    font-family: 'Megrim';
    text-shadow: 0px 0px 10px #42aff3;
    animation: title_in 5s ease-out 1s forwards;
    opacity: 0;
}


/* hbjkghjk */

@keyframes title_in{
    from{
        letter-spacing: 10px;
        opacity: 0;
    }
    to{
        letter-spacing: 0px;
        opacity: 1;
    }
}

.selling_points{
    display: grid;
    row-gap: 10px;
}

.document_index{
    display: grid;
    row-gap: 5px;
    height: min-content;
    padding: 10px;
    position: sticky;
    top: 0;
    color: white;
}

.document_index a{
    text-decoration: none;
    color: rgb(113 149 167);
    background-color: #17293a;
    border-radius: 5px;
    padding-left: 5px;
    transition: padding 0.2s ease;
    box-shadow: 2px 2px 1px #0000005e;
}
.document_index a:Hover{
    padding-left: 10px;
}
.document_index a:hover{
    color: rgb(202, 202, 202);
}

.document_index h3 {
    margin-bottom: 0px;
    color: #6d95b56e;
}

.document_content{
    min-height: 1500px;
    color: #bbbbbb;
    padding: 15px;
}

.three_points{
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 20px;
}

.document_content h2{
    color: #ffffff;
    background-image: linear-gradient(90deg, rgba(172, 219, 255, 0.36), transparent), url("../images/selected_subject_dust.png"), url("../images/selected_subject_dust.png");
    background-position: 0px 0px, 0px 256px;
    animation: subject_slide 60s linear 0s infinite;
    padding: 5px 20px;
    border-radius: 3px;
    overflow: hidden;
    text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.524);
    font-family: monospace;
    transition: background-image 1s ease-in-out;
}

:target{
    background-image: linear-gradient(90deg, rgba(255, 153, 0, 0.685), transparent), url("../images/selected_subject_dust.png"), url("../images/selected_subject_dust.png") !important;
    animation: subject_slide 30s linear 0s infinite;
}

.document_content > div{
    font-size: 15px;
}

.two_image_grid{
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 10px;
    margin-bottom: 10px;
}

.two_image_grid img{
    width: 100%;
}

@keyframes subject_slide{
    from{
        background-position: 0px 0px, 0px 0px, 256px 256px;
    }
    to{
        background-position: 0px 0px, 512px 0px, 1280px 256px;
    }
}

.feelings b{
    color: orange;
}