body{
    text-align: center;
    margin: 0 auto;
    max-width: 1920px;
}

.row{
    height: auto;
    margin: 4vh auto;
    width: 60vw;
    text-align: left;
}

.basic-card:hover {
    box-shadow: 0 10px 35px 0px rgba(0,0,0,0.25);
    background: #f4f4f4;
}

.imaged-card:hover{
    box-shadow: 0 10px 35px 0px rgba(0,0,0,0.25);
}

.basic-card, .imaged-card {
    cursor: pointer;
    background: white;
    box-shadow: 0 10px 30px 0px rgba(0,0,0,0.15);
    border-radius: 20px;
    padding: 40px;
    transition: all .15s ease-in;
}

.beachalarm{
    background: url('../images/beachalarm-background-light.png');
    background-position: center center;
    background-size: cover;
}

.eriantys{
    background: url('../images/eriantys-background-light.png');
    background-position: center center;
    background-size: cover;
}

.beachalarm .card-title{
    color: #FFD600;
}

.dojo .card-title {
    color: #39FF14;
}

.amazfitmaps .card-title{
    color: #E9C300;
}

.huaweibandmaps .card-title{
    color: #005DE9;
}

.eriantys .card-title{
    color: #ec088d;
}

.hostpingbot .card-title{
    color: #38e741;
}

.smarttennisracket .card-title{
    color: #E2FF0D;
}

.nightowl .card-title{
    color: #c800ff;
}

.card-title{
    font-size: 45px;
    padding: 0;
    margin: 0;
    font-weight: bold;
    font-family: 'Nunito', sans-serif;
}

.card-text{
    font-size: 25px;
    color: black;
    margin: 0;
    margin-top: 20px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 400;
}

a{
    text-decoration: none;
}

.other-projects {
    color: #222;
    font-size: 20px;
    text-align: center;
    margin: 40px 10px;
    font-family: 'Nunito', sans-serif;
}

.other-projects a{
    color: #222;
    text-decoration: underline;
}

.google-play-button, .github-button{
    max-width: 240px;
    margin-top: 30px;
}

.header{
    width: 60vw;
    margin: 0 auto;
}

.header h1{
    width: 200px;
    margin: 35px auto;
    font-family: 'Varela Round', sans-serif;
    line-height: 35px;
    vertical-align: middle;
}

.header svg{
    fill: #222;
    height: 21px;
    width: auto;
    line-height: 35px;
    vertical-align: middle;
}

.header a{
    color: #222;
    float: left;
    line-height: 35px;
    vertical-align: middle;
    font-size: 20px;
    padding: 0 5px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: all .15s;
}

.header a:hover{
    filter: drop-shadow(0 0 0.4rem rgba(0, 0, 0, 0.6));
}

@media (max-width: 1100px) {
    .row{
        width: 80vw;
    }

    .header{
        width: 80vw;
    }
}

@media (max-width: 750px) {
    .row{
        width: 90vw;
        text-align: center;
    }
    .header{
        width: 90vw;
    }
    .header span{
        display: none;
    }

    .header svg{
        height: 29px;
        padding: 3px;
    }
}

@media (max-width: 400px) {
    .basic-card, .imaged-card{
        padding: 25px;
    }
    .card-title{
        font-size: 30px;
    }

    .card-text{
        font-size: 20px;
    }

    .google-play-button, .github-button{
        width: 200px;
    }
}

@media (prefers-color-scheme: dark) {
    body{
        background-color: #242424;
    }
    .basic-card{
        background: #3C3C3C;
        box-shadow: 0 10px 30px 0px rgba(0,0,0,0.45);
    }
    .basic-card:hover {
        box-shadow: 0 10px 35px 0px rgba(0,0,0,0.65);
        background: #4c4c4c;
    }

    .beachalarm{
        background: url('../images/beachalarm-background-dark.png');
        background-position: center center;
        background-size: cover;
    }

    .eriantys{
        background: url('../images/eriantys-background-dark.png');
        background-position: center center;
        background-size: cover;
    }

    .card-text{
        color: white;
    }

    h1{
        color: white;
    }

    .header svg{
        fill: #eee;
    }

    .header a{
        color: #eee;
    }

    .header a:hover{
        filter: drop-shadow(0 0 0.4rem rgba(255, 255, 255, 0.6));
    }

    .other-projects, .other-projects a{
        color: white;
    }
}