@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

h1, h2, h3 {
  font-weight: 500;
}


body {
	background-color: #42c2f1;
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  color:black;
  gap:10px;
  line-height: 1.6;
  letter-spacing: 0.2px;
  font-size: 16px;
}
.topbar {
    position: relative;
    height: 64px;
    width: 100%;

    /* 3-slice background */
    background:
        url("/site_assets/topbar/mid.png") no-repeat left top,
        url("/site_assets/topbar/mid.png") no-repeat right top,
        url("/site_assets/topbar/mid.png") repeat-x left top;
}

/* link base */
.topbar .nav {
    position: absolute;
    top: 0;
    height: 64px;
    line-height: 64px;

    padding: 0 12px;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}

/* place links ANYWHERE */
.topbar .home    { left: 20px; }
.topbar .test    { left: 140px; }
.topbar .profile { right: 20px; }


.all {
	width:100%;
	max-width: 1100px;
    margin: 0 auto; 
}

a:link {
  color: #000;
  text-decoration: none;
}

a:visited {
  color: #000;
  text-decoration: none;
}

a:hover {
  color: #000;
  text-decoration: underline;
}

a:active {
  color: #000;
  text-decoration: underline;
}
.thingonleft2 {
	padding:12px;
	text-align: left;
    float: left;
    right: 0;       /* stay on the right */
    width: 60%;
}

.thing2 {
	float: left;
width: 35%;
box-sizing: border-box;
}

.thingonleft {
color:white;
padding: 24px;
padding-top: 64px;
padding-bottom: 64px;
float: left;       /* float left for side-by-side */
width: 60%;        /* half-half layout, change as needed */
box-sizing: border-box; /* makes padding/margin predictable */
}

.thing {
    position: absolute;
    bottom: 0;      /* stick to bottom */
    right: 0;       /* stay on the right */
    width: 40%;
}
.container {
		margin-top: 64px;
    position: relative; /* anchor for absolute child */
}

.thing {
    position: absolute;
    bottom: 0;      /* stick to bottom */
    right: 0;       /* stay on the right */
    width: 40%;
}

.container::after {
    content: "";
    display: table;
    clear: both;       /* clears floats */
}

.main {
    text-align: center;
    background-color: white;
    padding: 10px;
    width: 98%;
    overflow: hidden;
}
.main2 {
text-align: left;
}

.container-np{
  border-width: thin;
  border-style: solid;
   overflow: hidden;
}


button{
    cursor: pointer;
       padding-top: 8px !important;   
    margin-top: 4px !important;
  padding-bottom: 8px !important;
    margin-bottom: 4px !important;
  font-size:24px;  
  border-width: thin;
  border-style: solid;
  -webkit-box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 1);
-moz-box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 1);
box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 1);
   overflow: hidden;
 background-color: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}

textarea{
  font-size:20px;  
   max-width:480px;
   width:95%;
  border-width: thin;
  border-style: solid;
  -webkit-box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 1);
-moz-box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 1);
box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 1);
   overflow: hidden;
}

select{
     font-size:24px;   
  border-width: thin;
  border-style: solid;
  -webkit-box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 1);
-moz-box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 1);
box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 1);
   overflow: hidden;
}


input{
  font-size:20px;  
     max-width:480px;
   width:95%;
  border-width: thin;
  border-style: solid;
  -webkit-box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 1);
-moz-box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 1);
box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 1);
   overflow: hidden;
}

/* Buttons container */
.buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px; /* space between buttons */
  flex-wrap: wrap; /* allows wrapping on small screens */
}

/* Optional: nicer buttons */
.buttons button {
  white-space: nowrap; /* prevents weird text wrapping */
}

body.paused * {
  animation-play-state: paused !important;
  transition: none !important;
}


.scale-up-center {
  -webkit-animation: scale-up-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation: scale-up-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2025-12-25 5:12:6
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-up-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}



@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}