/* Import my own fancy font */

@import url("/assets/fonts/jgamestaken-blocky.css");

/* Continue */

:root { /* Define defaults here */
    --blur: blur(5px);
    --extreme-blur: blur(15px);
    --box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    --border: 1px solid rgba(255, 255, 255, 0.3);
    --border-colour: rgba(255, 255, 255, 0.3);
    --border-colour-bright: rgba(255, 255, 255, 0.1);
    --border-radius: 8px;

    --background-image: url("/assets/backgrounds/bg3.webp");
    --background-colour-blurred: rgba(255, 255, 255, 0.2);
    --background-colour: rgba(230, 230, 230, 1);

    --accent-colour: #5555FF;
    --button-colour: #5555FF;
    --button-colour-hover: #8888FF;

    --text-colour: #eee;
    --text-colour-secondary: #222;
    --placeholder-text-colour: #ccc;

    --transition: all .5s ease;
    --short-transition: all .2s ease;

    /* Also some settings */


    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
} 

/* Body */

body {
    margin: 0;
    padding: 0;

    width: 100vw;
    height: 100vh;

    background-color: var(--background-colour);
    background-image: var(--background-image);
    background-repeat: no-repeat;
	background-position: center;
	background-size: cover;

    overflow: hidden;

    display: flex;
}

/* Container object */
/* Also used to display loading spinner in the beginning */

.container { /* Container starts in loading. Combine with js */
    position: absolute;

    width: 50px;
    height: 50px;

    left: calc(50% - 45px);
    top: calc(50% - 45px); /* Calculate offest manually instead of using transform */

    padding: 20px;
    
    background: var(--background-colour-blurred);

    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    box-shadow: var(--box-shadow);

    border: var(--border);
    border-radius: var(--border-radius);

    overflow: hidden;

    justify-items: center;
    align-items: center;

    transition: var(--transition);
}

.container.doneLoading { /* Container ends loading. Combine with js */

    width: var(--sizetowidth); /* Variable set by LOCAL script */
    height: var(--sizetoheight);

    left: calc(50vw - (var(--sizetowidth) / 2));
    top: calc(50vh - (var(--sizetoheight) / 2));

    padding: 0px;

    overflow-y: auto;
}

.container.doneLoading[data-flag="fullscreen"] { /* Edit some properties if the data flag is fullscreen */
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    border: 0;
    border-radius: unset;
}

/* Rest continues in sitecontent.css */

/* BASIC STYLING */
/* h, h2, h3, p elements */

h1 {
    font-family: jgamestaken-blocky, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--text-colour);
    
    font-size: clamp(15px, 2rem, 2rem); /* Header size */

    margin-top: 20px;
    margin-bottom: 20px;
}
h1.inverted {color: var(--text-colour-secondary);}


h2 {
    font-family: Montserrat, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--text-colour);

    font-size: 1.5rem;

    margin-top: 15px;
    margin-bottom: 15px;
}
h2.inverted {color: var(--text-colour-secondary);}


p {
    font-family: Montserrat, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--text-colour);

    font-size: 1rem;

    text-wrap: wrap;

    max-width: 40vw;

    padding: 0;

    margin-top: 10px;
    margin-bottom: 10px;
}
p.inverted {color: var(--text-colour-secondary);}
p.minibranded {font-family: jgamestaken-blocky; }

/* p rescaling for mobile */

@media only screen and (max-width: 800px) {
  p {
    max-width: 100%;
  }
}

/* Image as text */

.imageastext {
    display: inline-block;

    height: 2rem;
    width: auto;

    object-fit: contain;

    margin-top: 10px;
    margin-bottom: 10px;
}

/* BUTTONS */

.rounded_filled_button {
    display: inline-block;

    background-color: var(--button-colour);

    border-radius: var(--border-radius);

    color: var(--text-colour);
    text-decoration: none;

    border: 0;
    outline: 0;

    padding: 10px 25px;

    font-size: 1rem;
    font-family: Montserrat, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    cursor: pointer;

    transition: var(--short-transition);
}
.rounded_filled_button.fullwidth {
    width: calc(100%);
}
.rounded_filled_button:hover {
    background-color: var(--button-colour-hover);
}