/*Navigator on all pages*/

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

.topnav{

    width: 100%;

    position: fixed;

    display: flex;

   

    justify-content: space-between;

    top: 0;

    left: 0;

    z-index: 3;

    background-color:  var(--main-bg-color);

}

.logo{

    padding: 10px;

    margin-right: 20px;

    font-weight: normal;

}



.between{

    background-color: var(--main-bg-color);

    width: 5px;

    height: 120%;

}

.menus{

    display: flex;

    margin-right: 10px;

 

    margin-top: 10px;

    padding-bottom: 5px;



    background-image: linear-gradient(135deg, #43CBFF 10%, #9708CC 100%);

    background-size: 200% 100%;

    animation: animateGradient 2s ease 1;

    animation-delay: 0s;

    animation-duration: 2s;

    animation-iteration-count: infinite;

    animation-fill-mode: both;

    background-position:0 0;

}



@keyframes animateGradient {

	0% {

		background-position: 0% 0%;

	}

	50% {

		background-position: 100% 0%;

	}

	100% {

		background-position: 0% 0%;

	}

}

.menuItem{

    background-color: var(--main-bg-color);

    font-weight: bold;

    font-size: 18px;

    padding-left: 20px;

    padding-right: 20px;

    padding-top: 5px;

    padding-bottom: 0px;

    

    transition: all 0.4s ease;

    

}

a{

    text-decoration: none;

    color: white;

    font-weight: bold;

    font-size: 18px;

   

}

.menuItem:hover{

    background-color: rgba(0,0,0,0.5);

    cursor: pointer;



  /* padding-left: 50px;

   padding-right: 50px;

   text-shadow: 4px 4px 6px black;*/

}

.appSelector{

    z-index: 3;

    display: flex;

    justify-content: center;

    position: fixed;

    top: 60px;

    border-radius: 5px;

    left: 10px;

    width: 800px;

    height: 300px;

   

    transition: all 0.5s ease;

     background-image: linear-gradient( 135deg, rgb(0, 0, 0) 10%, rgb(29, 89, 168) 100%);

    /*background-image: linear-gradient( 135deg, #5EFCE8 10%, #736EFE 100%);*/

    opacity : 0;

    visibility : hidden;

}



.titleSection{   

    border-bottom: solid 1px rgba(255,255,255,0.75);    

    font-family: inherit;

    padding-bottom: 0px;

    margin-bottom: 0px;

    width: 200px;

}

.sectionMenu{

    display: flex;

    flex-direction: column;

    margin-left: 40px;

    

}

.mainPart{

    display: flex;

}

.column{

    list-style-type: none;

    padding-bottom: 10px;    

}

.row{

    padding-left: 5px;

   

}

.column>a{

    text-align: left;

    font-size: 16px;

    font-weight: 600;

    text-decoration: none;

    color: white;

}

.iconMenu {

    display: none;

}

}

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

    .topnav{

        width: 60%;

        position: fixed;

        display: flex;

        flex-direction: column;

       

        top: 0;

        left: 0;

        z-index: 3;

        background-color:  var(--main-bg-color);

    }

    

    a.iconMenu {

        float: right;

        padding-right: 5px;

        display: block;

        font-size: 20px;

        font-weight: bold;

        color: white;

    }

    .logo{

        padding: 10px;

        padding-bottom: 10px;

       

    }

    

    

    .between{

        background-color: var(--main-bg-color);

        height: 5px;

        width: 100%;

    }

    .menus{

        display: flex;

        flex-direction: column;

        margin-right: 10px;

        background-image: linear-gradient( 135deg, #43CBFF 10%, #9708CC 100%);

        padding-left: 5px;



        opacity: 0;

        visibility: hidden;

        height: 0px;

        margin-top: 0px;

        transition: all 0.3s ease;

    }

    .menuItem{

        background-color: var(--main-bg-color);

        font-weight: bold;

    

        font-size: 18px;

        padding-left: 20px;

        padding-right: 20px;

        padding-top: 20px;

        padding-bottom: 10px;

        transition: all 0.2s ease;

    }

    a{

        text-decoration: none;

        color: white;

        font-weight: bold;

        font-size: 18px;

       

    }

    .icon {

        display: none;

    }

    .menuItem:hover{

        background-color: rgba(0,0,0,0);

        cursor: pointer;

    }

    .appSelector{

        z-index: 3;

        display: flex;

        justify-content: center;

        position: fixed;

        flex-wrap: wrap;

        top: 200px;

        border-radius: 5px;

        left: 10px;

        width: 90%;

        

        transition: all 0.1s ease;

        background-image: linear-gradient( 135deg, #5EFCE8 10%, #736EFE 100%);

        opacity : 0;

        visibility : hidden;

    }

    

    .titleSection{   

        border-bottom: solid 1px rgba(255,255,255,0.75);    

        font-family: inherit;

        padding-bottom: 0px;

        margin-bottom: 0px;

        width: 200px;

    }

    .sectionMenu{

        display: flex;

        flex-direction: column;

        margin-left: 40px;

        

    }

    .mainPart{

        display: flex;

        flex-direction: column;

    }

    .column{

        list-style-type: none;

        padding-bottom: 10px;    

    }

    .row{

        padding-left: 5px;

       

    }

    .column>a{

        text-align: left;

        font-size: 16px;

        font-weight: 600;

        text-decoration: none;

        color: white;

    }

   

}