html {
    scroll-behavior: smooth;
}

body {
    background: #6699ff;
    background-repeat: no-repeat;
}

.header {
    background-color: #003399;
    text-align: center;
    color: #fff;
}

.header .logo {
    -webkit-filter: invert(1);
    filter: invert(1);
    max-height: 100px;
}

.apps .title,
.games .title {
    border-left: 8px solid #003399;
    padding-left: 0.8rem;
    font-size: 2.5rem;
    font-weight: 500;
    color: #ffffff;
}

.apps .card-title,
.games .card-title {
    text-transform: uppercase;
}

.apps .card-img-top,
.games .card-img-top {
    height: 200px;
    -o-object-fit: cover;
    object-fit: cover;
}

.apps .card-text,
.games .card-text {
    min-height: 100px;
}

.apps.games,
.games.games {
    background: #80aaff;
}

.footer {
    background-color: #003399;
    text-align: center;
    color: #fff;
}

.green {
    color: green;
}

.red {
    color: red;
}
/*# sourceMappingURL=style.css.map */


/* The alert message box */

.alertcenteredred {
    padding: 20px;
    background-color: #f44336;
    /* Red */
    color: white;
    margin-bottom: 15px;
    text-align: center;
}

.alertcenteredblue {
    padding: 20px;
    background-color: #5F9EFF;
    /* Blue */
    color: white;
    margin-bottom: 15px;
    text-align: center;
}

.alertred {
    padding: 20px;
    background-color: #f44336;
    /* Red */
    color: white;
    margin-bottom: 15px;
}

.alertblue {
    padding: 20px;
    background-color: #5F9EFF;
    /* Blue */
    color: white;
    margin-bottom: 15px;
}


/* The close button */

.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}


/* When moving the mouse over the close button */

.closebtn:hover {
    color: black;
}

.ribbon-2 {
    --f: 10px; /* control the folded part*/
    --r: 15px; /* control the ribbon shape */
    --t: 10px; /* the top offset */
    
    position: absolute;
    inset: var(--t) calc(-1*var(--f)) auto auto;
    padding: 0 10px var(--f) calc(10px + var(--r));
    clip-path: 
      polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
        calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
        var(--r) calc(50% - var(--f)/2));
    background: #003399;
    box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
    color: #ffffff;
  }