/*
______________ ______________      ____.___  ________  _________________________________________ 
\__    ___/   |   \_   _____/     |    |   |/  _____/ /   _____/\__    ___/\_   _____/\______   \
  |    | /    ~    \    __)_      |    |   /   \  ___ \_____  \   |    |    |    __)_  |       _/
  |    | \    Y    /        \ /\__|    |   \    \_\  \/        \  |    |    |        \ |    |   \
  |____|  \___|_  /_______  / \________|___|\______  /_______  /  |____|   /_______  / |____|_  /
                \/        \/                       \/        \/                    \/         \/ 
*/

:root {
    --reignited-red:       #d52510;
--reignited-yellow:         #f8c80b;
    --grey:                 #242424;
}

body, html {
    background:#000;
    margin:0;
    padding:0;
}

body {
    background-image: url("/gfx/reignited_transparent_display_can.webp");
    background-size:40vw auto;
    background-position: bottom right;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
@media (max-width:767px) {
    body {
        background-size:80vw auto;
    }
}

.center-content {
    width:100vw;
    height:100vh;
    display:flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

#reignited-placeholder {
    width:100%;
    max-width:300px;
    display:flex;
    flex-wrap:wrap;
}

#reignited-placeholder img {
    width:100%;
    height:auto;
}

.loading-fake {
    width:80%;
    margin:0 10%;
    position: relative;
    flex:0 0 80%;
    max-width: 80%;
}

.loading-fake span {
    border-radius: 1rem;
    border:1px solid var(--reignited-yellow);
    width:100%;
    height:10px;
    display:block;
    padding:2px;
    margin-top:1rem;
}

.loading-fake em {
    color:var(--reignited-yellow);
    text-align: center;
     width:100%;
     display:block;
     padding-top:.5rem;
}