@font-face {
            font-family: DelaGothicOne-Regular;
            src: url('../style/DelaGothicOne-Regular.ttf');
         }

         @font-face {
            font-family: Atkinson-Hyperlegible-Regular-102;
            src: url('../style/Atkinson-Hyperlegible-Regular-102.ttf');
         }

            body {
             font-family: Atkinson-Hyperlegible-Regular-102, Arial;
             font-size: 20px;
             margin: 0;
             color: white;
             background-image: url('../img/bg/oceanday.png');
             background-repeat: no-repeat;
             background-attachment: scroll;
             background-size: cover;
             min-height: 100vh;
            }

            * {
                box-sizing: border-box;
            }

            #container {
                align-items: center;
                max-width: 950px;
                margin: 2% auto;
            }

             #flex {
                display: flex;
            }

            #sidebar {
                order: 1;
            }

            #nestedContainer {
                display: flex;
                height: fit-content;
            }


         a {
            color:rgb(60, 154, 255)
         }

         hr {
          border: 1px solid rgb(0, 76, 255);
          max-width: 400px;
        }

        h1,
        h2,
        h3,
        h4,
        h5 { 
          font-family: DelaGothicOne-Regular;
          text-align: center;
          color:#01379a;
          filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.338));
        }

        header {
            margin: 0 auto;
        }
        
        main {
                flex: 1;
                order: 2;
                width: calc(950px - 270px);
                padding: 2%;
                background: linear-gradient(180deg,rgba(255, 255, 255, 1) 94%, rgba(196, 236, 255, 0.52) 100%);
                color: rgb(0, 7, 57);
                z-index: 1;
                height: 1200px;
                max-height: 2280px;
                overflow: auto;
             }

            .noSidebar {
                width: 950px;
                padding: 2%;
                background: linear-gradient(180deg,rgba(255, 255, 255, 1) 94%, rgba(196, 236, 255, 0.52) 100%);
                color: rgb(0, 7, 57);
                z-index: 1;
                height: 1200px;
                max-height: 2280px;
                overflow: auto;
             }

        aside {
                background: linear-gradient(180deg,rgba(176, 255, 247, 1) 0%, rgba(9, 187, 255, 1) 9%, rgba(0, 183, 255, 1) 94%, rgba(40, 141, 191, 1) 100%);
                width: 250px;
                padding: 20px;
                font-size: smaller;
                color: white;
                text-align: center;
                height: 1200px;
                max-height: 2280px;
            }

        aside h2 {
            color: white;
            filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.338));
        }

         nav ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
            background: linear-gradient(180deg,rgba(57, 150, 168, 1) 0%, rgba(0, 90, 125, 1) 27%, rgba(0, 90, 125, 1) 83%, rgba(1, 49, 71, 1) 100%);
            display: flex;
            }

        nav ul li a {
                display: block;
                color: white;
                padding: 14px 16px;
                text-decoration: none;
                }

        nav ul li a:hover {
        background-color: #ffffff;
        color:rgb(0, 32, 111)
        }

        footer {
            padding-top: 2%;
            color:rgb(0, 7, 57);
            font-size: small;
            text-align: center;
        }

        #sidebar ul li a {
            color: white;
        }

        #sidebar h2 {
            color: white;
        }

        #sidebar h3 {
            color: white;
        }

        .headerimg {
            height: 35%;
            width: 35%;
            filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.338));
            margin: 0;
        }

        .headerimg:hover {
            animation: pulse; /* referring directly to the animation's @keyframe declaration */
            animation-duration: 1s; /* don't forget to set a duration! */
            animation-iteration-count: infinite;
        }

        .umi {
          position: fixed;
          top: 375px;
          right: -350px;
          z-index: -1;
        }

         .ng {
            color: red;
            -webkit-text-stroke: 4px rgb(115, 0, 59);
        }

        .fix-stroke {
          paint-order: stroke fill;
        }

        .soso {
            color: rgb(255, 247, 161);
            -webkit-text-stroke: 5px rgb(210, 140, 0); /* Stroke width and color */
        }

        .ok {
            color: rgb(13, 255, 0);
            -webkit-text-stroke: 5px rgb(0, 73, 35); /* Stroke width and color */
        }

        .umiblue {
            color: rgb(0, 123, 255);
            -webkit-text-stroke: 5px rgb(0, 32, 111); /* Stroke width and color */
            text-decoration-line: none;
        }

        .box {
            background-color: #ffffff;
            padding: 10px;
            font-size: 15px;
            color:rgb(0, 7, 57);
            max-height: 250px;
            overflow: scroll;
            text-align: left;
        }

        .box a {
            color:rgb(0, 123, 255) !important;
        }

        .hrGuestbook {
            width: 950px;
        }