body {
    background-color: black;
    overflow-x: hidden;

}




.navbar {


    border: 2px solid transparent;
    width: 100%;
    display: flex;
    margin: auto;
    flex-direction: row;
    justify-content: space-around;
    border-radius: 20% 20% 20% 20%;
    background: radial-gradient(circle, rgba(23, 0, 200, 1) 8%, rgba(89, 0, 255, 1) 47%, rgba(3, 0, 67, 1) 94%);

}

.navbar a {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-style: bold;
    color: rgb(217, 255, 0);
   /* background-color: #410000; */
   background: rgb(161, 7, 25);
   white-space: nowrap;
   font-style: italic;
   padding: 5px;
    text-decoration: none;
    border-radius: 10px 12px 10px 12px;
    text-align: center;
    border: 2px solid rgba(59, 59, 59, 0.744);
}

  .teleportButton {
      width: 15%;
      bottom: 2px solid lawngreen;
  }








.navbar a p{
    background: repeating-linear-gradient(45deg,
    #191919ad,
        #181b18 4px,
        #191919ad 4px,
        #181b18 4px
       );
    margin: auto;
    border-radius: 5% 8% 5% 8%;
    opacity: 100%;
   
    width: 80%;
    text-align: center;
}






/*desktop query*/
@media only screen and (min-width: 600px) {



    .logoSvgSection {
        border: 2px solid transparent;
        width: 500px;
        display: block;
        margin: auto;

    }


    



    .navbar a{
        width: 20%;
        background-color: rgb(200, 0, 0);
        color: orange;
       
          
    }

        .navbar a p{
            background-color: black;
           
        }

        .navbar a:hover {
            width: 20%;
            background-color: rgb(255, 255, 255);
            opacity: 100%;
                    
            animation-name: teleportButtonAnim ;
            animation-duration: 2s;
            animation-fill-mode: forwards ;
            animation-iteration-count: infinite ;
            animation-timing-function: linear;
                
                    
        }
                .navbar a:nth-of-type(3):hover p {
                    opacity: 100%;

                }

        @keyframes teleportButtonAnim{

            0%{
                background-color: rgb(141, 0, 0);
                box-shadow: 0px 0px 0px rgb(55, 245, 255), 0px 0px 0px rgb(55, 245, 255);
            }

            50%{
                background-color: red;
                box-shadow: 3px 3px 5px rgb(55, 245, 255), -3px -3px 5px rgb(55, 245, 255);
            }

            100%{
                background-color: rgb(141, 0, 0);
                box-shadow: 0px 0px 0px rgb(55, 245, 255), 0px 0px 0px rgb(55, 245, 255);
            }
            
        }

        

  




}





/*Mobile query*/
@media only screen and (max-width: 600px) {

    * {
        overflow-x: hidden;
    }

    body {
        overflow-x: hidden;
    }

    .headerContainer {
        border: 2px solid rgb(209, 0, 94);
    }

    .logoSvgSection {
        border: 2px solid transparent;
        width: 300px;
        display: block;
        margin: auto;

    }

    .pageContentContainer {

        overflow-y: visible;

        border: 2px solid orange;
        ;
    }




}