body {
    font-family: 'Pencilant Script', serif;
    font-size: 40px;
    
    background-color:black;
    background-size: 50vw;
    background-image:url('images/site_stuff/Lumi_Flowur.png');
    background-attachment: fixed;

    cursor: url('images/site_stuff/cursors/main.png'), auto;
    max-width: 100vw;
    overflow-x:hidden;

    color:rgb(238, 238, 238);
}

:root { /* Variables are stored here */
    /* Colors */
    --main-site-color: rgb(52, 232, 181);

    --post-box-border: #994981;
    --post-title-color: rgb(52, 232, 181);

    --highlight_box_color: rgb(194, 30, 93);

    /* Colors */
    --primary_text_color: #30ffba;
    --top_bar_color: #1a7b65;
    --link_color: #00ffbf;
    --link_highlight_color: #e63d7e;
    --window_bg_color: #e63d7e;

    --nav_button_color: #2de430;
    --nav_button_highlight_color: #e030ff;

    --content_nav_color: #a8a8a8;
    --gif_highlight_color: #f50f9d;

    --main_post_bg_color: #a9b0ff;
    --main_post_border_color: #f50f9d;
    --main_post_title_color: #00ffbf;
    --main_post_text_color: rgb(224, 224, 224);
    --main_post_link_color: #2effa4;

    --mobile_dropdown_button: #135b48;
    --mobile_dropdown_button_highlight: #ca39b4;
}

/*  OVERWRITE */

h1 {
    user-select: none;

    font-size:61px;
    line-height: 40px;

    color: var(--post-title-color);
}

p {
    display: block;
    unicode-bidi: isolate;
    line-height:30px;
    margin-top:20px;

    user-select: none;
    
    font-size: 25px;
    font-family: 'Pencilant Script';
}

a {
    color: #8142a8;
    text-decoration: none;
}

a:hover {
    color: rgb(62, 208, 145);

    transition:0.1s;
}

details > summary {
    list-style-type: '+ ';
}

details[open] > summary {
    list-style-type: '- ';
}

summary {
    text-decoration: none;
    font-family:'MinBit';
    font-size:40px;
    user-select: none;
    margin-top:10px;
    margin-left:10px;
    color: var(--nav_button_color);
    transition:0.3s;
}

summary:hover {
    color: var(--nav_button_highlight_color);
    cursor:pointer;
    user-select: none;
    text-shadow: 0 0 50px rgb(26, 6, 48);
    text-underline-offset: 10px;
    transition: 0.1s;
}

.solid_line {
    width:100%;
    height:0;
    border: 3px solid var(--post-title-color);
    margin-top:20px;
    margin-bottom:10px;
}

.dotted_line {
    width:80%;
    height:0;
    border: 2px dashed var(--main_site_color);
    margin-top:10px;
    margin-bottom:10px;
}

/*  CUSTOM ITEMS */

.sidebar {
    width:17%;
    height:auto;

    position:fixed;
    top:10px;
}

.left {
    left: 10px;
}

.right {
    right: 10px;
}

.center_container {
    width:64%;
    height:auto;
}

.display_box {
    width:100%;
    height:250px;
    background-color: black;
    background-image: url('images/site_stuff/stars.gif');

    color:white;

    border: 2px solid #943777;
    border-bottom: 6px solid #943777;
    border-radius: 5px;

    margin-bottom:10px;
}

.hotbar {
    width:100%;
    height:30px;
    background-color: #943777;

    font-family: 'MinBit';
    font-size:42px;
    line-height: 18px;
    text-indent: 3px;

    text-align: left;

    text-shadow: 0 0 5px rgb(41, 110, 81);
}

.site_title_box {
    width:100%;
    height:220px;
    background-color: black;
    background-image: url('images/site_stuff/bricks.jpg');
    background-size: 220px;

    margin-top:3px;

    border: 2px solid rgb(62, 208, 145);
    border-radius: 5px;
}

.nav_button_holder {
    width:100%;
    height:50px;
    margin-top: 10px;
    display:flex;
    gap:3px;
}

.nav_button {
    width:24.74%;
    height:100%;
    background-color: var(--main-site-color);
    background: linear-gradient(to top, #403760 0%, #a87cd7 100%);

    display:inline-flex;
    flex:1;

    text-decoration: none;
    text-shadow: 0 0 5px rgb(0, 0, 0);
    justify-content: center;

    color:white;
    font-family: 'MinBit';
    font-size: 47px;

    border-radius: 2px;
    box-shadow: 0 0 5px black;
}

.nav_button:hover {
    background: linear-gradient(to top, #286a4b 0%, #7cd7cc 100%);

    color:white;

    cursor:pointer;
    user-select: none;
    transition: 0.1s;
}

.main_center_box {
    width:100%;
    height:auto;
    background-color: black;

    margin-top: 10px;
    border:2px solid var(--main-site-color);
    border-radius: 5px;

    background-image: url('images/site_stuff/roses.jpg');
    background-size: 450px;

    padding-bottom: 40px;
}

.post_box {
    width:95%;
    min-height: 200px;
    margin-top: 20px;

    background-color: black;
    background-image: url('images/site_stuff/chalkboard.jpg');

    font-family: 'Pencilant Script';
    text-align: left;

    border: 10px solid var(--post-box-border);
    border-radius: 10px;
    border-bottom:15px solid var(--post-box-border);

    box-shadow: 0 0 10px black;
    box-shadow: 0 0 15px black inset;
}

.post_hotbar {
    width:100%;
    height:30px;
    background-color: var(--post-box-border);

    font-family: 'MinBit';
    font-size:38px;
    line-height: 20px;
    text-indent: 3px;

    text-align: right;

    box-shadow: 0 8px 10px -8px black;
}

.text_box {
    font-family:'Pencilant Script';
    color: var(--main_post_text_color);
    text-align: left;
    margin:30px;
}

.text_box a {
    font-weight: 900;

    font-size: 25px;
    text-shadow: 0 0 5px black;
}

.highlight_gif {
    width:90%;

    margin-top:10px;
    
    border-radius: 2px;
    border: 2px solid #943777;
}

.layered-image {
    position: relative;
    text-align: center;
}
.layered-image img {
    width:auto;
    height:auto;
}
.image-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 1
}

.polaroid_image_border {
    display:inline-block;
    width:40%;
    height:auto;
    background-color: white;
    border: 8px solid white;
    box-shadow: 0 0 10px black;
    padding:0 0 30px 0;
    margin: 20px;
}

.desktop_view {
    display: none;
}
.mobile_view {
    display: none;
}

@media (orientation:landscape) {

.desktop_view { display:contents; width:calc(100vw - 20px)}
.mobile_view { display: none; }

.peek {
    user-select: none;
    
    width:300px;
    height:180px;
    
    position:absolute;
    top:52px;
    right:15%;
    
    background-image: url('images/site_stuff/peek.png');
    background-size:contain;
    background-repeat:no-repeat;
}

.peek:hover {
    background-image: url('images/site_stuff/peek_talk.png');
    cursor: grab;
}

.peek:active {
    background-image: url('images/site_stuff/peek_uwu.gif');
    cursor:grabbing;
}

.image_viewer {
    display:none;
    position:fixed;
    text-align: center;
    align-content: center;
    width:100%;
    height:100vh;
    top:0;
    left:0;
    z-index: 50000;
}

.dark_overlay {
    position:fixed;
    top:0;
    margin:auto;
    width:100%;
    height:100%;
    background-color:black;
    opacity: 90%;
}

.floating_image {
    position: fixed; /* forces the element to stay fixed in relation to the viewport */
    top: 50%; /* sets the top of the image 50% of the page height */
    left: 50%; /* sets the left side of the image 50% across the page */
    margin-left: -100px; /* moves the image half of its own width to the left-side of the page */
    margin-top: -93px; /* moves the image half its height 'up' the page */
    border-radius: 1em;
}

.viewed_image {
    position: absolute;
    height:90%;
    width:auto;
    transform: scale(1);
    z-index: 50001;
}

}

@media (orientation:portrait) {

.mobile_view { display:block; width:96vw; }
.desktop_view { display: none; }

body {
    background-size: 100vh;
}

a {
    text-decoration: none;
    user-select: none;
    font-size:40px;
    color: var(--link_color);
    transition:0.3s;
}

a:hover {
    color: var(--link_highlight_color);
    user-select: none;
    text-decoration: underline;
    text-shadow: 0 0 10px rgb(163, 91, 240);
    text-underline-offset: 10px;
    transition: 0.1s;
}

h1 {
    line-height: 60px;
}

.peek {
    user-select: none;
    
    width:200px;
    height:100%;
    
    position:absolute;
    top:0px;
    right:-50px;
    
    background-image: url('images/site_stuff/peek.png');
    background-size:contain;
    background-repeat:no-repeat;
}

.peek:hover {
    background-image: url('images/site_stuff/peek_talk.png');
    cursor: grab;
}

.peek:active {
    background-image: url('images/site_stuff/peek_uwu.gif');
    cursor:grabbing;
}

.mobile_site_banner {
    width:100vw;
    height:110px;

    position:fixed;
    left:0;
    top:0;

    background-color: black;
    background-image: url("images/site_stuff/bricks.jpg");
    background-size: 192px;

    border-bottom: 2px solid var(--main-site-color);
}

.mobile_highlight_box {
    width:98%;
    height:auto;

    margin-top: 160px;

    background-color: black;
    background-image: url("images/site_stuff/stars.gif");

    border: 2px solid var(--highlight_box_color);
    border-radius: 5px;

    padding-bottom: 10px;
}

.mobile_main_box {
    width:98%;
    height:auto;
    min-height: 900px;

    margin-top:20px;
    background-color: black;
    background-image: url("images/site_stuff/roses.jpg");
    background-size: 320px;

    border-radius: 5px;
    border: 2px solid var(--main-site-color);
}

.dropdown {
    position:relative;
}

.dropdown-menu {
    position:fixed;
    left: 10px;
    top: 150px;

    color: var(--main_site_color);

    width:90%;
    height: auto;

    background-color: black;
    background-image: url('images/site_stuff/bricks_teal.jpg');
    border-radius: 5px;
    border:2px solid var(--main-site-color);

    pointer-events: none;

    z-index: 1000;

    opacity: 0;
    transform: translateY(-30px);
    transition:opacity 150ms ease-in-out, transform 150ms ease-in-out;
}

.dropdown.active > .dropdown_menu_button + .dropdown-menu {
    opacity: 1;

    transform: translateY(0);
    pointer-events: auto;
}

.dropdown_menu_button {
    width:80px;
    height:50px;

    background-color: var(--mobile_dropdown_button);
    
    border-radius: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border: 2px solid var(--link_color);

    position:fixed;
    top:95px;
    left:10px;

    padding-bottom: 5px;
    padding-top: 23px;

    z-index: 50;
    text-align: center;
    font-family: 'Pencilant';
    font-size: 30px;
    line-height: 1px;

    color: var(--link_color);
}

.dropdown_menu_button:hover {
    background-color: var(--mobile_dropdown_button_highlight);
    color:white;

    border-color: white;
}

}