/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
           body {
                font-family:"ICM";
                margin: 0;
                background-color: #868c1d;
                background-size: 69px;
                color: #7C2E18;
                background-image: url(https://wilgebus.neocities.org/achtergronddd.jpg);
            }

            #flex {
              display: flex;
            }

            main {
              background-color: #69B69F;
              flex: 1;
              padding: 20px;
              order: 1;
              border: 3px outset #69b679;
              
            }
            
            footer {
              background-color: #13092D;
              color:#f3bc34;
              padding: 10px;
              border: 3px outset #25092d;
              border-radius: 0px 0px 8px 8px;
            }

            #header {
              font-family: "CloudCandy";
              color: white;
              font-size: 27px;
              text-shadow: 1px 1px 3px #072216, 0 0 25px #3b2142, 0 0 5px #aa517d;
              width: 100%;
              background-color: #1d868c;
              height: 122px;
              overflow-y: hidden;
              border: 3px outset #1d8c5b;
              border-radius: 8px 8px 0px 0px;
            }
            #supercontainer {
              padding:50px
            }
            
            #container {
                max-width: 900px;
                margin: 0 auto;
                border: 4px solid #13092D;
                border-style: outset;
                border-radius: 13px;
                
            }
            main a {
                color: #f3bc34;
                font-weight: bold;
                
            }

            #navbar {
                height: 60px;
                background-color: #13092D;
                width: 100%;
                font-weight: bold; 
                border: 3px inset #09112d;
            }
            .navbar {
              overflow-y: visable;
            }
            
            .navbar a {
                padding: 14px;
                color: #f3bc34;
                border: 4px outset #3b2142;
                border-radius: 3px;
                font-weight: 800;
                text-decoration: none;
                background-color: #2A2142;
                float: left;
            } 
            
            .navbar a:hover {
                background-color: #13092D;
                text-decoration: none;
                border: 3px inset #09112d;
                color: #d12856;
            }
            

            h1, h2, h3 {
              color:#8c1400;
              }

            h1 {
              font-size: 52px;
            }
            
            h2 {
              font-size: 27px;
            }

            strong {
              color:#d12856;
            }

            .box {
              background-color: #D0B5DA;
              border: 3px solid #cb96a6;
              border-style: outset;
              border-radius: 5px;
              padding: 10px;
            }
            
            .center {
              margin: auto;
              position: absolute;
              transform: translate(30px);
              display: flex;
              justify-content: center;
              align-items: center;
            }
            
            .buttonbar { 
                padding: 0px;
                color: #f3bc34;
                border: 4px outset #3b2142;
                border-radius: 3px;
                text-decoration: none;
                background-color: #2A2142;
            }
            
            .buttonbar a {
                padding: 14px;
                color: #f3bc34;
                border: 4px outset #3b2142;
                border-radius: 3px;
                font-weight: 800;
                text-decoration: none;
                background-color: #2A2142;
                float: left;
            } 
            
            .buttonbar a:hover {
                background-color: #13092D;
                text-decoration: none;
                border: 3px inset #09112d;
                color: #d12856;
            }
            
            @media only screen and (max-width: 630px) {
              
                .navbar a {
                  float: left;
                  width: 100%;
                } 
                #navbar {
                  height: 250px;
                }
                
                #flex {
                  flex-wrap: wrap;
                }
                main {
                  order: 1;
                }
                
                #supercontainer {
                  padding:5px;
                }
                
            }