/* 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 {
  background-color: white;
  color: black;
  font-family: Verdana;
}body {
                background: url(/index/bg.webp);
                font-family: Nunito;
            }
            .container {
                max-width: 980px;
                margin: auto;
                margin-top: 40px;
                height: 800px;
                background-color: white;
                border-radius: 20px 20px 0px 0px;
                border: 1px solid #3837ff;
            }
            header {
                background: linear-gradient(to bottom, rgb(255, 231, 255) 0%, rgb(255, 114, 212) 50%, rgb(255, 87, 201) 51%, rgb(255, 114, 213) 80%), rgb(0, 0, 0) 90%;
                border-radius: 20px 20px 0px 0px;
                padding: 7px;
                display: flex;
                border-bottom: 1px solid #3837ff;
                height: 13%;
            }
            header img {
                width: 100px;
            }
            h1 {
                color: white;
                display: block;
                font-size: 2.5em;
                margin: 0px 0px 5px 0px;
                font-family: Shippori Antique B1;
            }
            .container2 {
                height: 85%;
                display: flex;
                padding: 1px;
                position: relative;
            }
            .left {
                width: 25%;
                background: url(/index/left.webp);
                border-right: 1px solid #3837ff;
                background-size: 100% 100%;
            }
            .time {
                border: 1px groove rgb(65, 119, 148);
                border-radius: 5px;
                padding: 8px 16px;
                width: 15%;
                height: 55%;
                color: #214050;
                background-image: linear-gradient(to bottom, rgb(235, 255, 234) 0%, rgb(123, 255, 176) 28%, rgb(85, 255, 151) 50%, rgb(0, 237, 129) 51%, rgba(150, 255, 207, 1) 100%);
                text-align: center;
                margin-top: 5px;
                font-size: 1.2em;
                margin-left: 5px;
                position: sticky;
                left: 0;
            }
            .time:after {
                content: "";
                position: absolute;
                top: 2px;
                border-radius: 5px;
                width: 95%;
                height: 40%;
                background-image: linear-gradient(to bottom, white, transparent);
                left: 4px;
            }
            .about {
                background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgb(182, 241, 255) 100%);
                height: 30%;
                margin: 0 auto;
                margin-top: 5px;
                width: 90%;
                border: 1px solid #9d9d9d;
                box-shadow: 0px 0px 4px 0px rgba(45, 99, 208, 0.5), inset 0 0 5px 1px white;
            }
            .title {
                padding: 4px 4px 2px;
                width: 100%;
                font-size: 1.2em;
                margin-top: 5px;
                background: linear-gradient(to right, rgb(255, 138, 192) 0%, rgb(252, 218, 236) 50%, rgba(220, 252, 252, 0) 100%);
                border-radius: 0px 0px 0px 0px;
                color: #502143;
                font-style: italic;
                position: sticky;
                top: 10px;
            }
            p {
                margin: 5px;
            }
            .chatbox {
                background-color: aliceblue;
                width: 95%;
                height: 30%;
                margin: 0 auto;
                display: block;
                margin-top: 5px;
                width: 90%;
                border: 1px solid #ccc;
                box-shadow: inset 0 0 5px 1px white;
            }
            .nwrapper {
                width: 80%;
                height: 30%;
                margin: 0 auto;
                margin-top: 15px;
                padding: 10px;
                border: 2px groove #77ceed;
                background: linear-gradient(0deg, rgba(232, 232, 232) 7%, rgba(242, 242, 242) 24%, rgba(255, 255, 255) 92%);
                backdrop-filter: blur(2px);
            }
            .news {
                width: 100%;
                height: 100%;
                background: url(/index/news.webp);
                overflow: auto;
                background-size: 11%;
            }
            .news p {
                display: inline-block;
                margin: 0;
            }
            .news span {
                color: white;
                text-shadow: -1px -1px 0 #1a74ff, 1px -1px 0 #1a74ff, -1px 1px 0 #1a74ff, 1px 1px 0 #1a74ff;
                background: linear-gradient(0deg, #fff0ae 1%, #63c4ff 49%, #27a3ff 51%, #bce8fb 90%);
                border-radius: 6px;
                border: 1px solid #1a74ff;
                margin-right: 5px;
                font-size: 15px;
                display: inline-block;
                padding: 0px 5px 0px 5px;
                font-style: italic;
            }
            .right {
                width: 75%;
            }
            .top {
                border-bottom: 1px solid #3837ff;
                height: 10%;
                background-image: linear-gradient(to bottom, rgba(246, 248, 249) 0%, rgba(229, 235, 238) 50%, rgba(215, 222, 227) 51%, rgba(245, 247, 249) 100%);
                display: flex;
                gap: 1%;
                flex-wrap: wrap;
                white-space: nowrap;
                overflow-x: scroll;
            }
            .side {
                height: 80%;
                width: 78%;
                margin-top: 5px;
            }
            .side a {
                background: linear-gradient(0deg, rgb(255, 239, 204) 1%, rgb(244, 255, 122) 14%, rgb(255, 207, 76) 45%, rgb(255, 251, 233) 89%);

                padding: 5px;
                height: 70%;
                width: 25%;
                display: inline-block;
                text-align: center;
                font-size: 1.5em;
                padding-top: 10px;
                color: red;
                color: #ffff99;
                text-shadow: -1px -1px 0 #ff6300, 1px -1px 0 #ff6300, -1px 1px 0 #ff6300, 1px 1px 0 #ff6300, 0px 0px 1px #ff6300, 0px 0px 1px #ff6300, 0px 0px 1px #ff6300;
                border: 1px solid #c8671f;
                border-radius: 5px;
                margin-right: 5px;
            }
            .side a:hover {
                font-style: italic;
                background: linear-gradient(0deg, rgb(229, 255, 204) 1%, rgb(188, 255, 122) 14%, rgb(158, 255, 76) 45%, rgb(237, 255, 233) 89%);
            }
            #clippy {
                background: url(/index/clippy.webp);
                background-size: cover;
                position: absolute;
                right: -5em;
                bottom: -10px;
                height: 21%;
                width: 13%;
                z-index: 1;
                border: 0;
                animation-duration: 1s;
                animation-timing-function: ease-in-out;
                animation-iteration-count: infinite;
            }
            #clippy:hover {
                animation-name: bounces;
            }

            @keyframes bounces {
                0%,
                100%,
                20%,
                50%,
                80% {
                    -webkit-transform: translateY(0);
                    transform: translateY(0);
                }
                40% {
                    -webkit-transform: translateY(-30px);
                    transform: translateY(-30px);
                }
                60% {
                    -webkit-transform: translateY(-15px);
                    transform: translateY(-15px);
                }
            }
            #alert {
                position: absolute;
                bottom: 9em;
                right: 1em;
                background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgb(255, 227, 182) 100%);
                width: 25%;
                box-shadow: 0px 0px 4px 0px rgba(208, 45, 45, 0.5), inset 0 0 5px 1px white;
                z-index: 100;
            }
            .title2 {
                background: linear-gradient(to bottom, rgba(255, 153, 153, 0.93) 0%, rgba(255, 100, 100, 0.93) 10%, rgba(255, 47, 47, 0.93) 55%, rgba(255, 0, 0, 0.93) 56%, rgba(217, 31, 31, 0.93) 60%, rgba(113, 3, 3, 0.93) 100%);
                color: white;
                padding: 0.1px;
            }
            .nwrapper h1 {
                position: absolute;

                /* text-shadow: -1px 0 #381a03, 0 1px #381a03, 1px 0 white, 0 -1px white, 0 0;*/
                filter: drop-shadow(-1px 0 #e79100) drop-shadow(0 1px #e79100) drop-shadow(1px 0 #e79100) drop-shadow(0 -1px #e79100);
                color: rgba(0, 0, 0, 0);
                position: absolute;
                font-size: 2em;
                bottom: -15px;
                left: -5px;
                background: linear-gradient(180deg, rgb(255, 255, 255) 8%, rgb(255, 226, 178) 56%, rgb(255, 205, 110) 76%, rgb(255, 160, 49) 93%);
                background-clip: text;
                -webkit-background-clip: text;
                width: 150%;
            }
            .bottom {
                width: 100%;
                height: 89.5%;
                background: url(/index/grid.webp);
                background-color: white;
                display: flex;
                animation: background 60s linear infinite;
                gap: 1%;
            }

            @keyframes background {
                0% {
                    background-position: 0% 0%;
                }
                100% {
                    background-position: 100% 0%;
                }
            }
            #posts {
                width: 70%;
                overflow: auto;
            }
            .two {
                width: 29%;
                background-color: rgba(185, 255, 247, 0.5);
                backdrop-filter: blur(0.8px);
                box-shadow: rgba(0, 0, 0, 0.2) 0px 15px 10px, rgba(0, 0, 0, 0.2) 0px 15px 21px;
            }
            .box {
                width: 90%;
                height: 29%;
                overflow: auto;
                background-color: rgba(131, 255, 241, 0.5);
                margin: 0 auto;
                margin-top: 10px;
                border-radius: 10px;
                border: 1px solid #ccc;
                word-break: break-word;
            }
            .box:hover {
                box-shadow: rgba(0, 38, 48, 0.2) 0px 0px 10px;
            }
            #middle {
                background-color: rgba(57, 255, 232, 0.5);
            }
            #last {
                background-color: rgba(0, 216, 191, 0.5);
            }
            .box .title {
                width: 96%;
                background: linear-gradient(to right, rgb(255, 207, 97) 0%, rgb(255, 252, 214) 50%, rgba(220, 252, 252, 0) 100%);
                margin-top: 10px;
            }
            #middle .title {
                width: 96%;
                background: linear-gradient(to right, rgb(255, 236, 152) 0%, rgb(249, 255, 230) 50%, rgba(220, 252, 252, 0) 100%);
            }
            #last .title {
                width: 96%;
                background: linear-gradient(to right, rgb(255, 243, 203) 0%, rgb(255, 249, 237) 50%, rgba(220, 252, 252, 0) 100%);
            }
            #buttons {
                height: 6%;
                justify-content: center;
                display: flex;
            }
            button {
                background-image: linear-gradient(0deg, rgba(255, 228, 161, 1) 2%, rgba(255, 170, 92) 14%, rgba(255, 200, 76) 45%, rgba(255, 255, 233) 92%);
                height: 90%;
                font-size: 0.9em;
                border: 1px solid #c8671f;
                display: inline-block;
                margin: 0 auto;
                margin-top: 5px;
                cursor: pointer;
                border-radius: 5px;
            }
            button:hover {
                background-image: linear-gradient(0deg, rgba(255, 170, 92, 1) 14%, rgba(255, 200, 76) 45%);
            }
            .sections {
                width: 90%;
                margin: 0 auto;
                height: 50%;
                border: 2px #a5d5ff groove;
                margin-top: 10px;
                margin-bottom: 10px;
                display: none;
                border-radius: 5px;
                background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgb(209, 255, 218) 100%);
                position: relative;
                overflow: auto;
            }

            .sections.show {
                display: block;
            }
            .sections h1 {
                color: #0c73bf;
                font-size: 1.5em;
                margin: 5px;
            }
            .top2 {
                background: linear-gradient(white, #a8d8f0);
                padding-bottom: 2px;
                border-bottom: 2px #a5d5ff groove;
                display: flex;
                flex-wrap: wrap;
                position: sticky;
                top: 0;
            }
            .top2 P {
                font-size: 14px;
                margin-top: 19px;
                display: block;
            }

            .box2 {
                border: 1px solid #bfb2b8;
                color: #a89ba1;
                font-size: 20px;
                font-family: Ms gothic;
                position: absolute;
                right: 5px;
                top: 5px;
                padding: 5px 8px 3px 9px;
                background-color: #f9f9f9;
            }
            .box2:hover {
                background-color: #c60000;
                cursor: pointer;
                color: white;
            }

            @media (max-width: 880px) {
                .time {
                    display: none;
                }
                .bottom {
                    flex-wrap: wrap;
                    overflow: auto;
                }
                .two {
                    width: 100%;
                    height: fit-content;
                    padding: 5px;
                    order:1;
                }
                .two button {
                    width: 30%;
                }
                .two:hover .box {
                    display: block;
                }
                .box {
                    display: none;
                }
                #posts {
                    width: 100%;
                    height:150%;
                    order:2;
                }
                
            }
            @media (max-width: 780px) {
                .container{
                    height: fit-content;
                }
                .container2{
                    flex-wrap:wrap;
                    width:100%;
                }
                .right{
                    order:1;
                    width:100%;
                }
                .left{
                    order:2;
                    width:100%;
                border-top: 1px solid #3837ff;
                    padding:5px;
                    
                }
                #posts{order:2;}
                .nwrapper{
                    width:87%;
                    height:20%;
                }
                #clippy{
                    display: none;
                }
                #alert{
                    display: none;
                }
                .nwrapper h1{
                    width:auto'
                }
                .two{
                    padding:15px;
                }
                
                .sections{
                    height:fit-content;
                }
            }