* {
    box-sizing: border-box;
}

body {
   
    margin:0;
    position: relative;
    font-family: 'M PLUS Rounded 1c';
   
}
html {
    scroll-behavior: smooth;
}
.footer {
          width:90vw;
          position:relative;
          margin:auto;
          background-color:#7eb5dd63;
          color: rgb(199, 168, 234);
          border-radius:20px;
          font-size:large;
          font-family: 'M PLUS Rounded 1c';
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px; 
        }
.homelink {
    color: rgb(199, 168, 234);
}
.header {
    margin:auto;
    padding: 70px;    
    color:white;      
    padding-bottom: 70px;
    text-align: center;
}
#h1t {
    text-align: center;
    font-size: 3vw;}

#background {
    position: fixed;
    top:0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background: linear-gradient(#000000, #070337, #0f1b66, #1f3988);    
    opacity:0.999; 
    z-index: -2;
}
p {
    color:white;
    font-size:1.5vw;
}
#navbar {
   
    position: sticky;
    height: 50px;
    top:0;
    max-width: 49.75vw;
    background-color: rgb(22, 97, 158);
    margin:auto;
    overflow:hidden;  
    float:none;
    display: block;
    border-radius: 13px;
    border:2.75px solid white;
    box-sizing: border-box;



    
}  
/* Navbar links */
#navbar a {
    float: left;
    display: block;
    color: #ffffff;
    text-align: center;
    padding: 14px 16.5px 14px 16px;
    text-decoration: none;
    font-size: 20px;


    font-family: "Arial Rounded MT";
}
#navbar a:hover {
    background-color: #ddd;
    color: black;
} 
/*#wrapper {
    width: 100%;
    top:50px;
    position:relative;

}*/
.ball {
    width: 100px;
    height: 100px;
    background-color:transparent;
    position:fixed;
    top:2vh;
    right:6vw;
    z-index: 2;
    border-radius: 50%;
    box-shadow: 20px 20px 0px #e4d01c;
    }
   
.stars {
    background-color: #fce7a7;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    animation-iteration-count: infinite;
    position:fixed;
    
    
    }

.star-1 {
    top:5vh;
    left:5vw;
    animation-duration: 3s;
    animation-name: twinkle;
    }

.star-2 {
    top: 7vh;
    left: 10vw;
    animation-duration: 2.7s;
    animation-name: twinkle;
    }   

.star-3 {
    top: 15vh;
    left: 6vw;
    animation-duration: 2.4s;
    animation-name: twinkle;
    }
.star-4 {
    top: 17.5vh;
    left: 30vw;
    animation-duration: 3.2s;
    animation-name: twinkle;
    }
.star-5 {
    top: 7.7vh;
    right: 43vw;
    animation-duration: 0.7s;
    animation-name: twinkle;
    }
.star-6 {
    top: 9vh;
    right: 20vw;
    animation-duration: 1.9s;
    animation-name: twinkle;
    }
.star-7 {
    top:6vh;
    left:25vw;
    animation-duration: 2.6s;
    animation-name: twinkle;
    }
.star-8 {
    top:14.99vh;
    right:12vh;
    animation-duration: 1.7s;
    animation-name: twinkle;
    }
/*.string {
    position:absolute;
    width: 2px;
    height:6.6vh;
    top:0;
    right:5.5vw;
    background-color:white;
    border-radius: 5px;
    

}*/


@keyframes twinkle {
    20% {
    transform: scale(0.5);
    opacity: 0.5;
    }
}
/*<!-- @media screen and  (max-width: 768px) {
    .ball {
    width: 100px;
    height: 100px;
    background-color:transparent;
    position:absolute;
    top:10vh;
    right:6vw;
    z-index: 2;
    border-radius: 50%;
    box-shadow: 20px 20px 0px #ffd147;
    }
}*/
.flex-container {
    display:flex;
    flex-flow: row nowrap;
    justify-content: center;
}