*{
                box-sizing: border-box;
            }
            
      body{
    background-image:url('Pics/Kyo/kyo-bg.png');
    letter-spacing:1px;
    text-align:justify;
    font-family: 'LibreFranklin', sans-serif;
    margin-top:15%;
    margin-right:50%;
      }


            #container {
            max-width: 400px;
            height:auto;
            margin-left:auto;
            margin-right:auto;
            position: relative;
            }
            
            #container a {
            color: #F0F9FF;
            font-weight: bold;
            }

      #flex {
    display: flex;
}

            main {
                background-color: #B8E6FE;
                flex: 1;
                padding: 1px 15px;
                border-radius: 25px 0 25px 0;
            }

            h2,
            h3 {
                color: #001F47;
            }

            h1 {
                color: #B8E6FE;
                text-align: center;
                text-transform: uppercase;
                font-size: 25px;
                background-color: #0E1C40;
                border-radius: 10px 0 10px 0;
                padding:10px;
            }
            
  .button {
  width: 100%;
  color: #B8E6FE;
  text-align: center;
  text-transform: uppercase;
  font-size: 25px;
  background-color: #0E1C40;
  border-radius: 10px 0 10px 0;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: 0.3s;
  margin: 15px 0px;
}

.button:hover {background-color: #4588f7;color: white;}

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

                aside {
                    width: 100%;
                }
                }