@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Patrick+Hand&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    margin: 0 auto;
    font-family: "Myriad Pro", sans-serif;
    flex-direction: column;
}

/* SEKCije */
section {
    width: 100%;
}


/*POČETNA*/

.logo{
    width: 40px;
    margin-left: 47%;
    margin-top: 20px;
}

.pocetna {
    background-image: url('slike/d867b5118d4f37cf0762e7ad3693f034.jpg');
    background-size: cover;
    min-height: 90vh;
    position: sticky;
    top: 0;
    background-attachment: fixed;
}

h1 {
    font-family: "Patrick Hand", serif;
    color: #D2BADA;
    text-align: center;
    font-size: 80px;
}

article {
    width: 400px;
    float: right;
    margin-top: 250px;
    margin-right: 220px;
}


/*EVA*/
.eva {
    min-height: 30vh;
    background-color: #E6E7E8;
    font-size: 20px;
    position: relative;
    background-attachment: fixed;
}

.omeni {
    margin: auto;
    width: 70%;
    text-align: center;
    color: 58595B;
    padding-top: 70px;
}

.evalink {
    text-decoration: none;
    color: #878b8d;
}

.evalink:hover {
    color: #27AAE1;
}


/*RADOVI*/
.radovi {
    background-color: #383838;
    min-height: 265vh;
}

.homestrelica{
    width: 60px;
    float: right;
    margin-right: 80px;
    margin-top: -100;
}

/*mreza*/

.mreza {
    display: grid;
    grid-template-columns: repeat(3, 0.2fr);
    grid-template-rows: 0.6fr 0.2fr 0.2fr 0.2fr;
    gap: 20px;
    width: 65%;
    margin-left: 19%;
    padding-top: 100px;
}

.radovih1 {
    color: #D2BADA;
    font-family: "Patrick Hand", serif;
    text-align: center;
    font-size: 45px;

    grid-row: 1/1;
    grid-column: 2/2;

}

.WebProjekti {
    width: 300px;
    height: 400px;
    background-color: rgb(255, 255, 255);
    border-radius: 25px;

    grid-row: 2/3;
    grid-column: 1/2;
}

.dizajn {
    width: 300px;
    height: 450px;
    background-color: rgb(251, 251, 252);
    border-radius: 25px;

    grid-row: 2/3;
    grid-column: 2/3;

    margin-top: 80px;
}

.animacije {
    width: 300px;
    height: 400px;
    background-color: rgb(255, 255, 255);
    border-radius: 25px;
    grid-row: 2/3;
    grid-column: 3/4;

}



.računalna {
    width: 300px;
    height: 400px;
    background-color: rgb(255, 255, 255);
    border-radius: 25px;
    float: left;

    grid-row: 3/4;
    grid-column: 1/2;

    margin-top: -130px;
}

.programiranje {
    width: 300px;
    height: 450px;
    background-color: rgb(255, 255, 255);
    border-radius: 25px;
    grid-row: 3/4;
    grid-column: 2/3;
}

.internetske {
    width: 300px;
    height: 400px;
    background-color: rgb(255, 255, 255);
    border-radius: 25px;
    float: right;
    grid-row: 3/4;
    grid-column: 3/4;

    margin-top: -130px;
}

.websadrzaji {
    width: 300px;
    height: 400px;
    background-color: rgb(255, 255, 255);
    border-radius: 25px;
    float: right;
    grid-row: 4/5;
    grid-column: 1/2;

    margin-top: -180px;
}

.bazepodataka {
    width: 300px;
    height: 400px;
    background-color: rgb(255, 255, 255);
    border-radius: 25px;
    float: right;
    grid-row: 4/5;
    grid-column: 3/4;

    margin-top: -180px;
}

.slike {
    width: 100%;
    height: 50%;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

.WebProjekti:hover,
.animacije:hover,
.računalna:hover,
.internetske:hover,
.websadrzaji:hover,
.bazepodataka:hover {
    box-shadow: 2px 2px 10px #27AAE1;
    width: 310px;
    height: 410px;
    transition: 0.3s ease-in-out;
}

.dizajn:hover,
.programiranje:hover {
    box-shadow: 2px 2px 10px #27AAE1;
    width: 310px;
    height: 460px;
    transition: 0.3s ease-in-out;
}

.prazredi {
    display: flex;
    justify-content: center;
    font-family: "Fira Code", serif;
    font-size: 20px;
    margin-top: 40px;
    text-decoration: none;
    color: black;
    margin-bottom: -35px;
}

/*FOOTER*/

footer {
    color: #878b8d;
    text-align: center;
    font-size: small;
    line-height: 23px;
    align-items: center;
    margin-left: 140px;

    margin-top: 70px;
}


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

    /*RADOVI*/
    .mreza {
        display: grid;
        grid-template-columns: repeat(2, 0.2fr);
        grid-template-rows: 0.6fr 0.2fr 0.2fr 0.2fr 0.2fr;
        gap: 20px;
        width: 65%;
        margin: auto;
        padding-top: 50px;
    }

    .radovih1 {
        grid-row: 1/1;
        grid-column: 1/2;
        margin-left: 80%;
    }

    .WebProjekti {
        grid-row: 2/3;
        grid-column: 1/2;
    }

    .dizajn {
        grid-row: 2/3;
        grid-column: 2/3;

        margin-top: 90px;
    }

    .animacije {
        grid-row: 3/4;
        grid-column: 1/2;

        margin-top: -140px;

    }



    .računalna {
        grid-row: 3/4;
        grid-column: 2/3;

        margin-top: 0px;
    }

    .programiranje {
        grid-row: 4/5;
        grid-column: 1/2;

        margin-top: -140px;
    }

    .internetske {
        grid-row: 4/5;
        grid-column: 2/3;

        margin-top: 0px;
    }

    .websadrzaji {
        grid-row: 5/6;
        grid-column: 1/2;

        margin-top: -90px;
    }

    .bazepodataka {
        grid-row: 5/6;
        grid-column: 2/3;

        margin-top: 0px;
    }


    .homestrelica{
        width: 55px;
        margin-top: 40px;
    }

    /*FOOTER*/
    footer {
        margin-top: 30px;
        padding-bottom: 25px;
    }
}

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

    /*EVA*/
    .eva {
        min-height: 40vh;
    }

    /*RADOVI*/
    .mreza {
        display: grid;
        grid-template-columns: 0.2fr;
        grid-template-rows: repeat(9, 0.2fr);
        gap: 20px;
        width: 65%;
        margin-left: 20%;
        padding-top: 50px;
    }

    .radovih1 {
        grid-row: 1/2;
        grid-column: 1/1;
        margin-left: 0%;
    }

    .WebProjekti {
        grid-row: 2/3;
        grid-column: 1/1;
    }

    .dizajn {
        grid-row: 3/4;
        grid-column: 1/1;

        margin-top: 0px;
    }

    .animacije {
        grid-row: 4/5;
        grid-column: 1/1;

        margin-top: 0px;

    }



    .računalna {
        grid-row: 5/6;
        grid-column: 1/1;

        margin-top: 0px;
    }

    .programiranje {
        grid-row: 6/7;
        grid-column: 1/1;

        margin-top: 0px;
    }

    .internetske {
        grid-row: 7/8;
        grid-column: 1/1;

        margin-top: 0px;
    }

    .websadrzaji {
        grid-row: 8/9;
        grid-column: 1/1;

        margin-top: 0px;
    }

    .bazepodataka {
        grid-row: 9/10;
        grid-column: 1/1;

        margin-top: 0px;
    }

    .homestrelica{
        margin-right: 10px;
    }

  
}