/* ------------------ */
/* UNIVERSAL SELECTOR */
/* ------------------ */

/* NEVER FUCKING REMOVE THIS - KMS */
*,
::before,
::after {
    box-sizing: inherit;
    padding: 0;
    margin: 0;
}
img {
    box-sizing: content-box;
}
html {
    box-sizing: border-box;
}

/* --------------- */
/* UNIVERSAL COLOR */
/* --------------- */

:root {
    /* Background Colors */
    --background-color: #4e69bc;
    --content-background-color: #0f0e09;

    /* Text Colors */
    --text-color: #091131;
    --link-color: #988df3;
    --link-color-hover: #9e48ec;

    /* Borders and Outlines */
    --default-outline: 8px double #2833b6;
    --default-border: 3px solid #4e69bc;
}

/* --------- */
/* HIGHLIGHT */
/* --------- */

::selection {
    /* (Text highlighted by the user) */
    background: rgba(77, 74, 81, 0.9);
}

/* ------------------------ */
/* PFP - ROTATION ANIMATION */
/* ------------------------ */

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes spin {
    from {
        --angle: 0deg;
    }
    to {
        --angle: 360deg;
    }
}

/* -------------------------------------------------------- */
/* BODY                                                     */
/* -------------------------------------------------------- */

body {
    /* Exterior box */
    display: flex;
    justify-content: center;

    /* Change background image */
    background-image: url(img/blacksometin.jpg);
    /* To avoid the background image from repeating itself */
    background-repeat: no-repeat;
    /* To make the background image to cover the entire element */
    background-size: cover;
    /* To make sure the entire element is always covered */
    background-attachment: fixed;

    /* Gap from top of page */
    margin-top: 400px;
    margin-bottom: 55dvh;

    /* Mobile responsiveness?  || CENTER PAGE */
    max-inline-size: auto;
    margin-inline: auto;
    padding-inline: auto;
    /* inline-size: fit-content; */
}

/* ------------------------------------------ */
/* LAYOUT                                     */
/* ------------------------------------------ */

/* ------ */
/* SPLASH */
/* ------ */

.blue-eye-container,
.header--1 {
    position: sticky;
}

.blue-eye-container {
    /* IMAGE EFFECT */
    z-index: -1;
    height: 420px;
    width: 500px;
    padding: 10px;
    margin-bottom: -260px;

    /* BOARDER STYLE */
}

.blue-eye {
    /* IMAGE EFFECT */
    z-index: 0;
}

/* ------ */
/* HEADER */
/* ------ */

.header--1 {
    z-index: -2;
    height: 120px;
    width: 1950px;
    margin-left: 25px;
    margin-bottom: 20px;

    /* Outline Style */
    outline: 7px solid black;
    background-color: gray;
    border: 3px black solid;
    align-content: center;
    background-image: url(img/design2.gif);

    /* Text Style */
    color: #b1b0b0;
    font-size: 75px;
    text-align: right;
    padding-right: 60px;
}

h4 {
    text-decoration: underline;
}

/* --------- */
/* DASHBOARD */
/* --------- */

.dashboard {
    /* Grid Style */
    display: grid;

    /* Outline Style */
    outline: 1.5rem solid black;
    border: 1px solid black;
    outline-style: double;
    outline-offset: -20px;

    /* Image */
    background-image: url(img/ani3.gif);

    /* justify-content: center; */
}

/* --------------- */
/* DASHBOARD STYLE */
/* --------------- */

.main-content,
.left-sidebar,
.box-right-sidebar,
.bottom-layout {
    --grid-min-col-size: 240px;
    display: grid;
    margin: 50px;
    gap: 30px;
    /* grid-template-columns: 700px 1200px 500px;
    grid-template-rows: repeat(6, 500px); */

    /*  repeat ( # AMOUNT OF COLUMNS, SIZE OF COLUMNS,);
        repeat ( # AMOUNT OF COLUMNS, minmax(MIN SIZE, MAX SIZE)); 1fr take as much space

        PREVENT OVERFLOW
        minmax(min(MIN SIZE, 100%), MAX SIZE))
        repeat ()
    */

    /*LEFT TO RIGHT */
    grid-template-columns: repeat(
        3,
        minmax(min(var(--grid-min-col-size), 100%), 600px)
    );
    /* TOP DOWN */
    grid-auto-rows: 308px 120px 400px 150px 150px 120px 200px 120px;

    grid-template-areas:
        "box2 box17 box3"
        "box1 box1 box5"
        "box1 box1 box5"
        "box1 box1 box4"
        "box1 box1 box4"
        "box16 box16 box16"
        "box6 box6 box6"
        "box7 box8 box9"
        "box10 box11 box12"
        "box13 box14 box15";
}

/* ------------------------------ */
/* ADJUST || CHANGE CHILD ELEMENT */
/*     div class="" style=""      */
/*    CHANGE "box-in-layout"      */
/* ------------------------------ */

.boxed-in-layout {
    background-color: var(--content-background-color);
    color: var(--text-color);
    outline: var(--default-outline);
    border: var(--default-border);
}

/* --- */
/* PFP */
/* --- */

.boxed-in-layout--pfp,
.box2 {
    margin-left: 10px;
    margin-top: 8px;
    width: 300px;
    z-index: 1;
    background-image: url(img/pfp2.gif);
    background-size: 100%;
}

/* --------------- */
/* PFP - ANIMATION */
/* --------------- */

.boxed-in-layout--pfp--animatedborder,
.pfp-animation::before {
    filter: blur(1.5rem);
}

.boxed-in-layout--pfp--animatedborder,
.pfp-animation {
    position: absolute;
    z-index: 1;
    width: 320px;
    height: 310px;

    /* TEST */
    background-image: conic-gradient(
        from var(--angle),
        #2833b6,
        #091131,
        #4e69bc
    );
    animation: 1.5s spin linear infinite;
}

/* ---------- */
/* UPDATE BOX */
/* ---------- */

.boxed-in-layout--update,
.box17 {
    /* Box Style */
    position: absolute;
    height: 300px;
    width: 1110px;
    margin-left: 340px;
    margin-top: 8px;
    outline: var(--default-outline);
    border: var(--default-border);
    background-color: var(--content-background-color);

    /* Text Style */
    color: whitesmoke;
    padding: 20px;
    font-size: 30px;
}

/* Tabs */

.boxed-in-layout--update {
    display: flex;
}

/* Removes Radio Buttons */
input {
    display: none;
}

.tab-name {
    color: var(--text-color);
    height: 45px;
    background: #2833b6;
    padding: 10px 30px;
    margin-left: 4px;
    box-sizing: border-box;
    cursor: pointer;

    /* transition of tabs */
    transition: 100ms;

    /* Rounds Edges */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

input:checked + label .tab-name {
    background: var(--background-color);
    color: var(--text-color);
    font-size: 25px;
    font-weight: 600;
}

.tab-content {
    position: absolute;
    top: 62px;
    left: 24px;

    /* Scroll Fix */
    width: 96.5%;
    height: 72%;
    overflow-y: scroll;

    /* Style */
    background: var(--background-color);
    color: var(--text-color);

    /* Box */
    padding: 5px;
    box-sizing: border-box;
    border-radius: 5px;

    /* Overlap Fix */
    opacity: 0;
    z-index: 0;

    /* Smooth transition */
    transition: 100ms;
}

input:checked + label .tab-content {
    opacity: 1;
    z-index: 1;
}

/* -------------------- */
/* LINKS TO OTHER PAGES */
/* -------------------- */

.boxed-in-layout--lists,
.box3 {
    background-image: url(img/ani6.gif);
    /* To avoid the background image from repeating itself */
    background-repeat: no-repeat;
    /* To make the background image to cover the entire element */
    background-size: cover;
    /* To make sure the entire element is always covered */
    background-position: center;

    /* Box Style */
    position: sticky;
    margin-top: 8px;
    margin-left: 225px;
    outline: 8px double #6a6a6a;
    border: 3px #6a6a6a solid;

    /* Text Style */
    font-size: 30px;
}

.links {
    margin: 20px;
}

.links-list {
    color: white;
    margin-left: 50px;
}

/* ------- */
/* CONTENT */
/* ------- */

.boxes,
.box,
.main-content-container,
.box1 {
    position: relative;
    overflow: hidden;
    background-color: var(--content-background-color);
    outline: var(--default-outline);
    border: var(--default-border);
}

.main-content--container {
    /* Box */
    outline: none;
    background-color: var(--background-color);
    margin: 25px;
    height: 94%;

    /* Text */
    font-size: 750px;
    text-align: center;
    color: var(--text-color);
}

/* ----- */
/* BOX 8 */
/* ----- */

.boxed-in-layout--box8,
.box8 {
    background-color: var(--content-background-color);
    outline: var(--default-outline);
    border: var(--default-border);
}

/* ------------ */
/* EYE - BANNER */
/* ------------ */

.boxed-in-layout--banner,
.box16 {
    background-image: url(img/tumblr_pcyb0mwdPs1qkjlt5o1_1280.jpg);
    background-size: cover;
    background-position: top;
}

/* --- */
/* BOX */
/* --- */

.boxed-in-layout--link,
.box6 {
    outline: 8px double #6a6a6a;
    border: 3px black solid;
    background-color: #868686;
}

/* ------ */
/* FOOTER */
/* ------ */

.tv {
    margin-left: 360px;
    margin-bottom: 75px;
}

.footer-top {
    background-image: url(img/tumblr_pcyb0mwdPs1qkjlt5o1_1280.jpg);
    background-position: top;
    margin-left: 630px;
    margin-top: -550px;
    margin-bottom: 30px;
    height: 660px;
    width: 800px;
}

.boxed-in-layout--selected {
    /* Style */
    margin-top: -25px;
    height: 140px;
    width: 2000px;
    outline: 5px solid black;
    background-image: url(img/ani5.gif);
    background-color: gray;
    border: 3px black solid;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    color: #333;
    font-size: 45px;
}