@font-face {
    font-family: 'braisci_springregular';
    src: url(fonts/braiscispring-regular-webfont.woff2) format('woff2'),
         url(fonts/braiscispring-regular-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;
    
}
 
  @font-face {
    font-family: 'Grotesk';
    src: url(fonts/spacegroteskwght-webfont.woff2) format('woff2'),
         url(fonts/spacegroteskwght-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;
    
}
 
 
 
 body {
   
                margin: 0;
                background-color: #111e2c;
                /* you can delete the line below if you'd prefer to not use an image */
            }
            .image-container {
  position: relative;
  display: inline-block;
}

    * {
                box-sizing: border-box;
            }

.image-container img {
  display: block;
  width: 100%;
  height: auto;
}

.overlay-text {
    width: 100%;
                height: 30px;
                padding: 10px;
                font-size: smaller;

  position: relative;
  top: 108px; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  text-align: center;
  font-family: 'braisci_springregular';
}
h1,
h2,
h3{
  font-family: 'braisci_springregular';
    color: #ED64F5;
}
              h1{
                                
                                text-align: center;
                                 line-height: 85%;
                              
              }
                            h2{
                                font-family: 'braisci_springregular';
                                text-align: center;
                               
                            }
p{
  font-family: 'Grotesk';
  font-size:115%
}
footer{
  font-size: smaller;
  }
             #topBar {
                width: 100%;
                background-color: #5e4e8c;
                /* header color here! */
                height: 512px;
                border-radius: 55px;

            }

               #container {
                max-width: 1024px;
                /* this is the width of your layout! */
                /* if you change the above value, scroll to the bottom
      and change the media query according to the comment! */
                margin: 0 auto;
                /* this centers the entire page */
                color: #111e2c;
                border-radius: 100px;
                background: #a1abbb;
                box-shadow: inset -41px -41px 82px #64748b,
            inset 41px 41px 82px #ccd7e8;
                padding:64px;
            }
                        #navbar {
                          text-align: center;
                height: 164px;
                              padding-top: 64px;
                /* navbar color */
                width: 100%;
            }

            #navbar ul {

                display: flex;
                padding: 0;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
            }

            #navbar li {
                margin-top: -60px;
                margin-right: -20px;
            }
            
                                    #header {
                width: 100%;
                /* header color here! */
                height: 50%;
                background-image: url("pix/TitlePromptScreen.png");
                background-repeat: no-repeat;
                background-size: 100%;
         

            }
            
              @media only screen and (max-width: 924px) {
                #flex {
                    flex-wrap: wrap;
                }

                aside {
                    width: 100%;
                    
                }
                 main {
                    order: 1;
                }
}