@import url('https://fonts.googleapis.com/css2?family=Comic+Relief:wght@400;700&family=Grandstander:ital,wght@0,100..900;1,100..900&family=Original+Surfer&display=swap');

* { background-color: transparent;
    margin: 0;
    font-family: 'Grandstander', 'Arial Narrow', Arial, sans-serif;
    box-sizing: border-box;
}
/*----------POZADÍ HLAVNÍ STRÁNKY↓----------*/
.header-hlavni {
    background-color: #0f2043;
    padding-top: 10%;
    padding-bottom: 10%;
    position: sticky;
    top: 0;
    z-index: -1;
}

.logo-hlavni {
    background-color: #0f2043;
    margin: auto;
    margin-bottom: 2%;
    padding-bottom: 2%;
    text-align: center;
}

.logo-hlavni img {
    width: 500px;
    height: auto;
    background-color: #0f2043;
}

.jmeno {
    background-color: #0f2043;
    margin: auto;
    text-align: center;
}

.jmeno img {
    width: 500px;
    height: auto;
    background-color: #0f2043;
    margin: auto;
}
/*----------POZADÍ HLAVNÍ STRÁNKY↑----------*/

/*----------MENU NA HLAVNÍ STRÁNCE↓----------*/
.menu-hlavni {
    background-color: #0f2043;
}

.seznam-svetly {
    width: 80%;
    background-color: #0f2043;
    margin: auto;
    padding: 3%;
    display: flex;
    list-style: none;
}

.seznam-svetly ul {
    margin: auto;
}

.seznam-svetly li {
    background-color: #0f2043;
    margin: auto;
}

.seznam-svetly li a {
    background-color: #0f2043;
    color: #ebebeb;
    padding: 10px;
    text-decoration: none;
    font-size: 2.2rem;
}

.tab-svetly li a:hover {
    color: #4b64aa;
}
/*----------MENU NA HLAVNÍ STRÁNCE↑----------*/

/*----------MŮJ PROFIL↓----------*/
.profil {
    background-color: #4b64aa;
}

.napis-tmavy {
    text-align: center;
}

.napis-tmavy h2 {
    background-color: #4b64aa;
    color: #ebebeb;
    margin-top: 5%;
    margin-bottom: 3%;
    padding: 1%;
    font-size: 3.5rem;
    font-weight: 700;
    display: inline-block;
    border-left: #0f2043 solid 10px;
}
/*----------------------------------------*/
.odkazy {
    width: 60%;
    margin: auto;
    padding-bottom: 3%;
}

.odkaz {
    background-color: #0f2043;
    margin-bottom: 3%;
    padding: 5%;
    text-align: center;
    justify-content: space-between;
    border-radius: 20px;
}

.odkaz img {
    width: 50px;
}

.odkaz img:hover {
    content: url("materialy/next_light.png");
}
/*----------------------------------------*/
.odkazy i {
    color: #ebebeb;
    margin-bottom: 3%;
    font-size: 2.5rem;
}

.odkazy i:hover {
    color: #4b64aa;
    font-size: 2.5rem;
}

.odkazy h2 {
    color: #ebebeb;
    font-size: 2.5rem;
}

.odkazy h4 {
    color: #ebebeb;
    margin-bottom: 3%;
    font-size: 2rem;
}
/*----------------------------------------*/
@keyframes hopRight {
    0%   { transform: translateX(0);    }
    20%  { transform: translateX(10px); }
    30%  { transform: translateX(0);    }
    50%  { transform: translateX(10px); }
    65%  { transform: translateX(0);    }
    100% { transform: translateX(0);    }
}

.hop {
    animation: hopRight 2s infinite;
}
/*----------MŮJ PROFIL↑----------*/

/*----------PRÁCE↓----------*/
.prace {
    background-color: #0f2043;
}

.napis-svetly {
    background-color: #0f2043;
    text-align: center;
}

.napis-svetly h2 {
    background-color: #0f2043;
    color: #ebebeb;
    margin-top: 5%;
    margin-bottom: 3%;
    padding: 1%;
    font-size: 3.5rem;
    font-weight: 700;
    display: inline-block;
    border-left: #4b64aa solid 10px;
}
/*----------------------------------------*/
.vyber {
    width: 100%;
    background-color: #0f2043;
    margin: auto;
    padding-bottom: 0.1%;
}
/*----------Kolotoč↓----------*/
.carousel-custom {
    width: 60%;
    height: 500px;
    margin: auto;
    margin-bottom: 3%;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.carousel-caption.fixed-caption {
    background-color: #4b64aa;
    top: 50%;
    left: 0;
    right: 0;
    position: absolute;
    transform: translateY(-51%);
    text-align: center;
    text-decoration: none;
}

.carousel-caption.fixed-caption h2 {
    width: 100%;
    color: #ebebeb;
    font-size: 2.5rem;
    font-weight: 600;
}

.carousel-caption.fixed-caption:hover h2 {
    color: #0f2043;
    transform: scale(1.07);
    transition: all 0.3s ease;
}
/*----------------------------------------*/
.carousel-item {
    filter: brightness(40%);
}

.carousel-item img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.carousel-control-prev, .carousel-control-next {
    width: 100px;
    height: 100px;
    background-color: #0f2043;
    top: 41% !important;
    bottom: auto !important;
    align-items: center;
    justify-content: center;
}
/*----------------------------------------*/
.odkaz-text {
    transform: translateY(70px);
}

.odkaz-text img {
    width: 50px;
}

.odkaz-text img:hover {
    content: url(materialy/next_dark.png);
}
/*----------Kolotoč↑----------*/
/*----------PRÁCE↑----------*/

/*----------PATIČKY↓----------*/
footer p {
    background-color: #0f2043;
    color: #ebebeb;
    margin: 0;
    padding: 1%;
    text-align: center;
}

.footer-tmavy p {
    background-color: #0f2043;
}

.footer-svetly p {
    background-color: #4b64aa;
}
/*----------PATIČKY↑----------*/

/*----------MENU NA OSTATNÍCH STRÁNKÁCH↓----------*/
.header-vedlejsi {
    width: 100%;
    background-color: #0f2043;
    margin: auto;
    display: flex;
    justify-content: center;
}

.logo-vedlejsi img {
    background-color: #0f2043;
    width: 150px;
    margin-top: 10px;
    padding: 20px;
}

.napis-tmavy h1 {
    background-color: #0f2043;
    color: #ebebeb;
    margin: auto;
    padding-top: 12%;
    font-size: 5rem;
    font-weight: 700;
    display: inline-block;
}

.napis-svetly h1 {
    background-color: #4b64aa;
    color: #ebebeb;
    padding-top: 5%;
    font-size: 5rem;
    font-weight: 700;
    display: inline-block;
}
/*----------Menu↓----------*/
.menu-vedlejsi {
    width: 100%;
    background-color: #0f2043;
}

.seznam-tmavy {
    width: 80%;
    background-color: #0f2043;
    margin: 0 auto;
    padding: 3%;
    display: flex;
    list-style: none;
}

.seznam-tmavy li {
    background-color: #0f2043;
    margin: auto;
    text-align: center;
}

.seznam-tmavy li a {
    background-color: #0f2043;
    color: #ebebeb;
    margin: auto;
    font-size: 2.2rem;
    text-decoration: none;
}

.seznam-tmavy li a:hover {
    color: #4b64aa;
}
/*----------Menu↑----------*/
/*----------MENU NA OSTATNÍCH STRÁNKÁCH↑----------*/

/*----------PROJEKTY SVĚTLÉ↓----------*/
.rocnik-svetly {
    background-color: #4b64aa;
    padding-bottom: 3%;
}

.projekt-svetly {   
    background-color: #4b64aa;
    width: 100%;
    height: 300px;
    margin-bottom: 3%;
    position: relative;
    overflow: hidden;
}

.projekt-svetly img {
    width: 60%;
    height: 300px;
    object-fit: cover;
    filter: brightness(40%);
    border-radius: 20px;
}

.projekt-text-svetly {
    width: 60%;
    top: 50%;
    left: 50%;
    background-color: #0f2043;
    color: #ebebeb;
    padding: 2%;
    font-size: 2.5rem;
    transform: translate(-50%, -50%);
    position: absolute;
    text-align: center;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.projekt-text-svetly img {
    width: 35px;
    height: auto;
    filter: brightness(100%);
}

.projekt-text-svetly img:hover {
    content: url("materialy/next_light.png");
}

.projekt-text-svetly h3 {
    margin-top: 17px;
    margin-right: 10px;
    font-size: 2rem;
    display: inline-block;
    transition: all 0.3s ease;
}

.projekt-text-svetly:hover h3 {
    color: #4b64aa;
    transform: scale(1.07);
}
/*----------PROJEKTY SVĚTLÉ↑----------*/

/*----------PROJEKTY TMAVÉ↓----------*/
.rocnik-tmavy {
    background-color: #0f2043;
    padding-bottom: 3%;
}

.projekt-tmavy {  
    background-color: #0f2043; 
    width: 100%;
    height: 300px;
    margin-bottom: 3%;
    position: relative;  
    overflow: hidden;
}

.projekt-tmavy img {
    width: 60%;
    height: 300px;
    object-fit: cover;
    filter: brightness(40%);
    border-radius: 20px;
}

.projekt-text-tmavy {
    width: 60%;
    top: 50%;
    left: 50%;
    background-color: #4b64aa;
    color: #ebebeb;
    padding: 2%;
    font-size: 2.5rem;
    transform: translate(-50%, -50%);
    position: absolute;
    text-align: center;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.projekt-text-tmavy img {
    width: 35px;
    height: auto;
    filter: brightness(100%);
}

.projekt-text-tmavy img:hover {
    content: url("materialy/next_dark.png");
}

.projekt-text-tmavy h3 {
    margin-top: 17px;
    margin-right: 10px;
    font-size: 2rem;
    display: inline-block;
    transition: all 0.3s ease;
}

.projekt-text-tmavy:hover h3 {
    color: #0f2043;
    transform: scale(1.07);
}
/*----------PROJEKTY TMAVÉ↑----------*/





/*----------RESPONZIVNÍ DESIGN PRO STŘEDNÍ↓----------*/
@media (max-width: 800px) {
/*----------Pozadí hlavní stránky↓----------*/
.logo-hlavni img {
    width: 60%;
}

.jmeno img {
    width: 60%;
}
/*----------Pozadí hlavní stránky↑----------*/

/*----------Menu na hlavní stránce↓----------*/
.seznam-svetly {
    width: 70%;
    margin: auto;
    display: block;
}

.seznam-svetly li {
    margin: auto;
    text-align: center;
}

.seznam-svetly li a {
    margin: auto;
    padding: 0;
    font-size: 1.8rem;
}
/*----------Menu na hlavní stránce↑----------*/

/*----------Můj profil↓----------*/
.napis-tmavy h2 {
    margin-bottom: 3%;
    margin-top: 5%;
    font-size: 2.8rem;
    font-weight: 500;
    border-left: #4b64aa solid 7.5px;
}
/*----------------------------------------*/
.odkazy {
    width: 80%;
    padding-bottom: 10%;
}

.odkazy i {
    padding-bottom: 3%;
    font-size: 2rem;
}

.odkazy i:hover {
    font-size: 2rem;
}

.odkazy h2 {
    font-size: 1.8rem;
    font-weight: 400;
}

.odkazy h4 {
    padding-bottom: 3%;
    font-size: 1.3rem;
}

.odkaz {
    margin-bottom: 10%;
    text-align: center;
    justify-content: space-between;
    border-radius: 10px;
}

.odkaz img {
    width: 30px;
}
/*----------Můj profil na mě↑----------*/

/*----------Práce↓----------*/
.napis-svetly h2 {
    margin-bottom: 3%;
    margin-top: 5%;
    font-size: 2.8rem;
    font-weight: 500;
    border-left: #0f2043 solid 7.5px;
}
/*----------------------------------------*/
.vyber {
    width: 100%;
}

.odkaz-text {
    transform: translateY(-6px);
}

.odkaz-text img {
    width: 25px;
}
/*----------kolotoč↓----------*/
.carousel-custom {
    width: 80%;
    height: 200px;
    margin-bottom: 10%;
    border-radius: 10px;
}

.carousel-caption.fixed-caption {
    top: 50%;
}

.carousel-caption.fixed-caption h2 {
    width: 80%;
    margin: auto;
    font-size: 1.5rem;
    font-weight: 400;
    display: block;
}

.carousel-item img {
    height: 200px;
}

.carousel-control-next span, .carousel-control-prev span {
    transform: translateY(-35px);
}
/*----------kolotoč↑----------*/
/*----------Práce↑----------*/

/*----------Patička↓----------*/
footer p {
    padding: 2.5%;
    font-size: 0.8rem;
}
/*----------Patička↑----------*/

/*----------Menu na ostatních stránkách↓----------*/
.header-vedlejsi {
    padding-top: 0;
    flex-wrap: wrap;
    align-items: center;
}

.logo-vedlejsi img {
    width: 150px;
}

.napis-tmavy h1, .napis-svetly h1 {
    font-size: 3rem;
    font-weight: 600;
}

.menu-vedlejsi {
    display: flex;
    padding: 10px 0;
}

.menu-vedlejsi img {
    width: 210px;
}
/*----------menu↓----------*/
.seznam-tmavy {
    width: 80%;
    margin-top: 40px;
    margin-bottom: 15px;
    display: block;
}

.seznam-tmavy li a {
    padding: 0;
    font-size: 2rem;
}
/*----------menu↑----------*/
/*----------Menu na ostatních stránkách↑----------*/

/*----------Projekty↓----------*/
.rocnik-svetly, .rocnik-tmavy {
    padding-bottom: 3%;
}

.projekt-svetly, .projekt-tmavy {
    height: 200px;
    margin: auto;
    margin-bottom: 10%;
    border-radius: 10px;
}

.projekt-svetly img, .projekt-tmavy img {
    width: 80%;
    height: 200px;
    border-radius: 10px;
}

.projekt-text-svetly, .projekt-text-tmavy {
    width: 80%;
    padding: 1%;
}

.projekt-text-svetly h3, .projekt-text-tmavy h3 {
    padding: 1%;
    font-size: 1.8rem;
}

.projekt-text-svetly img, .projekt-text-tmavy img {
    width: 40px;
    height: auto;
    padding: 1%;
    filter: brightness(100%);
}
/*----------Projekty↑----------*/
}
/*----------RESPONZIVNÍ DESIGN PRO STŘEDNÍ↑----------*/



/*----------RESPONZIVNÍ DESIGN PRO MALÉ↓----------*/
@media (max-width: 250px) {
/*----------Menu na hlavní stránce↓----------*/
.logo-hlavni img {
    width: 80%;
    padding-bottom: 5%;
}

.jmeno img {
    width: 70%;
}

.seznam-svetly {
    display: block;
}

.seznam-svetly li a {
    font-size: 1rem;
}
/*----------Menu na hlavní stránce↑----------*/

/*----------Můj profil↓----------*/
.napis-tmavy h2 {
    margin-top: 10%;
    margin-bottom: 5%;
    font-size: 1.8rem;
    font-weight: 500;
    border-left: #4b64aa solid 5px;
}
/*----------------------------------------*/
.odkazy {
    width: 80%;
    padding-bottom: 10%;
}

.odkazy i {
    padding-bottom: 8%;
    font-size: 1.5rem;
}

.odkazy i:hover {
    font-size: 1.5rem;
}

.odkazy h2 {
    font-size: 1.3rem;
    font-weight: 400;
}

.odkazy h4 {
    padding-bottom: 8%;
    font-size: 0.9rem;
}

.odkaz {
    margin-bottom: 5%;
    text-align: center;
    justify-content: space-between;
    border-radius: 10px;
}

.odkaz img {
    width: 30px;
}
/*----------Můj profil↑----------*/

/*----------Práce↓----------*/
.napis-svetly h1 {
    font-size: 2rem;
    font-weight: 600;
}

.napis-svetly h2 {
    margin-top: 10%;
    margin-bottom: 5%;
    font-size: 1.8rem;
    font-weight: 500;
    border-left: #0f2043 solid 5px;
}
/*----------------------------------------*/
.vyber {
    width: 100%;
}

.odkaz-text {
    transform: translateY(-6px);
}

.odkaz-text img {
    width: 15px;
}
/*----------kolotoč↓----------*/
.carousel-custom {
    width: 80%;
    height: 150px;
    margin-bottom: 10%;
    border-radius: 10px;
}

.carousel-caption.fixed-caption {
    top: 50%;
}

.carousel-caption.fixed-caption h2 {
    width: 80%;
    margin: auto;
    font-size: 0.9rem;
    font-weight: 400;
    display: block;
}

.carousel-item img {
    height: 150px;
}

.carousel-control-next span, .carousel-control-prev span {
    transform: translateY(-35px);
}
/*----------kolotoč↑----------*/
/*----------Práce↑----------*/

/*----------Patička↓----------*/
footer p {
    padding: 2%;
    font-size: 0.7rem;
}
/*----------Patička↑----------*/

/*----------Menu na ostatních stránkách↓----------*/
/*----------header↓----------*/
.header-vedlejsi {
    padding-top: 0;
    flex-direction: column;
    align-items: center;
}

.logo-vedlejsi img {
    width: 200px;
}

.napis-tmavy h1 {
    font-size: 1.6rem;
    font-weight: 600;
}

.menu-vedlejsi {
    display: flex;
}

.menu-vedlejsi img {
    width: 180px;
}
/*----------header↑----------*/
/*----------menu↓----------*/
.seznam-tmavy {
    width: 80%;
    margin-bottom: 15px;
    display: block;
}

.seznam-tmavy li a {
    font-size: 1rem;
}
/*----------menu↑----------*/
/*----------Menu na ostatních stránkách↑----------*/

/*----------Projekty↓----------*/
.rocnik-svetly, .rocnik-tmavy {
    padding-bottom: 3%;
}

.projekt-svetly, .projekt-tmavy {
    height: 100px;
    margin-bottom: 10%;
}

.projekt-svetly img, .projekt-tmavy img {
    width: 80%;
    height: 100px;
    border-radius: 10px;
}

.projekt-text-svetly, .projekt-text-tmavy {
    padding: 1%;
    font-size: 2.5rem;
}

.projekt-text-svetly h3, .projekt-text-tmavy h3 {
    padding: 1%;
    font-size: 1rem;
}

.projekt-text-svetly img, .projekt-text-tmavy img {
    width: 20px;
    height: auto;
    padding: 1%;
    filter: brightness(100%);
}
/*----------Projekty↑----------*/
}
/*----------RESPONZIVNÍ DESIGN PRO MALÉ↑----------*/