mind-overflow-website-ghost-theme/assets/css/screen.css

@charset "utf-8";
/*

TABLE OF CONTENTS
--------------------------------------------------
1.       Global Settings
  1.1.     Structure & Style
  1.2.     Layout
  1.3.     Navigation bar(s)
  1.4.     Footer
  1.5.     Header
2.       Index Style
3.       Feeds
  3.1.     Post Feed
  3.2.     Tag Feed
4.       Post & Tag Cards
  4.1.     Big Post Card style
  4.2.     Navbar Post Card Style
  4.3.     Tag Card Style
5.       Pages & Posts style
  5.1.     Header
  5.2.     Content
  5.3.     Description
  5.4.     Koenig Styles
  5.5.     Sidebar
6.       Cookie & Policy Popup
7.       Animations and Gradients
8.       Media Queries
--------------------------------------------------

*/

/*
1. Global Settings
--------------------------------------------------
Settings used for things displayed in all pages
*/

/*
1.1. Style
--------------------------------------------------
Used to style things in such a way that they appear in the same way, everywhere.
*/

@import "fonts.css";

html, body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    margin: 0;
    padding: 0;
    height: 100%;

    font-size: 20px;
    line-height: 1.6;
    color: white;
    width: 100%;
    background-color: #151515;
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
    color: paleturquoise;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: rgb(230, 230, 230);
}

h1 {
    font-size: 70px;
}

h2 {
    font-size: 35px;
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 20px;
}

hr {
    border: 1px solid rgb(80, 80, 80);
    border-bottom: 0;
    margin: 50px 70px;
}

img {
    display: block;
    height: auto;
    -moz-user-select: none;
    -webkis-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -o-user-select: none;
}

/* Generic class to make things unselectable */
.unselectable {
    -moz-user-select: none;
    -webkis-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -o-user-select: none;
}

/* COLORED TEXT SELECTION */
::selection {
    color: #2d0670;

    /*
    We need RGBA because Chrome forces it to be semi-transparent, making white look like grey.
    By setting it to 99.5% opacity, we can override this. 100% does not work, however.
    */
    background: rgba(255, 255, 255, 0.995);
}

.mind-post-card-sidebar_tag, .mind-post-header_tag, .mind-post-card-big_tag {
    color: #3fd5ff;
}

/*
1.2. Layout
--------------------------------------------------
Used to define how every page is displayed.
*/

main {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: calc(100vh - 400px); /* To avoid having the footer appearing in the middle of the page */
}

.mind-content_main {
    padding: 0 20px;
    max-width: 1260px;
    width: 1260px;
    margin: auto;
}

/*
1.3. Navigation
--------------------------------------------------
Used to style the navigation bars.
*/

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 40px;
}

.nav {
    width: 100%;
    padding: 0;

    overflow: auto;
    white-space: nowrap;
}

.mind-global-navbar_primary {
    position: absolute; /* only used if JS is disabled */
    top: 0;
    width: 100%;
    z-index: 100;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    overflow: hidden;
    padding: 0;

    transition: .5s;
}

/* This class is applied by a JS script, so that users with JS disabled
can still see the navbar, but it won't move while they're scrolling.
This is needed because the navbar is transparent, and a black background
is applied by the script on scroll.
*/
.mind-global-navbar_primary-allowmoving {
    position: fixed;
}

.mind-global-navbar_primary-colored {
    background: rgba(0, 0, 0, 1);
}

.mind-global-navbar_primary-colored img {
    transform: translate(50px, 0);
}

.mind-global-navbar_primary-transparent {
    background: rgba(0, 0, 0, 0.0);
}

.mind-global-navbar_primary-transparent img {
    opacity: 0;
}

.mind-global-navbar_primary img {
    margin-left: -30px;
    width: 30px;
    height: 30px;
    transition: .5s;
}

.mind-global-navbar_primary li {
    display: inline-block;
    text-align: center;
    font-size: 25px;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    margin: 0;
    padding: 0 10px;
}

.mind-global-navbar_primary a {
    color: white;
    margin: 0;
    padding: 0;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.mind-global-navbar_primary li.nav-services {
    /* TODO: choose if background should be colorful or white */
    /*background: white;*/
    /*background: linear-gradient(to right, #33ffc5 20%, #fc33ff, #ff3370, #ff3333, #3dff33, #33ffc5);
    background-size: 800px, 800px;
    color: aquamarine;
    text-fill-color: transparent;
    animation: gradient 2s linear infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;*/
}

.mind-global-navbar_secondary {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    padding: 0;

    background-color: rgb(50, 50, 50);

    position: relative;
    z-index: 4;
}

.mind-global-navbar_secondary li {
    display: inline-block;
    text-align: center;
    font-size: 25px;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    margin: 0;
    padding: 0 10px;
}

.mind-global-navbar_secondary a {
    color: white;
    margin: 0;
    padding: 0;
    text-decoration: none;
    display: flex;
    align-items: center;
}

/*
1.4. Footer
--------------------------------------------------
*/

.mind-site-footer_main {
    font-size: 25px;
}

footer.mind-site-footer_main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    z-index: 3;
    font-family: 'Montserrat', sans-serif;
    color: white;
    padding: 20px;
}

.mind-site-footer_main p {
    font-weight: 800;
    margin: 0;
    overflow-wrap: break-word;
}

nav.mind-site-footer_nav {
    text-align: right;
}

/*
1.5. Header
--------------------------------------------------
*/

/* TODO: choose if background should be colorful or black */
.mind-post-header, footer.mind-site-footer_main {
    /*background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);
    background-size: 1000%, 100%;
    animation: gradient 7s linear infinite;
    animation-direction: alternate-reverse;*/
    background: rgb(10, 10, 10);
    color: white;
}

.mind-global-header_arrow-down {
    border: solid white;
    opacity: 0.4;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 6px;
    margin-left: -6px;
    position: absolute;
    transform: rotate(45deg);
    transition: 1s;
}

.mind-global-header_arrow-down-big {
    animation: arrow-bounce-big 1.5s infinite;
}

.mind-global-header_arrow-down-mid {
    animation: arrow-bounce-mid 1.5s infinite;
}

/* 2. Index Style
--------------------------------------------------
Used to style the index/homepage.
*/

.mind-index-header_main {
    height: 100%;
    width: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /*background: black;*/
    background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);
    background-size: 1000%, 100%;
    animation: gradient 7s linear infinite;
    animation-direction: alternate-reverse;
}

.mind-index-header_main h1 {
    margin: 100px 40px 0;
    padding: 0;
    font-size: 90px;
    line-height: 17vw;
}

/* 3. Feeds
--------------------------------------------------
*/

/* 3.1. Post Feed
--------------------------------------------------
Used to style the post feed, seen in the index/home page.
*/

.mind-feed-content_main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 30px;
    padding: 50px 0;
}

/* 3.2. Tag Feed
--------------------------------------------------
Used to style the tag feed, seen in the custom-tags page.
*/

.mind-tag-content_main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 30px;
    padding: 50px 0;
}

/* 4. Post & Tag Cards
--------------------------------------------------
*/

/* 4.1. Big Post Card style
--------------------------------------------------
*/

.mind-post-card-big_main {
    /* Layout */
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;

    /* Style */
    background-color: rgb(50, 50, 50);
    border: 1px solid transparent;
    border-radius: 5px;
    box-shadow: 0 1px 1px black, 0 2px 4px black;
    transition: 0.5s;
    font-size: 18px;
}

.mind-post-card-big_main:hover {
    box-shadow: 1px 3px 15px 2px black;

    /* TODO: decide:
    1. move up
    transform:translate3d(0,-5px,0);

    2. scale up
    transform: scale(1.04);

    3. scale down
    transform: scale(0.96);

    ATM: move up
    */
    transform: translate3d(0, -5px, 0);
}

.mind-post-card-big_header {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    padding: 20px 30px 0;
}

.mind-post-card-big_excerpt {
    text-align: justify;
    padding: 0 30px;
}

a.mind-post-card-big_main {
    color: rgb(200, 200, 200);
}

.mind-post-card-big_meta {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    margin: 10px 0 0;
    color: rgb(180, 180, 180);
}

a.mind-post-card-big_main:hover {
    text-decoration: none;
}

footer.mind-post-card-big_footer {
    display: flex;
    align-items: flex-end;
    height: 100%;
    margin-top: 20px;
    justify-content: flex-end;
    padding: 0 20px 20px;
}

.mind-post-card-big_author-image {
    border-radius: 100%;
    margin-left: 10px;
    max-width: 30px;
}

.mind-post-card-big_feature-image {

    /*
    The following 3 statements are used
    to make all images have the same size.

    This has the downside of being relatively more difficult to scale,
    so if you want to go back to normal viewing (full image)
    only leave:
    width: 100%;
    */
    object-fit: cover;
    width: 100%;
    height: 217px;
    max-height: 100%;


    border-radius: 5px;
}

/* 4.2. Navbar Post Card style
--------------------------------------------------
*/

.mind-post-card-sidebar_main {
    /* Layout */
    display: flex;
    flex-direction: column;
    margin: 20px 0;

    /* Style */
    background-color: rgb(40, 40, 40);
    border-radius: 5px;
    box-shadow: 0 0 2px rgb(0, 0, 0), 0 2px 3px rgb(0, 0, 0);
    transition: .3s;
}

.mind-post-card-sidebar_main:hover {
    transform: translate3d(0, -5px, 0);
    box-shadow: 0 0 2px rgb(0, 0, 0), 0 2px 15px rgb(0, 0, 0);
}

.mind-post-card-sidebar_feature-image {

    /*
    The following 3 statements are used
    to make all images have the same size.

    This has the downside of being relatively more difficult to scale,
    so if you want to go back to normal viewing (full image)
    only leave:
    width: 100%;
    */
    object-fit: cover;
    width: 100%;
    height: 100px;
    max-height: 100%;


    border-radius: 5px;
}

.mind-post-card-sidebar_meta {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    color: rgb(180, 180, 180);
}

.mind-post-card-sidebar_header {
    margin: 0 5px 0;
    padding: 0 5px 10px;
}


/* 4.3. Tag Card Style
--------------------------------------------------
*/

.mind-tag-card_main {
    /* Layout */
    display: flex;
    flex-direction: column;
    height: 100%;

    /* Style */
    background-color: rgb(40, 40, 40);
    border-radius: 5px;
    box-shadow: 0 0 2px rgb(0, 0, 0), 0 2px 3px rgb(0, 0, 0);
    transition: .3s;
}

.mind-tag-card_main:hover {
    transform: translate3d(0, -5px, 0);
    box-shadow: 0 0 2px rgb(0, 0, 0), 0 2px 10px rgb(0, 0, 0);
}

.mind-tag-card_feature-image {

    /*
    The following 3 statements are used
    to make all images have the same size.

    This has the downside of being relatively more difficult to scale,
    so if you want to go back to normal viewing (full image)
    only leave:
    width: 100%;
    */
    object-fit: cover;
    width: 100%;
    height: 200px;
    max-height: 100%;


    border-radius: 5px;
}

.mind-tag-card_header {
    margin: auto;
}

.mind-tag-card_header h4 {
    font-size: 20px;
    text-align: center;
    margin: 10px;
}

/* 5. Pages & Posts style
--------------------------------------------------
style shared between pages and posts (eg. title).

Even if pages are different from posts, they are very similar,
and thus mostly share the same classes.
Due to Ghost's structure, pages are derivates of posts,
so all classes will refer to them as posts ".mind-post*"
instead of pages ".mind-page*".
*/


/* 5.1. Header
--------------------------------------------------
*/

.mind-post-header {
    height: 400px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    position: relative;
    z-index: 3;
    box-shadow: 0 0 3px rgb(0, 0, 0), 0 3px 46px rgb(0, 0, 0);
}

.mind-post-header div {
    /* Leave space for the floating arrow */
    margin: 0 0 70px;
}

.mind-post-header p {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: rgb(200, 200, 200);
    font-size: 15px
}

.mind-post-header h1 {
    margin: 0 20px;
    line-height: 70px;
}

/* 5.2. Content
--------------------------------------------------
*/

.mind-post_main {
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
}

.mind-post_content-header {
    /*
        TODO: decide whether the image should be full-size (without rounded borders),
        or with the same margin as the content, with rounded borders.

        SAME-AS-CONTENT:
        margin-top: 50px;

        CURRENTLY:
        full-size.
     */

    margin: 0 -60px;
    padding: 0 0 20px;
}

img.mind-post_feature-image {
    width: 100%;
    object-fit: cover;
    /*
    TODO: see .mind-post_content-header.

    SAME-AS-CONTENT:
    border-radius: 5px;
    */
}

.mind-post_main img.mind-post_feature-image {
    /* 21:9 aspect ratio
        the image is 840 pixels wide, because
        the whole page content is 1260 pixels wide.
        the two sidebars are 210 pixels each, so
        the image is 840 pixels wide.

        the image has to be 360 pixels high to have an accurate 21:9 aspect ratio.

        THIS ONLY APPLIES TO POSTS, since pages have no sidebars.
    */
    max-height: 360px;
}


.mind-page_main img.mind-post_feature-image {
    /* 21:9 aspect ratio
        the whole page content is 1260 pixels wide.
        there are no sidebars.

        so, the image is 1260px wide too.

        the image has to be 540 pixels high to have an accurate 21:9 aspect ratio.

        THIS ONLY APPLIES TO POSTS, since pages have no sidebars.
    */
    max-height: 540px;
}

.mind-post_content code {
    font-family: monospace;
    background-color: rgb(20, 20, 20);
    border-radius: 2px;
    font-size: 14px;
    padding: 7px 5px 2px;
}

.mind-post_content pre code {
    border-radius: 0;
    padding: 0;
}

.mind-post_content pre {
    background-color: rgb(20, 20, 20);
    overflow-x: auto;
    border: 1px solid black;
    border-radius: 5px;
    font-size: 14px;
    padding: 10px;
    margin: 0 20px 2em;
}

.mind-post_central-column {
    overflow: hidden; /* to hide, eg., overflowing code */
    padding: 0 60px 20px;
    text-align: justify;
    background-color: rgb(40, 40, 40);
    box-shadow: 0 0 3px rgb(0, 0, 0), 0 3px 46px rgb(0, 0, 0);
    position: relative;
    z-index: 2;
    font-size: 18px;
    color: rgb(200, 200, 200);
    box-sizing: border-box;
    min-height: calc(100vh - 400px); /* To avoid having the div finish in the middle of the page, leaving an empty part */
}

.mind-post_content h1, .mind-post_content h2, .mind-post_content h3, .mind-post_content h4, .mind-post_content h5, .mind-post_content h6 {
    text-align: left;
}

.mind-post_content blockquote {
    border-left: 4px solid paleturquoise;
    border-radius: 6px;

    color: rgb(180, 180, 180);
    background-color: rgb(30, 30, 30);

    margin: 20px 0;
    padding: 10px 30px;
}

.mind-post_content li {
    margin: 0 0 1em;
}

.mind-post_content a {
    text-decoration: underline;
    color: rgb(220, 220, 220);
    text-decoration-color: rgb(133, 179, 179); /* darker paleturquoise */
    text-underline-position: under;
    transition: 0.3s;
}

.mind-post_content a:hover {
    color: paleturquoise;
}

/*.mind-post_content a {
  position: relative;
}

.mind-post_content a:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: paleturquoise;
	visibility: hidden;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}

.mind-post_content a:hover:before {
	visibility: visible;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}*/

#remark42 .root__copyright {
    visibility: hidden;
}

/* 5.3. Description
--------------------------------------------------
 */

.mind-post_info {
    font-size: 15px;
    background-color: rgb(30, 30, 30);
    margin: 20px -60px; /* hacky way to remove side padding from the content div and expand the background color, but who cares */
    padding: 40px 60px;
}

.mind-post_info hr {
    visibility: hidden;
}



/* 5.4. Koenig Styles
--------------------------------------------------
*/

/* Begin images

[structure]
class ".kg-card" is applied to all cards!

class ".kg-image" is applied to all images.
class ".kg-image-card" is applied to all image containers (includes description)

there are 3 sizes:
  - normal
  - wide (class ".kg-width-wide")
  - full (class ".kg-width-full")

if an image has a description, class ".kg-card-hascaption" is applied to the container.
*/

.kg-card {
    padding: 20px 0 20px;
}

.kg-image {
    width: 100%;
    max-width: 100%;
}

.kg-image-card img {
    border-radius: 5px;
}

.kg-image-card {
    margin: 0 40px;
}

.kg-width-wide {
    margin: 0;
}

.kg-width-full {
    margin: 0 -60px;
}

.kg-width-full img {
    border-radius: 0;
}

.kg-card-hascaption figcaption {
    margin: 0 20px;
    padding: 10px 20px;
    font-size: 16px;
    line-height: 1em;
    color: rgb(150, 150, 150);
    border-right: 1px solid rgb(80, 80, 80);
    border-bottom: 1px solid rgb(80, 80, 80);
    border-left: 1px solid rgb(80, 80, 80);
    border-radius: 0 0 5px 5px;
    text-align: center;
}

/* End images */

/* Begin Bookmarks */


.kg-bookmark-card {
    margin: 0;
}

.kg-bookmark-card a {
    text-decoration: none;
}

.kg-bookmark-container {
    display: flex;
    min-height: 148px;
    border: 1px solid rgb(80, 80, 80);
    border-radius: 5px;
    transition: .3s;
    max-height: 170px;
}

.kg-bookmark-container:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 0 3px rgb(0, 0, 0), 0 3px 10px rgb(0, 0, 0);
}

.kg-bookmark-content {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    word-break: break-word;
    padding: 20px 20px 0;
    color: white;
    box-sizing: border-box;
}

.kg-bookmark-title, .kg-bookmark-description {
    /* Used to make the text only be max 2 lines long */
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.kg-bookmark-title {
    font-size: 15px;
    font-weight: 700;

}

.kg-bookmark-description {
    margin: 12px 0;
    max-height: 48px;
    font-size: 14px;

}

.kg-bookmark-metadata {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    margin-top: auto;

}

.kg-bookmark-icon {
    width: 22px;
    height: 22px;
    margin-right: 10px;

}

.kg-bookmark-publisher {
    padding-left: 10px;
}

.kg-bookmark-author {
    padding-right: 10px;
    border-right: 1px solid rgb(80, 80, 80);
}

.kg-bookmark-author, .kg-bookmark-publisher {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
}

.kg-bookmark-thumbnail {
    border-radius: 0 5px 5px 0;
    min-width: 33%;
    box-sizing: border-box;
    font-size: 0;
    width: 50%;
    max-height: 100%;
}

.kg-bookmark-thumbnail img {
    box-sizing: border-box;
    border-radius: 0 5px 5px 0;
    object-fit: cover;
    height: 100%;
    width: 100%;
}

/* End Bookmarks */

/* Begin Gallery */
.kg-gallery-container {
    margin: 0 -40px;
}

.kg-gallery-row {
    display: flex;
    justify-content: center;
}

.kg-gallery-image {
    margin: 10px 10px;
}

.kg-gallery-image img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

/* End Gallery */


/* 5.5. Sidebar
--------------------------------------------------
*/
#mind-post_sidebar-left {
}

#mind-post_sidebar-left a {
    color: rgb(230, 230, 230);
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}

#mind-post_sidebar-left a.current {
    font-weight: 700;
}

#mind-post_sidebar-left a:hover {
    color: paleturquoise;
}

#mind-post_sidebar-left h2 {
    font-size: 18px;
    padding: 10px 0;
}

#mind-post_sidebar-left h3 {
    font-size: 15px;
    padding: 0 0 0 10px;
}

.mind-post_sidebar {
    padding: 0 20px;
    background-color: rgb(30, 30, 30);
    box-shadow: 0 0 3px rgb(0, 0, 0), 0 3px 46px rgb(0, 0, 0);
    height: 100%;
}

.mind-post_sidebar-content {
    padding: 90px 0 10px;
    position: sticky;
    top: 0;
}

/* 6. Cookie & Policy popup
--------------------------------------------------
*/

.mind-policy-popup {
    display: none; /*Hidden, we want to show it via JavaScript */

    /* Theming */
    background: rgb(30, 30, 30);
    color: white;
    border-radius: 3px;
    padding: 10px;
    font-size: 25px;
    box-sizing: border-box;
    box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.2);

    /* Disable text highlighting */
    user-select: none;
    -moz-user-select: none;
    -webkis-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;

    /* Size */
    width: 500px;
    overflow: hidden;

    /* Positioning */
    position: fixed;
    left: 50px;
    bottom: 75px;
    z-index: 2;
}

.mind-policy-popup p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 200;
    color: rgb(220, 220, 220);
    font-size: 16px;
}


.mind-policy-popup button {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 13px;

    transition-duration: 0.4s;
    border-radius: 3px;
    background-color: #484848;
    border: none;
    cursor: pointer;
    color: white;
    padding: 15px 30px;
    text-align: center;
    float: right;
}

.mind-policy-popup button:hover {
    background-color: #44277a;
}

div.mind-policy-popup {
    z-index: 100;
    padding: 20px 20px;
}

/* End policy popup */

/* 7. Animations and Gradients
--------------------------------------------------
*/

/* ARROW BOUNCE (on Pages and Posts)*/
@keyframes arrow-bounce-mid {
    0% {
        top: 89%;
    }
    50% {
        top: 87%;
    }
    100% {
        top: 89%;
    }
}

/* ARROW BOUNCE (on Index and Home pages)*/
@keyframes arrow-bounce-big {
    0% {
        top: 94%;
    }
    50% {
        top: 92%;
    }
    100% {
        top: 94%;
    }
}

/* ANIMATED GRADIENT BACKGROUND */
@keyframes gradient {
    0% {
        background-position: 0
    }
    100% {
        background-position: 100%
    }
}
/* 8. Media Queries
Media queries are used to make the website responsive and cool on mobile.
--------------------------------------------------
*/

@media only screen and (max-width: 2000px)
{
    ul {
        margin: 15px 0;
    }
}

@media only screen and (max-width: 1300px) {

    h1 {
        font-size: 60px;
    }

    h2 {
        font-size: 32px;
    }

    h3 {
        font-size: 26px;
    }

    .mind-post-header p {
        font-size: 13px;
    }

    .mind-post-card-big_meta {
        font-size: 13px;
    }

    .mind-post-card-big_main {
        font-size: 17px;
    }

    .mind-content_main {
        min-width: calc(100% - 40px);
        width: calc(100% - 40px);
        padding: 0 20px;
    }

    .mind-post_central-column {
        padding: 0 40px;
        font-size: 17px;
    }

    .mind-post_main img.mind-post_feature-image {
        /* 21:9 aspect ratio

            the whole body is 100% wide.
            the "content" (so excluding the sidebars) is about 67% large.
            the image is also 67% large, since it takes 100% of the content width.

            67 stands for 21,
            x stands for 9.

            x = 29% of the view width.
            to be a perfect 21:9 ratio, the image has to be 29vw high.

            THIS ONLY APPLIES TO POSTS, since pages do not have sidebars.

        */
        max-height: 29vw;
    }

    .mind-page_main img.mind-post_feature-image {
        /* 21:9 aspect ratio

            the whole body is 100% wide.
            there are no sidebars.

            the image has to be 21:9, so:

            100 stands for 21
            x stands for 9

            x = 42.8%.

            the image has to be 42.8% wide to be 21:9.

            THIS ONLY APPLIES TO PAGES, since posts have sidebars.

        */
        max-height: 42.857vw;
    }

    .kg-gallery-image {
        margin: 10px 10px;
    }

    .kg-gallery-row {
        margin: 0 20px;
    }

    .mind-post-card-big_main {
        margin: auto;
    }

    .mind-site-footer_main {
        font-size: 23px;
    }

    .mind-tag-content_main {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
}

@media only screen and (max-width: 1000px) {

    h1 {
        font-size: 50px;
    }

    h2 {
        font-size: 30px;
    }

    h3 {
        font-size: 24px;
    }

    h4 {
        font-size: 18px;
    }

    ul {
        margin: 13px 0;
    }

    .mind-post-card-big_meta {
        font-size: 12px;
    }

    .mind-post-card-big_header h3 {
        font-size: 25px;
    }

    .mind-post-card-big_main {
        font-size: 16px;
    }

    .mind-global-navbar_primary li, .mind-global-navbar_secondary li {
        font-size: 22px;
    }

    .mind-feed-content_main {
        grid-template-columns: 1fr 1fr;
    }

    .mind-post-header h1 {
        margin: 0 20px;
        line-height: 60px;
    }

    .mind-post_main {
        grid-template-columns: 1fr;
    }

    .mind-post_central-column {
        padding: 0 20px;
    }

    .mind-post_main img.mind-post_feature-image {
        /* 21:9 aspect ratio

        the body is 100% large.
        there are no sidebars.

        the image has to be 21:9, so:

        100 stands for 21
        x stands for 9

        x = 42.8%.

        the image has to be 42.8% wide to be 21:9.

        we decided to go for 50% to be a little generous on small screens (21 : 9 looks good but 21 : 10 is good too).
        */
        max-height: 50vw;
    }

    .kg-gallery-image {
        margin: 10px 5px;
    }

    .kg-gallery-row {
        margin: 0 40px;
    }

    .mind-post_sidebar {
        visibility: hidden;
        height: 0;
        max-height: 0;
        overflow: hidden;
    }

    .mind-policy-popup {
        width: 50vw;
        bottom: 10px;
        left: 10px;
    }

    .mind-policy-popup button {
        padding: 10px 20px;
    }

    .mind-site-footer_main {
        font-size: 20px;
    }

    .mind-tag-content_main {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .mind-tag-card_feature-image {
        height: 180px;
    }
}

@media only screen and (max-width: 800px) {
    .mind-tag-content_main {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media only screen and (max-width: 650px) {

    h1 {
        font-size: 40px;
    }

    h2 {
        font-size: 26px;
    }

    h3 {
        font-size: 21px;
    }

    ul {
        margin: 10px 0 10px auto;
        transition: .5s;
    }

    .mind-post-header  h1 {
        line-height: 40px;
    }

    .mind-post-card-big_header h3 {
        font-size: 23px;
    }

    .mind-post-card-big_main {
        font-size: 15px;
    }

    .mind-global-navbar_primary li, .mind-global-navbar_secondary li {
        font-size: 18px;
    }

    .mind-feed-content_main, .mind-tag-content_main {
        padding: 20px;
    }

    .mind-feed-content_main {
        grid-template-columns: 1fr;
        min-width: calc(100% - 40px);
        width: calc(100% - 40px);
    }

    .mind-content_main {
        width: 100%;
        padding: 0;
    }

    .mind-post_central-column {
        font-size: 15px;
    }

    .mind-post_info {
        font-size: 13px;
    }

    .mind-post_content pre,
    .mind-post_content code,
    .kg-card-hascaption figcaption,
    .kg-bookmark-description {
        font-size: 12px;
    }

    .kg-bookmark-title {
        font-size: 13px;
    }

    .kg-bookmark-publisher {
        font-size: 10px;
    }

    .kg-bookmark-content {
        padding: 10px 10px 0;
    }

    .kg-bookmark-metadata {
        margin-bottom: 10px;
    }

    .mind-global-navbar_primary img {
        margin-left: -35px;
        width: 25px;
        height: 25px;
    }

    .mind-global-navbar_primary-colored ul {
        width: calc(100vw - 40px);
    }

    .mind-policy-popup {
        width: 90vw;
    }

    .mind-policy-popup p {
        font-size: 12px;
    }

    .mind-policy-popup button {
        font-size: 12px;
    }

    .mind-site-footer_main {
        font-size: 18px;
    }

    .mind-tag-card_feature-image {
        height: 150px;
    }
}

@media only screen and (max-width: 550px) {
    .mind-index-header_main h1 {
        font-size: 16vw;
    }

    h2 {
        font-size: 23px;
    }

    h3 {
        font-size: 19px;
    }

    .mind-post_central-column {
        font-size: 14px;
    }

    .mind-site-footer_main {
        font-size: 16px;
    }
}

@media only screen and (max-width: 470px)
{
    .mind-tag-content_main {
        grid-template-columns: 1fr 1fr;
    }
}