/*
This file contains the stylization for the home and laoding screens, as well as markdown formatting.
*/

/* Home screen */
#title_and_logo_container {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

#page_name {
    font-size: 10vw;
    margin: -0.5vw;
}

.subheaders {
    margin: 0vw;
}

#subheader3 {
    margin-bottom: 3vw;
}

.home_buttons {
    border-radius: 0.9vw;
    margin: 0.5vw;
    padding: 0.5vw;
    padding-left: 2vw;
    padding-right: 2vw;
}

#home_button_container {
    display: flex;
    flex-direction: column;
}

#home_screen {
    width: 100%;
    background-size: cover;
    background-image: url(../assets/images/backgrounds/alt_home_screen_bg.png);
}

#disclaimer, #version {
    font-family: RWmenu;
    z-index: 999;
    position: absolute;
}

#disclaimer {
    top: 0;
    font-size: 0.5vw;
    left: 0;
    margin-left: 0.7vw;
}

#version {
    font-size: 1vw;
    bottom: 0;
    right: 0;
    margin-right: 1.4vw;
    margin-bottom: 0.6vw;
}

/* Loading screen */
#loading_screen, #home_screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#loading_header {
    font-size: 5vw;
}

#loading_logo {
    width: 7vw;
    height: 7vw;
    position: absolute;
    z-index: 999;
    right: 2vw;
    bottom: 2vw;
    animation: spin 3s linear infinite;
}

/* Markdown formatting */

.markdown_and_back_container {
    z-index: 999;
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    transition: opacity 0.5s, transition 0.5s;
}

.markdown_container {
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.3vw;
    border-radius: 0.6vw;
    border: 0.2vw solid #dadbdd;
    width: 50vw;
    height: 35vw;
    background-color: rgba(44, 44, 44, 1);
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3vw;
}

.markdown_img {
    border-radius: 1vw;
    width: 100%;
}

.markdown_button_img {
    width: 9vw;
    margin: 1vw;
}

.markdown_button_img_container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.markdown_link {
    color: lightblue;
}

.markdown_link:visited {
    color: lightblue;
}

.back_button, #preview_toggle_button {
    font-size: 1.2vw;
    width: 1vw;
    height: 1vw;
    z-index: 999;
    position: absolute;
    left: 17vw;
    top: 0;
    padding-right: 2.2vw;
    padding-left: 0.9vw;
    padding-top: 0.5vw;
    padding-bottom: 2.5vw;
}

.link_button {
    image-rendering: pixelated;
    top: auto;
    bottom: 0.6vw;
    left: var(--left-distance);
    padding-right: 3.6vw;
    padding-left: 0.6vw;
    padding-top: 0.5vw;
    padding-bottom: 3.7vw;
    border-color: var(--border-color);
    transition: box-shadow 0.2s ease-in-out;
}

.link_button:hover {
    filter: brightness(100%);
    box-shadow: 0vw 0vw 1.3vw 0.4vw var(--glow-color);
}

.link_icon {
    width: 3vw;
}

#name1 {
    text-decoration: none;
    color: #dadbdd;
}

#name1:hover {
    cursor: auto;
}

#bird {
    display: block;
    z-index: 999;
    position: absolute;
    width: 17vw;
    right: -100vw;
    top: 3vw;
}