html { 
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.podzim {
    position:absolute;
    z-index: 4;
    height: 60px;
    width: auto;
}

html::-webkit-scrollbar {
    display: none;
}

p::selection, h1::selection, span::selection, a::selection {
    background: #ee6b00;
    color: white;
    border-radius: 5px;
} 


body::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}

body {
    background-color: #231f25;
    width: 100vw;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    font-family: monospace;

    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll; 
}

/* header */

.header {
    height: 60px;
    background: linear-gradient(#252525 20% ,#231f25);
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(2, 1fr);
}


    /* navBar */

    .navBar {
        margin-right: 10px;
        grid-column-start: 2;
        grid-column-end: 4;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: end;
        align-items: center;
    }

    .navButtno {
        border: none;
        border-bottom: 3px solid #dbdbdb;
        color: #dbdbdb;

        background: none;

        font-size: 1.5em;

        filter: opacity(50%);

        height: 45px;
        width: fit-content;
        padding: 10px 10px;
        margin: auto 6px;


        -webkit-transition: all 250ms ease-out, transform 250ms ease-out;
        -moz-transition: all 250ms ease-out, transform 250ms ease-out;
        -o-transition: all 250ms ease-out, transform 250ms ease-out;
        transition: all 250ms ease-out, transform 250ms ease-out;
    }

    .navButtno:hover {
        cursor: pointer;
        filter: opacity(100%)
    }


    /*  headerTitle */

    .headerTitle {
        grid-column-start: 1;
        grid-column-end: 2;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;
    }

    .title {
        color: #e0e0e0;
        font-size: 2em;
        font-weight: 570;
        font-family: monospace;
        text-shadow: 1px 1px 2px black;
    }

    .pageIcon {
        border-radius: 180px;
        height: 50px;
        width: 50px;
        margin: auto 10px;
        box-shadow: 1px 1px 2px black;
        cursor: pointer;
    }

/* Section */

section {
    display: flex;
    position: relative;
    padding: 100px 20vw;
    flex-direction: column;
    min-height: 400px;
    align-items: center;
    color: #e0e0e0;
    margin: -1px;
}

h1 {
    text-align: center;
    font-size: 5em;
    font-weight: bold;
    z-index: 1;
}

p {
    font-size: 2.3em;
    font-weight: 500;
    z-index: 1;
}

    /* Sections */

    .intro {
        min-height: 550px;
    }

    .welcome::after {
        content: "_"
    }

    /**/

    .why {
        margin: -1px;
        background-color: #ee6b00;
        min-height: 600px;

    }

    .whyH1 {
        text-align: center;
        color: #231f25;
        padding: 0.5em;
        margin-bottom: 0;
    }

    .why > p {
        color: #231f25;
        padding: 0.5em;
        margin-top: 0;
        font-weight: 800;
    }

    /**/

    .cesta {
        color: #ee6b00;
        font-weight: 800;
        margin-left: 10px;


        -webkit-transition : color 50ms ease-out;
        -moz-transition : color 50ms ease-out;
        -o-transition : color 50ms ease-out;
        transition : color 50ms ease-out;
    }
    
    .cesta:hover {
        color: #bd5500;
        font-weight: 1000;
    }


    /* section layers */

    .layer1 {
        background-image: url("../img/layer1.svg");
    } 
    
    .layer2 {
        background-image: url("../img/layer2.svg");
    }

    .footer-layer {
        background-image: url("../img/footer-layer.svg")
    }

    .layers {
        aspect-ratio: 960/300;
        width: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

/* footer */

.footer {
    height: 200px;
    background-color: #110d13;
    color: white;
    font-weight: normal;
    font-family: monospace;
    text-align: center;
    padding: 70px;
    font-size: 1.5em;
}

/* Animations */


@keyframes blinkingText{
    0%{     color: #ee6b00;    }
    49%{    color: #ee6b00; }
    60%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: #ee6b00;    }
}

@keyframes falling {
    0% {
        transform: translateY(0) rotate(0);
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
    }
}


.welcome::after {
    animation:blinkingText 1.2s infinite;
}


/* @media queries */

@media (max-width: 620px) {
    
    /* Header */

    .header {
        height: 130px;
        background: linear-gradient(#252525 20% ,#231f25);
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1%;
    }

        /*  headerTitle */

        .headerTitle {
            flex-direction: row;
            justify-content: center;
            align-items: center;
            grid-row-start: 1;
            grid-row-end: 2;
            grid-column-start: 2;
            grid-column-end: 4;
            margin-right: 30px;
        }

        /* navBar */

        .navBar {
            flex-direction: row;
            justify-content: center;
            align-items: center;
            grid-row-start: 2;
            grid-row-end: 3;
        }

    /* Sections */

        /* Welcome */

        .welcome {
            font-size: 4.7em;
        }

        /* Path */

        .pathToProgram1H1 {
            font-size: 4.5em;
        }

}


@media (max-width: 450px) {
    
    /* main */
    
    h1 {
    font-size: 4.3em;
    }
    
    p {
        font-size: 2.5em;
    }
    
    section {
        padding: 80px 10vw;
    }
    
    
    /* Header */

    .header {
        height: 130px;
        background: linear-gradient(#252525 20% ,#231f25);
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1%;
    }

        /*  headerTitle */

        .headerTitle {
            flex-direction: row;
            justify-content: center;
            align-items: center;
            grid-row-start: 1;
            grid-row-end: 2;
            grid-column-start: 2;
            grid-column-end: 4;
            margin-right: 30px;
        }

        /* navBar */

        .navBar {
            flex-direction: row;
            justify-content: center;
            align-items: center;
            grid-row-start: 2;
            grid-row-end: 3;
        }

    /* Sections */

        /* Welcome */

        .welcome {
            font-size: 4em;
            
        }

        /* Path */

        .pathToProgram1H1 {
            font-size: 4em;
        }

}

@media (max-width: 384px) {
    
    /* main */
    
    h1 {
    font-size: 3em;
    }
    
    p {
        font-size: 1.5em;
    }
    
    /* Header */

    .header {
        height: 130px;
        background: linear-gradient(#252525 20% ,#231f25);
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1%;
    }

        /*  headerTitle */

        .headerTitle {
            flex-direction: row;
            justify-content: center;
            align-items: center;
            grid-row-start: 1;
            grid-row-end: 2;
            grid-column-start: 2;
            grid-column-end: 4;
            margin-right: 30px;
        }

        /* navBar */

        .navBar {
            flex-direction: row;
            justify-content: center;
            align-items: center;
            grid-row-start: 2;
            grid-row-end: 3;
        }

    /* Sections */

        /* Welcome */

        .welcome {
            font-size: 3em;
            
        }

        /* Path */

        .pathToProgram1H1 {
            font-size: 3em;
        }

}