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, rgb(18, 0, 156) 8%, rgb(57, 0, 162) 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: 14% 20% 14% 20%;
    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: 70%;
   
    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: 7%;

    }
    
        .navbar a:hover{
            background-color: chocolate;
            transition: 0.3s;
        }

        .navbar a:hover p{
            opacity: 100%;
        }



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

        .navbar a:nth-of-type(3) p{
            background-color: black;
           
        }

        .navbar a:nth-of-type(3):hover {
            width: 20%;
            background-color: rgb(19, 136, 87);
            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%{
                box-shadow: 2px 2px 5px lawngreen, -2px -2px 5px lawngreen;
            }

            50%{
                box-shadow: 0px 0px 0px lawngreen, 0px 0px 0px lawngreen;
            }

            100%{
                box-shadow: 2px 2px 5px lawngreen, -2px -2px 5px lawngreen;
            }
            
        }

        

  




}





/*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;
        ;
    }




}