.container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
    "box1 box2"
    "razdjelnik1 razdjelnik2"
    "box3 box4";
}

.box1{
    grid-area: box1;
    margin-left: 40px;
    margin-top: 80px;
}
.box1 h2{
    font-size: 3rem;
  font-family: serif;
  text-align: left;
  color: #ECFFDC;
  
  /* Text Shadow Property */
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: darkgreen
}
.box1 p{
    color: white;
}

.box2{
    grid-area: box2;
    margin-top: 40px;
}
.razdjelnik1{
    height: 30px;
}
.razdjelnik2{
    height: 30px;
}

.box3{
    
    margin-left: 260px;
    margin-top: 80px;
   
}

.box3 h2{
    font-size: 3rem;
  font-family: serif;
  text-align: left;
  color: #ECFFDC;
  
  /* Text Shadow Property */
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: darkgreen
}

.box3 p{
    color: white;
}

.box4{
    
    margin-left: 40px;
    margin-top: 80px;  
}

.box4 h2{
    font-size: 3rem;
    font-family: serif;
    text-align: left;
    color: #ECFFDC;
    
    /* Text Shadow Property */
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: darkgreen 
}

.box4 p{
    color: white;
}



.grid-child-element { 
    margin: 10px; 
    
}
table th{
    text-align: left;
    background-color: black;
    color: white;
    padding: 4px 30px 4px 8px;
}

table td{
    color: white;
    border: 1px solid black;
    padding: 4px 8px;
}
table tr:nth-child(odd) td{
    background-color:black  (167, 164, 164);
}
.grid-child-element .tablica{
    overflow: auto;
}
.grid-child-element .raspored{
    overflow: auto;
}

@media screen and (max-width: 700px){
    .containerbox{
        margin-left: 10px;
        grid-template-columns: 1fr;
    }

    .container{
        grid-template-columns: 1fr;
        grid-template-areas: 
         
         "box1"
         "box2";
    }
    
    .box1{
        margin-left: 20px;
        width: 400px;
        height: auto;
    }


    .box2 img{
        margin-left: 20px;
        width: 400px;
        height: auto;  
    }

    .box3{
        margin-left: 20px;
        width: 400px;
        height: auto;    
    }

    .box4{
        margin-left: 20px;
        width: 400px;
        height: auto;    
    }
}