/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 12. 5. 2020, 9:14:14
    Author     : tomas
*/

html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    font-family: Roboto;
    background-color: #564444;
}

#grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

#logo {
    float: left;
    font-size: 0.8vw;
    background-color: #564444;
    grid-column: 1/1;
    margin: 0;
    padding: 0;
    color: #e4eff0;

}

#head {
    background: #8fbdaa;
    color: #e4eff0;
    grid-column: 2/4;
    box-shadow: 5px 10px 18px #002439;
    z-index: 4;
    padding: 5px;
    text-align: center;
    font-size: 0.8vw;
    position: relative;
    top: 10px;
    animation: headanim 2s;
}

#menu {
    background-color: #7c8b83;
    grid-column: 1/4;
    box-shadow: 5px 10px 18px #002439;
    border: 1px solid;
    z-index: 3;
}


#side {
    background-color: #564444;
    grid-column: 1/2;
    grid-row: 3/5;
    border-right: 1px solid;
}

#content {
    
    grid-column: 2/4;
    grid-row: 3/5;
    /* The image used */
    background-image: url('Images/parallax.jpg');
    /* Full height */
    height: 100%;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.contentText {
    border-radius: 25px;
    background: #a1e0d1;
    padding: 20px;
    margin: 20px;
    width: 60%;
    position: relative;
    animation: divanim 2s;

}

.form-signin{
    text-align:center;

}

#liga {
    background: #7c8b83;
    border-radius: 0.25em;
    border-collapse: collapse;
    margin: 1em;
    box-shadow: 5px 10px 18px #002439;
    width: 90%;
    margin-right: 20px;
}

    #liga th {
        border-bottom: 1px solid #364043;
        color: #a1e0d1;
        font-size: 0.85em;
        font-weight: 600;
        padding: 0.5em 1em;
        text-align: left;
    }

#liga td {
    color: #fff;
    font-weight: 400;
    padding: 0.65em 1em;
}

#liga .disabled td {
        color: #4F5F64;
    }

#liga tbody tr {
    transition: background 0.25s ease;
}

#liga tbody tr:hover {
    background: #014055;
}
.logout {
    text-align:center;
}
.mojeukoly {
    background: #7c8b83;
    border-radius: 0.25em;
    border-collapse: collapse;
    margin: 1em;
    box-shadow: 5px 10px 18px #002439;
    width: 90%;
    margin-right: 20px;
}

.mojeukoly th {
    border-bottom: 1px solid #364043;
    color: #a1e0d1;
    font-size: 0.85em;
    font-weight: 600;
    padding: 0.5em 1em;
    text-align: left;
}

.mojeukoly td {
        color: #fff;
        font-weight: 400;
        padding: 0.65em 1em;
    }

.mojeukoly .disabled td {
        color: #4F5F64;
    }

.mojeukoly tbody tr {
        transition: background 0.25s ease;
    }

.mojeukoly tbody tr:hover {
        background: #014055;
    }

#footer {
    background-color: #632c2c;
    grid-column: 1/4;
}

#Dimages1{
    display:inline-block;


}

#Cimage1 {
    position: relative;
    top: 0px;
    float: right;
    animation: imianim 3s;
}


#Cimage2 {
    position: relative;
    top: 20px;
    left: 60px;
    float: right;
    animation: imianim 2s;
}
.imgr1 {
    width: 66%;
    height: auto;
    margin: 20px;
}

#logoIm {
    width: 30%;
    height: 30%;
    float: left;
    -webkit-filter: invert(1);
    filter: invert(1);
    
}

.login {
    font-size: 1vw;
    border-radius: 25px;
    background: #a1e0d1;
    padding: 10px;
    margin: 10px;
    overflow-x: auto;
}

#moje {
    position: relative;
    left: 20px;
    padding: 10px;
    margin: 10px;
}



ul li.menulist {
    list-style: none;
    display: inline;
}

ul li.menulist:hover {
        color: #e4eff0;
    }

a.menulist {
    border: 1px solid;
    border-color: #e4eff0;
    color: #e4eff0;
    font-weight: bold;
    text-decoration: none;
    background-color: #5c3e2c;
    border-radius: 5px;
    padding: 5px;
    box-shadow: 5px 10px 18px #002439;
    position: relative;
    animation: buttonanim 2s;
}
    a.menulist:hover {
        border: 1px solid;
        color: #e4eff0;
        font-weight: bold;
        text-decoration: none;
        background-color: #eda741;
        padding: 5px;
        box-shadow: 2px 5px 13px #002439;
        position: relative;
        top: 5px;
    }

.parallax {
    /* The image used */
    background-image: url('parallax.jpg');
    /* Full height */
    height: 100%;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

    @media screen and (min-width: 1080px) {
        #menu {
            font-size: 30px;
        }
        #content {
            font-size: 20px;
        }

        #side {
            font-size: 20px;
        }
    }

    @media screen and (min-width: 768px) and ( max-width: 1079px ) {
        #menu {
            font-size: 20px;
        }
        #content {
            font-size: 15px;
        }

        #side {
            font-size: 15px;
        }
    }


    @media screen and (max-width: 767px) {
        #menu {
            font-size: 15px;
        }
        #content {
            font-size: 10px;
        }
        #head {
            font-size: 10px;
            top: 3px;
        }
        #logo {
            font-size: 10px;
        }

        #side {
            font-size: 10px;
        }
    }

    @keyframes redtoyellow {
        from {
            background-color: red;
        }

        to {
            background-color: yellow;
        }
    }
@keyframes divanim {
    0% {
        left: -1000px;
        top: 0px;
    }


    100% {
     
        left: 0px;
        top: 0px;
    }
}

@keyframes imianim {
    0% {
        left: 0px;
        top: 1000px;
    }


    100% {
        left: 0px;
        top: 0px;
    }
}
@keyframes buttonanim {
    0% {
        left: 1000px;
    }
    100% {
        left: 0px;
    }
}
@keyframes headanim {
    0% {
        top: 0px;
    }

    100% {
        top: 10px;
    }
}