@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');

body {
    margin: 0;
    padding-top: 56px;
    background: #aaaaaa;
    color: #202020;
    font-size:small;
    font-family: "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", "sans-serif";  
 }

header {
  font-size:small;
  font-family: "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", "sans-serif";  
  left: 50%;
    transform: translateX(-50%);
    position: fixed;
    margin: auto;
    top: 0;
    display: flex;
    align-items: center;
    width:100%;
    text-align:center;

    height:50px;
    box-shadow: 0px 5px 5px rgba(0,0,0,0.5); /* Add shadow under .mainCanvas */
    border: 1px solid #80ff80; 
    background-image: linear-gradient(180deg, #ccc, #aaa 50%, #888);
    z-index: 1001;

  }
h1 {
  align-items: center;
  margin: 0; padding: 0;
  font-size: 30px; 
  color: #222222;
}

.mainCanvas {
  border: 1px solid #d9ff00;
  height: auto;
  width: 98%;
  max-width:1280px;
  margin: auto;
  background-image: linear-gradient(180deg, #222222, #6c6c6c, #3c3c3c);
  position: relative;
  /* animation: rotate 30s linear infinite; */
  background: #aaaaaa;
  z-index: 1000;
  box-shadow: 0px 5px 5px rgba(0,0,0,0.5); /* Add shadow under .mainCanvas */
  
}

.card {
  background-image: linear-gradient(120deg, #dddddd, #ffeeee, #ffffff);
  opacity: 0;
  transform: translateY(50px);
  animation: fadeInUp 500ms forwards;
}

@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(50px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

@keyframes rotate {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}

.login-btn {
  background-color: silver;
  font-size: 12px;
  border-radius: 5px;
  box-shadow: 3px 3px 3px gray;
  transition: 0.3s;

}



.login-btn:hover {
  background-color: orange;
}

.login-shadowbox {
  border: 1px solid #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
  text-align:center;
  font-weight: bolder;
  width: 80%;
  max-width: 300px;
  }

.login-shadowbox-round {
  border: 1px solid #333;
  border-radius:15px;

  position: fixed; /* or absolute */
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);

  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(0deg, #999, #bbb, #ddd);
  text-align:center;
  font-weight: bolder;
  width: 80%;
  max-width: 300px;
  }
  
  .login-dialog {
    position: fixed; /* or absolute */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* other styles */
  }

  #createNotesCard {
    transition: opacity 0.5s, height 0.5s;
    opacity: 1;
    height: auto;
}

.hidden {
    opacity: 0;
    height: 0;
    overflow: hidden;
}