*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
	font-family: "Noto Sans Thai", sans-serif;
}

.noto-sans-thai-<uniquifier> {
  font-family: "Noto Sans Thai", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
"wdth" 100;
}

body{
background: #00363d;
background: linear-gradient(90deg, rgba(0, 54, 61, 1) 0%, rgba(0, 82, 34, 1) 100%);
}

nav {
	text-align: center;
	height: 500px;
	font-size: 2rem;
	size: 50rem;
	padding: 2rem 0;
	background: #123;
	& .logo{
		margin-bottom: 1rem;
		& img {
			border-radius: 50%;
			width: 80px
		}
	}
	& .menu{
		& ion-icon {
			color: #fff;
		}
		& li {
			margin: 0.5rem 0;
			 & a {
			 	color: #fff;
			 }
		}
	}
}

aside , section {
	color: #fff;
	font-size: 3rem;
	padding: 1rem;
	text-shadow: 4px 4px #222;
	& .donate{
		color: #00ffb0;
	}
	& .policy{
		color: #00ffb0;
		font-size: 1rem;
		text-align: left;
	}
}

footer{
	text-align: center;
	padding: 1rem;
	color: #fff;
	background: #333;
}


@media screen and (min-width:680px){
	nav{
		align-items: center;
		height: 150px;
		display: flex;
		justify-content: space-between;

		& .logo{
			margin-bottom: 0;
			margin-left: 1rem;
			& img {
				width: 100px
			}
		}

		& .menu{
			list-style: none;
			display: flex;
			font-size: 3rem;
			& li{
				margin-right: 1rem;
			}
		}
	}
	main {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

aside , section {
	& .policy{
		color: #00ffb0;
		font-size: 2rem;
		text-align: left;
	}
}
}

.menu {
    text-shadow: 0 0 5px #ff005e, 0 0 10px #ff005e, 0 0 20px #ff005e, 0 0 40px #ff005e, 0 0 80px #ff005e;
    animation: glow 5.0s infinite alternate;
}

@keyframes glow {
    0% {
        text-shadow: 0 0 5px #ff005e, 0 0 10px #ff005e, 0 0 20px #ff005e, 0 0 40px #ff005e, 0 0 80px #ff005e;
    }
    100% {
        text-shadow: 0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 40px #00d4ff, 0 0 80px #00d4ff, 0 0 160px #00d4ff;
    }
}