::-moz-selection { /* Code for Firefox */
    color: white;
    background: #333;
}

::selection {
    color: white;
    background: #333;
}

body {
    margin: 0;
    font-size: 28px;
    font-family: 'DM Sans', sans-serif;
}

.row::after {
    content: "";
    clear: both;
}

/* Desktop */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.slideshow_width {
    width: 70%;
}
.game_subheader {
    font-size: 18px;
    width: 60%;
}

/* Custom Border */
.custom_border {
    border: 30px solid;
    padding: 15px;
    border-image: url("../Images/Border.png") 50 round;
}

.display_inline_block {
    display: inline-block;
    margin: 20px 0;
}

.header {
    font-size: 50px;
    font-weight: bolder;
    margin-bottom: 20px;
}

.sub_header {
    font-size: 25px;
}

.game_body {
    font-size: 18px;
}

.game_image {
    height: 210px;
    float: right;
    display: inline-block;
    border-radius: 20px;
}

@media only screen and (max-width: 1000px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }

    .slideshow_width {
        width: 100%;
    }

    .game_subheader {
        font-size: 18px;
        width: 100%;
    }

    .custom_border {
        border: 30px solid;
        padding: 15px;
        border-image: url("../Images/Border_Rotated.png") 50 round;
    }

    .display_inline_block {
        display: block;
        margin: 10px 0;
    }

    .header {
        font-size: 40px;
        font-weight: bolder;
        margin-bottom: 20px;
    }

    .sub_header {
        font-size: 18px;
        padding-top: 1px;
    }

    .game_body {
        font-size: 16px;
    }

    .game_image {
        height: 100%;
        width: 100%;
        float: right;
        display: inline-block;
        border-radius: 20px;
    }
}

/* Style the navbar */
.navbar {
    overflow: hidden;
    background-color: white;
    text-align: center;
    border-bottom-style: solid;
    border-width: 1px;
    border-color: black;
    position: sticky;
    top: 0;
    z-index: 10;
}

.navbar a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 25px 15px;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    transition-duration: 0.2s;
}

.navbar a:hover {
    background-color: #ddd;
    color: black;
}

/* Page content */
.align_center {
    margin: auto;
    width: 70%;
}

.text_bold {
    font-weight: bold;
}

.text_grey {
    color: #999;
}

.section_header_align {
    width: 75%;
    margin: auto;
}

.section_header {
    width: 100%;
    display: inline-block;
    margin: auto;

    padding: 10px 0;
    font-size: 40px;
    font-weight: bold;
    color: black;
    text-align: center;
}

.section_header_image {
    height: 2em;
    display: block;
    margin: auto;
}

.reduce_margin_top {
    margin-top: -20px;
}

.increase_margin_top {
    margin-top: 30px;
}

/* Stuff inside boxes */
.game_header {
    font-size: 40px;
    font-weight: bold;
}

.game_box {
    border-radius: 10px;
    background: black;
    display: inline-block;
    margin: 10px 0;

    padding: 5px 10px;
    font-size: 20px;
    font-weight: bold;
    color: white;
}

.game_link {
    color: #6099DB;
    font-weight: bold;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-color: #6099DB;
    text-decoration-thickness: 3px;
}

a.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

.game_button_read_more {
    border-radius: 10px;
    background: white;
    border: 2px solid black;
    display: inline-block;
    padding: 8px 16px;
    margin: 20px 0;

    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: black;

    cursor: pointer;
    transition-duration: 0.2s;
}

.game_button_read_more:hover {
    background: black;
    color: white;
}

.game_button {
    border-radius: 10px;
    display: inline-block;
    padding: 8px 16px;

    text-align: center;
    font-size: 20px;
    font-weight: bold;

    cursor: pointer;
    transition-duration: 0.2s;
}

.game_button_itch {
    border: 2px solid #fa5c5c;
    background: #fa5c5c;

    color: white;
}
.game_button_itch:hover {
    background: white;
    color: #fa5c5c;
}

.game_button_steam {
    border: 2px solid #1b2838;
    background: #1b2838;

    color: white;
}

.game_button_steam:hover {
    background: white;
    color: #1b2838;
}

.game_button_git {
    border: 2px solid #171515;
    background: #171515;

    color: white;
}

.game_button_git:hover {
    background: white;
    color: #171515;
}

.game_button_youtube {
    border: 2px solid #EA3223;
    background: #EA3223;

    color: white;
}

.game_button_youtube:hover {
    background: white;
    color: #EA3223;
}

.game_button_linkedin {
    border: 2px solid #0077B7;
    background: #0077B7;

    color: white;
}

.game_button_linkedin:hover {
    background: white;
    color: #0077B7;
}

.game_button_normal {
    border: 2px solid black;
    background: black;

    color: white;
}

.game_button_normal:hover {
    background: white;
    color: black;
}

.game_button_image {
    height: 1em;
    vertical-align: text-bottom;
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(119deg) brightness(103%) contrast(102%);
}

.game_button_itch:hover .game_button_image {
    filter: invert(54%) sepia(81%) saturate(2977%) hue-rotate(325deg) brightness(100%) contrast(95%);
}

.game_button_steam:hover .game_button_image {
    filter: invert(11%) sepia(12%) saturate(2515%) hue-rotate(173deg) brightness(96%) contrast(88%);
}

.game_button_git:hover .game_button_image {
    filter: none;
}

.game_button_youtube:hover .game_button_image {
    filter: invert(30%) sepia(61%) saturate(4504%) hue-rotate(348deg) brightness(93%) contrast(98%);
}

.game_button_linkedin:hover .game_button_image {
    filter: invert(34%) sepia(16%) saturate(5892%) hue-rotate(173deg) brightness(98%) contrast(104%);
}

.game_read_more {
    display: none;
}

.show {
    display: block;
}

/* Slideshow */
.slideshow_container {
    position: relative;
    margin: auto;
}

.mySlides {
    display: none;
}

.slide_image {
    width: 100%;
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: auto;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 10px 10px 0;
    user-select: none;
    background-color: rgba(0,0,0,0.5);
}

.next {
    right: 0;
    border-radius: 10px 0 0 10px;
}

.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
}

.dot {
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active, .dot:hover {
    background-color: black;
}

.bullet_list {
    font-size: 25px;
}