:root {
    --darkGreen: #09803e;
    --lightGreen: #8dc63f;
    --light: #F1F2EB;
    --pink: #db5299;
}
  
html {
    font-size: 14px;
}

@media (min-width: 768px) {  
    html {
        font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: var(--light);
    color: black;
    margin: 0 0 60px 0;
}

header {
    /*background-color: var(--pink);
    color: var(--light);*/
    border-bottom: 2px solid var(--darkGreen);
    border-radius: 0 0 10px 10px;
    box-sizing: border-box;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

main {
    margin: 0 20px;
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}

.flexContainer {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.navItem {
    --bThick: 2px;
    --gap: 2px;
    padding: calc(var(--gap) + var(--bThick));
    --_g: #0000 25%,var(--pink) 0;
    background:
          conic-gradient(from 180deg at top var(--bThick) right var(--bThick),var(--_g))
          var(--_i,200%) 0  /200% var(--_i,var(--bThick))  no-repeat,
          conic-gradient(at bottom var(--bThick) left  var(--bThick),var(--_g))
          0 var(--_i,200%)/var(--_i,var(--bThick)) 200%  no-repeat;
    transition: .3s, background-position .3s .3s;
    cursor: pointer;
    font-size: 1.8em;
}
.navItem:hover {
    --_i: 100%;
    transition: .3s, background-size .3s .3s;
}

.noStyle {
    color: var(--darkGreen);
    text-decoration: none;
}

.companyInfo {
    margin: 15px 0 25px 0;
}

.title {
    font-size: 4em;
}

.desc {
    font-size: 1.3em;
    font-style: oblique;
}

.imgSize {
    max-width: 100%;
    border-radius: 15px;
}

.button {
    background-color: var(--lightGreen);
    border: 4px var(--pink);
    border-style: outset;
    border-radius: 20px;
    width: 200px;
    height: 40px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    font-size: 1em;
    font-weight: bold;
}
.button:hover {
    box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-style: inset;
    /*animation: turnBorder 0.3s ;*/
}

.button.small {
    width: 50px;
}

/*@keyframes turnBorder {
    0% {
        border-style: outset;
    }
    100% {
        border-style: inset;
    }
}*/

.colContainer {
    display: flex;
    margin-top: 1.5em;
    /*height: 85vh;*/
    text-align: center;
    justify-content: center;
    align-items: center;
}
.col {
    width: 48%;
    margin: 0 5px;
}
.textCol {
    animation: text-appear ease-in both;
    animation-timeline: view();
    animation-range: 0vh 40vh;
}
.imgCol {
    animation: image-appear ease-in both;
    animation-timeline: view();
    animation-range: 0 40vh;
    /*color: var(--darkGreen);*/
}
.colLeft {
    
}
.colRight {
    
}

@keyframes text-appear {
    from{
        opacity: 0;
        translate: 0 8rem;
    }
}

@keyframes image-appear {
    from {
        filter: saturate(0) contrast(4) brightness(0.1) blur(3px);
        opacity: 0;
        scale: 0.95;
        translate: 0 4rem;
    }
}

.cardContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 15px;
}
.cardContainer a {
    text-decoration: none;
    color: black;
    width: 30%;
}
.card {
    background-color: var(--lightGreen);
    border: 4px outset var(--pink);
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.card:hover {
    border-style: inset;
    box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.thumbnail {
    width: 100%;
    border-radius: 5px;
}

#playWebGames a {
    text-decoration: none;
    color: black;
}