:root {
    --shadow: rgba(12, 12, 12, 0.4);
    --background-effects: blur(0.3em);
    --scale: 1.5em;
    --width: 50em;
    --height: 25em;
    --rounding: 0.5em;
    --button-rounding: 1em;
    --link-rounding: 0.2em;

    /* Light/default scheme */
    --wallpaper: url('wallpaper.jpg');

    --page-background: rgba(12, 12, 12, 0.8);
    --tabline-background: var(--page-background);
    --tabline-border: none;
    --section-color: #ffffff;
    --link-color: #ffffff;
    --foreground: #000000;

    --one: #cf492c;
    --oneDark: #ab0a2a;
    --img-one: url('https://media1.tenor.com/m/BtGS0FU53M0AAAAC/adventuretime.gif');

    --two: #890c38;
    --twoDark: #4b083d;
    --img-two: url('https://media1.tenor.com/m/Yh2BRdP8-A0AAAAC/flame-princess-dance.gif');

    --three: #f4efae;
    --threeDark: #ecb55f;
    --img-three: url('https://media1.tenor.com/m/0LlMHETr5GkAAAAC/cool-beans-adventure-time.gif');

    --four: #ecb55f;
    --fourDark: #e36433;
    --img-four: url('https://media1.tenor.com/m/dlO08jgtJHIAAAAC/fuego.gif');

}

/* Dark scheme */
/* @media (prefers-color-scheme: dark) {
    :root {
        --wallpaper: url('wallpaper.jpg'); 

        --page-background: rgba(12, 12, 12, 0.9);
        --tabline-background: #000000;
        --tabline-border: none;
        --section-color: #ffffff;
        --link-color: #000000;
        --foreground: #ffffff;

        --one: #FFA5D5;
        --oneDark: #FF6EAF;
        --img-one: url('tab-media/tab-1.jpg'); 

        --two: #78FAE6;
        --twoDark: #27D3CB;
        --img-two: url('tab-media/tab-2.jpg'); 

        --three: #B483EF;
        --threeDark: #854CBF;
        --img-three: url('tab-media/tab-3.jpg'); 

        --four: #8CFF9B;
        --fourDark: #42BC7F;
        --img-four: url('tab-media/tab-4.jpg'); 
    }
}
*/


















/* wrapping div to center all contents of the page */
.center {
    margin: 0; padding: 0;
    display: flex; flex-direction:column; 
    justify-content: center; align-items: center;
    min-height:100vh;
}

/* flexbox */
.row {
    display: flex;
    flex-direction:row; justify-content:stretch;
}

.column {
    display: flex;
    flex-direction:column; justify-content:stretch;
}
/* side media */
.media-1 {
    background-image: var(--img-one);
}
.media-2 {
    background-image: var(--img-two);
}
.media-3 {
    background-image: var(--img-three);
}
.media-4 {
    background-image: var(--img-four);
}



/* Tab colors */
/* Color 1 */
.col1 {
    color: var(--one);
}
.col1-fill {
    color: var(--oneDark);
    background: var(--one);
    border-color: var(--oneDark);
}
.col1-border {
    border-color: var(--one);
}

/* Color 2 */
.col2 {
    color: var(--two);
}
.col2-fill {
    color: var(--twoDark);
    background: var(--two);
    border-color: var(--twoDark);
}
.col2-border {
    border-color: var(--two);
}

/* Color 3 */
.col3 {
    color: var(--three);
}
.col3-fill {
    color: var(--threeDark);
    background: var(--three);
    border-color: var(--threeDark);
}
.col3-border {
    border-color: var(--three);
}

/* Color 4 */
.col4 {
    color: var(--four);
}
.col4-fill {
    color: var(--fourDark);
    background: var(--four);
    border-color: var(--fourDark);
}
.col4-border {
    border-color: var(--four);
}

/* Section headings */
.section {
    color: var(--section)
}


/* dark and light scheme */



@font-face {
    font-family: DPdorky;
    src:url("fonts/Dpdorkdiary-P267.ttf");
}

* {
    font-family: DPdorky, Georgia, sans-serif;
}

body {
    background-image: var(--wallpaper);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    padding: 0; margin: 0;

    /* define global sizing */
    font-size: clamp(min(0.5vh, 0.5vw), var(--scale), min(3vh, 1.9vw));
}




/* ---      --- */
/* --        -- */
/* -   Main   - */
/* --        -- */
/* ---      --- */
.main {
    width: var(--width);
    height: var(--height);

    display: none;

    border-bottom-style: solid;
    border-bottom-width: 0.2em;

    background: var(--page-background);

}

.main,
.tabline{
    box-shadow: -0.2em 0.2em 0.5em var(--shadow);
    z-index:1;
    border-radius: var(--rounding);
    backdrop-filter: var(--background-effects);
}

/* ---      --- */
/* --        -- */
/* -   Page   - */
/* --        -- */
/* ---      --- */
.page {
    flex: 2;

    padding: 0.5em;
    justify-content: stretch;
    border-radius: var(--rounding);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

}

.tab-name {
    text-align: center;
    font-weight: bolder;
    font-size: 3em;
}

.section {
    color: var(--section-color);
    margin: 1em 1em 0.2em 0;
    padding: 0;
    text-decoration: underline;
}

.link-list {
    padding: 0 1em;
    flex-flow: wrap;
}


.link {
    position: relative;
    padding: 0.2em 0.5em; margin: 0.3em;
    font-size: 1em;
    background-color: var(--foreground);
    color: var(--link-color);
    border-radius: var(--link-rounding);

    box-shadow: 0 0.1em 0.1em var(--shadow);

    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

.link:hover {
    box-shadow: none;
    transform: translateY(0.2em);
    background-color: var(--link-color);
    color: var(--foreground);
}

/* ---       --- */
/* --         -- */
/* -   Media   - */
/* --         -- */
/* ---       --- */

.media {
    flex: 1;

    background-repeat: no-repeat;
    background-size: cover;
    background-origin: content-box;
    background-position: center;

    border-radius: var(--rounding);
    border-bottom-right-radius: calc(var(--rounding) - 0.2em); /*rounds corner correctly due to bottom border */
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}




/* --         -- */
/* -  tabline  - */
/* --         -- */

.tabline {
    margin: 1vh;
    background: var(--tabline-background);
    border: var(--tabline-border);
}

label {
    font-weight: bolder;
    width: 4em;
    margin: 0.4em;
    padding: 0.2em;
    text-align: center;
    font-size: 1.5em;
    border-radius: var(--button-rounding);

    border-bottom-style:solid;
    border-bottom-width: 0.2em;
    transition: all 0.07s ease;
}

label:hover {
    color: var(--background0);
    cursor: pointer;
}
label:active {
    border-width: 0;
    border-top-style: solid;
    border-top-width: 0.2em;
}


/* ---      --- */
/* --        -- */
/* -   Tabs   - */
/* --        -- */
/* ---      --- */

input {
    display: none;
}

/* Show tab when radio button is checked */
#tab1:checked ~ #tab-1,
#tab2:checked ~ #tab-2,
#tab3:checked ~ #tab-3,
#tab4:checked ~ #tab-4 {
    display: flex;
}


@media only screen and (orientation: portrait) {
    body {
        font-size: clamp(min(2vh, 2vw), var(--scale), min(3vh, 4.3vw));
    }

    .media{
        display: none;
    }

    .main{
        width: auto; height: auto;
        flex: 1;
        margin: 1em;
    }

    .center {
        justify-content: stretch; align-items: stretch;
    }

    .tabline {
        margin: 0;
        padding: 0.5em;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        justify-content: space-evenly;
    }

    label {
        margin: 0.2em;
        padding: 0.2em 0.4em;
    }

    .section {
        text-align: center;
    }

    .link-list {
        justify-content: center;
    }
}