:root{
    /* --background-color: #d7e9ed;
    --elements-color: #72b2c3;
    --wintermint: #98d0c8;
    --neptunes-Realm:#91c4d4;
    --endless-horizon:#b4d6f9; */

    --Deep-Sea-Teal: #0C3846;
    --Arctic-Ocean-Blue: #2A7387;
    --Cerulean-Ripple: #5EB0C8;
    --Icy-Glaze: #9FD3E3;
    --Frost-White: #E4F4F8 ;
}

body{
    background-color: var(--Cerulean-Ripple);
    height: 100fr;
}

main{
    display: flex;
    justify-content: center;
    background-color: var(--Deep-Sea-Teal);
    margin-left: 25%;
    margin-right: 25%;
    border-radius: 15px;
    padding: 20px;
    color: var(--Frost-White);
    height: 100fr;
    margin-bottom: 2rem;
}

content{
    max-width: 90%;
}

.title{
    margin-bottom: 10px;
}

.date{
    color: var(--Icy-Glaze)
}

a {
    color: var(--Cerulean-Ripple);
}
h2{
    margin: 0;
}

.card{
    display: grid;
    grid-template-columns: 1fr 10fr;
    margin-bottom: 50px;
    border-style: inset;
    padding: 1.5rem;
    border-radius: 15px;
    background-color: var(--Arctic-Ocean-Blue);
}

.text-body{
    margin-bottom: 10px;
}

.tags{
    display: flex;
}

footer{

    display: flex;
    justify-content: center;
}

.home{
    background-color: var(--Frost-White);
    color: var(--Deep-Sea-Teal);
    text-decoration: none;
    padding: 0.5rem;
    border-radius: 10px;
}

.tag{
    border-radius: 15px;
    border-color: var(--Icy-Glaze);
    border-width: 1px;
    padding: 2px 5px;
    margin-right: 5px;
    border-style: solid;
}

.prose{
    width: 100%;
}

.screenshot-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* width: 100%; */
}

.blog-img{
    width: 100%;
}