@font-face{
    font-family:"PlayWrite-400";
    src: url('../fonts/PlaywriteAUQLD-Regular.ttf');
}
@font-face{
    font-family:"Bitcount";
    src:url('../fonts/BitcountPropSingle-Regular.ttf');
}
@font-face {
    font-family: "Exo2";
    src: url('../fonts/Exo2-Medium.ttf');
}

html{
     /* background: rgb(115, 208, 146); */
     background-color: #00bb77;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='121' height='121' viewBox='0 0 120 120'%3E%3Cpolygon fill='%23000' fill-opacity='0.14' points='120 0 120 60 90 30 60 0 0 0 0 0 60 60 0 120 60 120 90 90 120 60 120 0'/%3E%3C/svg%3E");
}

/* --------------------Nav Bar----------------------- */
nav{
    z-index: 2;
    position:sticky;
    top: 0;
    overflow: hidden;
    display: flex;
    border: solid black 2px;
    border-radius: 10px;
    font-family:"Exo2";
    text-align: center;
    background-color: white;
    & a{
        font-size: 30px;
        flex: 1;
        display: block;
        padding-right: 5%;
        color: black;
        padding: 5px 5px 10px 10px;
        text-decoration: none;
    }
    & a:hover{
        transition: ease 0.7s;
        flex: 3;

        &:nth-child(1){background-color: black;color: white;}
        &:nth-child(2){background-color: rgb(38, 122, 190);color: white;}
        &:nth-child(3){background-color: rgb(104, 31, 230);color: white;}
        &:nth-child(4){background-color: rgb(20, 93, 53);color: white;}
    }
    & a:not(:hover){
        transition: ease-in-out 0.5s ;
    }
}

/* --------------------Body Elements----------------------- */

h1{
    padding-top: 15%;
    font-family: "Bitcount";
    font-size: 100px;
    text-align: center;
}
.blog_box{
    display: grid;
    grid-template-columns:1fr 1fr;
    padding-left: 5%;
    /* background-color: azure; */
    margin-top: 5%;
    &:hover .Prev{
        filter: brightness(0.7);
    }
}
.blog_box .Prev{
    width: 90%;
    margin-bottom:10%;
    &:hover{
        transform: scale3d(1.1,1.1,1.1);
        transition: linear 0.2s;
        filter: brightness(1.2);
        box-shadow: 1px 10px 10px 4px;
    }
    &:not(:hover){
        transition: linear 0.2s;
    }
}



@media screen and (max-width: 600px){

    nav a {
        font-size: x-large;
        &:nth-child(4){
        display: none;
        }
    }
    .blog_box{
        grid-template-columns: 1fr;
        padding-top: 3%;
        content: attr(title="Tools");

        .Prev{
            width: 95%;
        }
    }
}