#sites.css#

:root: {
    --count: 0;
}
.main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    padding: 0 1rem;
    color: limegreen;
    font-size: 40px;
}

.grid-container {
    display: grid;
    grid-template-areas:
	'header header header header header header'
	'menu main main main right right'
	'menu footer footer footer footer footer';
    gap: 10px;
    background-color: #2196F3;
    padding: 10px;
}
.grid-container > div {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
}
/*header {
    background-color: darkblue;
    grid-area: header;
    text-decoration: none;
    color: white;    
}
*/
* {   margin: 0;
      padding: 0;
      font-family: "Noto Sans JP", sans-serif;
  }


.row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.row img {
    max-width: 100%;
}



.header {
    height: 20px;
    width: 100%;
    /*  background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)),     url(./img/homepagebackground.png); */
    background-position: center;
    background-size: cover;
    position: relative; }

body {
    
    background-image: url("img/Moon.Close.Up.jpg");
}
top {
    background-color: gray;
}
.box {
    display: flex;
    width: 90%;
    
    opacity: 0.7;
    background-color: #112222;
    border-radius: 10px;
    margin: 0 auto;
    align-items: center;
    flex-direction: column;
    
    
}
.box embed {
    max-width: 15%;
}
.box img {
    padding: 1%;
    justify-content: center;
    align-items: center;
    display: block;
    max-width: 80%;
    max-height: 80%;
}
// Navigation Bar
nav {
    
    
    background-color: grey;
    
    grid-area: menu;
}
aa {
    color: darkgoldenrod;
    font-weight: bold;
    font-size: 40px;
}


// section {
    //   content: "";
    //   display: table;
    //   clear: both;
    //}
h1 {
    color: blue;
    margin-left: 20px;
}
p {
    font-family: verdana;
    font-weight: bold;
    font-size: 10px;
    color: #6495ED;
    /*background-color: #ADD8F9;*/
}
name {
    font-family: verdana;
    font-weight: bold;
    font-size: 30px;
    color: #6495ED;
    /*background-color: #ADD8F9;*/
}
a {
    font-family: verdana;
    text-decoration: none;
    font-size: 12px;
    color: green;
}
.button {
    transition-duration:0.4s;
    border: none;
    color: lightblue;
    padding: 60px 256px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 80px 40px;
    cursor: pointer;
}
.button1 {background-color: lightblue;}
.button:hover {
    background-color: #463E3F;
    color: lightblue;
}

/* Style the navigation bar */
.navbar {
    width: 100%;
    background-color: #555;
    overflow: hidden;
}

/* Navbar links */
.navbar a {
    float: left;
    text-align: center;
    padding: 12px;
    color: white;
    text-decoration: none;
    font-size: 17px;
}

/* Navbar links on mouse-over */
.navbar a:hover {
    background-color: #2af;
}

/* Current/active navbar link */
.active {
    background-color: #04AA6D;
}

/* Add responsiveness - display vertically on screens less than 500px */
@media screen and (max-width: 50px) {
    .navbar a {
	float: none;
	display: block;
    }
}
ul {list-style-type: none;}
body {font-family: Verdana, sans-serif;}

.month {
  padding: 10px 5px;
/*  width: 100%; 
  background: #1abc9c; */
  text-align: center;
}

.month ul {
  margin: 0;
  padding: 0;
}

.month ul li {
  color: white;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.month .prev {
  float: left;
  padding-top: 10px;
}
4
.month .next {
  float: right;
  padding-top: 10px;
}

.weekdays {
  margin: 0;
  padding: 10px 0;
  background-color: #ddd;
}

.weekdays li {
  display: inline-block;
  width: 13.6%;
  color: #666;
  text-align: center;
}

.days {
  padding: 10px 0;

  margin: 0;

}

.days li {
  list-style-type: none;
  display: inline-block;
  width: 13.6%;
  text-align: center;
  margin-bottom: 5px;
  font-size:12px;
  color: #777;
}

.days li .active {
  padding: 5px;
  background: #1abc9c;
  color: white !important
}

/* Add media queries for smaller screens */
@media screen and (max-width:720px) {
  .weekdays li, .days li {width: 13.1%;}
}

@media screen and (max-width: 420px) {
  .weekdays li, .days li {width: 12.5%;}
  .days li .active {padding: 2px;}
}

@media screen and (max-width: 290px) {
  .weekdays li, .days li {width: 12.2%;}
}