:root {

    --magenta: #ec008c;

    --cyan: #0085D6;

    --darkgray: #4B4B4C;

    --lightgray: #7e7e85;



    --hovercyan: #0676bb;

    --hovertext: #e4effc;

    --graysection: rgba(0,0,0, 0.08);

}



/* header */



#Colored-line {

    width: 100%;

    max-height: 6px;

    overflow: hidden;

    img {

        width: 300%;

    display: block;

    }

}



header {

    justify-content: space-around;

    display: flex;

    color: var(--darkgray);

    margin: auto;

    max-width: 1200px;

    align-items: center;





    #hContacts {

        div {

            display:flex;

            

            span {

                margin: 0 0.5rem;

            }

        }

    }



}



#logo {

    height: 100px;

    img {

    object-fit: contain;

    height: 100px;

    }

}



/* nav */



nav {

background-color: var(--cyan);





    a {

        text-decoration: inherit;

        color: white;

        font-size: 1.25rem;

    }



    a:hover {

        background-color: var(--hovercyan);

        color:var(--hovertext)

    }

}



#selection > a {

        text-decoration: underline;

}



@media screen and (max-width: 768px) {









        nav {

            display: flex;

            position: fixed;

            top: 0;

            left: 0;

            align-items: center;

            height: 100%;

            flex-direction: column;

            gap: 1.5rem;

            padding: 4rem 0;



            transition: width 0.4s ease;

            overflow: hidden;

            width: 0;



            #menu-item {

                padding: 2rem 2rem;

                width: 100%;

            }



            a {

                font-size: 2rem;

                position: relative;

                padding: 1rem;

                opacity: 0;

                transition: opacity 0.1s ease;

                width: 100%;

                display: flex;

            }



        }



        nav.open {

            width: 20rem;

             transition: width 0.4s ease;



             a {

                opacity: 1;

                transition: opacity 0.4s ease;

                transition-delay: 0.1s;

             }

        }



        #mobileHR {

            display: flex;

            padding: 0.75rem;

            background-color: var(--cyan);

            width: 100%;

            color: white;

            justify-content: center;

        }



        #menu {

            display: flex;

            color: white;

            background-color: var(--cyan);

            border: none;

            padding: 0.5rem;

            

            span {

                font-size: 2rem;

            }



        }

        #menu:hover {

            cursor: pointer;

        }



                #hDesc {

            display: none;

        }



        #hContacts {

            display: none;

        }



}



@media screen and (min-width: 768px) {



    #hDesc {

        display: flex;

        font-size: 1.25rem;

            }



        .menu-item > a {

                padding: 1rem 1.5rem;

        }



        nav {

            padding: 1rem;

            display: flex;

            justify-content: center;

        }



        #mobileHR {

            display: none;

        }

    



        #menu {

            display: none;

        }



}



@media screen and (min-width: 1200px) {



    .menu-item > a {

        font-size: 1.5rem;

    }



    #Colored-line > img {

    width:100%

}



}