:root {
    /* --blue1: #87CEEB; */
    --blue1: #31708E;
    /* --blue2: rgb(207, 247, 247) ; */
    --blue2: #8FC1E3;
    /* --green1: #90EE90; */
    --green1: #61892F;
    /* --green2: rgb(191, 249, 220) ; */
    --green2: #86C232;
    --rest: #E64833;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Century;
    /*font-family: Georgia,serif;*/
    color: var(--rich-black);
    /* padding-top: 120px; */
    background-color: var(--white1);
    padding: 1em;

    /* display: flex;
    justify-content: center;
    align-items: center; */
    
}

#raspored {
    /* border-collapse: collapse;
    /* border-collapse: separate;
    text-indent: initial;
    border-spacing: 2px;
    width: 100%; */

    border-collapse: collapse;
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-spacing: 2px;
    border: 2px solid black;
}

caption{
    margin: 0.5em;
    /* font-family: 'Victor Mono', monospace; */
    font-family: Comic Sans MS;
    font-size: 15px;
    font-weight: 600;
}

thead{
    border: 1px solid white;
}

th {
    text-align: center;
    height: 50px;
    width: 50px;
    border: 1px solid black;
    font-size: 10px;
}

td{
    font-size: 13px;
    text-align: center;
    border: 1px solid black;
    height: 30px;
    width: 30px;
}

/* #raspored tr:hover {
    background-color: #ddd;
} */
  
.time{
    background-color: black;
    color: white;
}

.day1, .day2, .day3, .day4, .day5{
    background-color: black;
    color: white;
    font-size: 10px;
}

.hour{
    background-color: gainsboro;
    color: black;
    font-weight: 600;
}

.half-colored-left {
    background: linear-gradient(to right, #87CEEB 50%, white 50%);
}

.half-colored-right {
    background: linear-gradient(to left, #FFB6C1 50%, white 50%);
}

.half-colored-top {
    background: linear-gradient(to bottom, #90EE90 50%, white 50%);
}

.half-colored-bottom {
    /* background: linear-gradient(to top, #FFA500 50%, white 50%); */
    background: linear-gradient(to top, #87CEEB 66%, white 66%);
}

.school1{
    background: linear-gradient(to top, var(--blue1) 50%, white 50%);
}

.school2{
    background: linear-gradient(var(--blue1) 25%, var(--blue2)  25% 92%, var(--rest) 92% 100%);   
    
}

.school3{
    background: linear-gradient(var(--rest) 17%, var(--blue1)  17% 92%, var(--blue2) 92% 100%);   
    
}

.school4{
    background: linear-gradient(var(--blue2) 67%, var(--blue1) 67% 100%);   
    
}

.school5{
    background: linear-gradient(var(--blue1) 42%, var(--blue2)  42% 100%);   
    
}

.school6{
    background: linear-gradient(var(--blue2) 17%, var(--blue1)  17% 83%, white 83% 100%);  
}

.school7{
    background: linear-gradient(var(--green1) 75%, var(--green2) 75% 100%);
}

.school8{
    background: linear-gradient(var(--green2) 42%, var(--rest) 42% 67%, var(--green1) 67% 100%);
}

.school9{
    background: linear-gradient(var(--green1) 42%, var(--green2) 42% 100%);
}

.school10{
    background: linear-gradient(var(--green2) 17%, var(--green1) 17% 92%, var(--green2) 92% 100%);
}

.school11{
    background: linear-gradient(var(--green2) 58%, white 58% 100%);
}

img{
    width: 30px;
    border-radius: 50%;
    border: 2px solid black;
    box-shadow: 0 5px 10px 0 black;
}

.jana1{
    /* position: absolute; top: 475px; left: 75px; */
    position: relative; top: 15px; left: -20px;
}

.trajan1{
    /* position: absolute; top: 475px; left: 110px; */
    position: relative; top: 15px; left: -45px;
}

.jana2{
    /* position: absolute; top: 475px; left: 203px; */
    position: relative; top: 15px; left: -20px;
}

.trajan2{
    /* position: absolute; top: 475px; left: 238px; */
    position: relative; top: 15px; left: -45px;
}

.jana3{
    /* position: absolute; top:520px; left: 140px; */
    position: relative; top: 0px; left: -20px;
}

.evgenija1{
    /* position: absolute; top: 520px; left: 175px; */
    position: relative; top: 0px; left: -45px;
}

.jana4{
    /* position: absolute; top: 520px; left: 265px; */
    position: relative; top: 0px; left: -20px;
}

.evgenija2{
    /* position: absolute; top: 520px; left: 300px; */
    position: relative; top: 0px; left: -45px;
}


/************ Tablet Size Styles *************/
@media only screen and (min-width: 760px) {
    caption{
        font-size: 25px;

    }
    
    .day1, .day2, .day4, .day5{
        font-size: 11px;
    }

    .time{
        font-size: 11px;
    }

    th {
        height: 50px;
        width: 50px;
        font-size: 10px;
    }
    
    td{
        font-size: 13px;
        height: 40px;
        width: 40px;
    }
    
    img{
        width: 35px;
        border: 2px solid black;
    }
    
    .jana1{

        position: relative; top: 15px; left: -25px;
    }
    
    .trajan1{

        position: relative; top: 15px; left: -95px;
    }
    
    .jana2{

        position: relative; top: 15px; left: -25px;
    }
    
    .trajan2{

        position: relative; top: 15px; left: -95px;
    }
    
    .jana3{

        position: relative; top: 0px; left: -25px;
    }
    
    .evgenija1{

        position: relative; top: 0px; left: -95px;
    }
    
    .jana4{

        position: relative; top: 0px; left: -25px;
    }
    
    .evgenija2{

        position: relative; top: 0px; left: -95px;
    }

}

/************ Desktop Size Styles *************/

@media only screen and (min-width: 1200px) {
    caption{
        font-size: 25px;

    }

    #raspored {
        width: 80%;
    
    }
    
    th {
        height: 50px;
        width: 50px;
        font-size: 10px;
    }
    
    td{
        font-size: 13px;
        height: 40px;
        width: 40px;
    }
    
    img{
        width: 35px;
        border: 2px solid black;
    }

    .day1, .day2, .day4, .day5{
        font-size: 12px;
    }

    .time{
        font-size: 11px;
    }

    .day3{
        font-size: 10px;
    }
    
    .jana1{

        position: relative; top: 15px; left: -40px;
    }
    
    .trajan1{

        position: relative; top: 15px; left: -150px;
    }
    
    .jana2{

        position: relative; top: 15px; left: -40px;
    }
    
    .trajan2{

        position: relative; top: 15px; left: -150px;
    }
    
    .jana3{

        position: relative; top: 0px; left: -40px;
    }
    
    .evgenija1{

        position: relative; top: 0px; left: -150px;
    }
    
    .jana4{

        position: relative; top: 0px; left: -40px;
    }
    
    .evgenija2{

        position: relative; top: 0px; left: -150px;
    }

}

/************ Maximum Size Styles *************/

@media only screen and (min-width: 1500px) {
    caption{
        font-size: 25px;

    }

    #raspored {
        width: 60%;
    
    }
    
    .day1, .day2, .day4, .day5{
        font-size: 12px;
    }

    .time{
        font-size: 12px;
    }

    .day3{
        font-size: 11px;
    }

    /* th {
        height: 50px;
        width: 50px;
        font-size: 10px;
    }
    
    td{
        font-size: 14px;
        height: 40px;
        width: 40px;
    } */
    
    img{
        width: 35px;
        border: 2px solid black;
    }
    
    .jana1{

        position: relative; top: 15px; left: -40px;
    }
    
    .trajan1{

        position: relative; top: 15px; left: -150px;
    }
    
    .jana2{

        position: relative; top: 15px; left: -40px;
    }
    
    .trajan2{

        position: relative; top: 15px; left: -150px;
    }
    
    .jana3{

        position: relative; top: 0px; left: -40px;
    }
    
    .evgenija1{

        position: relative; top: 0px; left: -150px;
    }
    
    .jana4{

        position: relative; top: 0px; left: -40px;
    }
    
    .evgenija2{

        position: relative; top: 0px; left: -150px;
    }
}