/* 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;*/
/*}*/


html,body,div,span,iframe,h1,h2,h3,h4,p,pre,del,em,img,b,i,dl,dt,dd,ol,ul,li,form,table,tbody,tr,th,td,article,aside,footer,header,nav,section{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#42426a #333}
article,aside,footer,header,nav,section{display:block}
body{line-height:1;overflow-wrap:break-word;word-wrap:break-word}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;vertical-align:middle;box-sizing:border-box}
a{margin:0;padding:0;text-decoration:none;outline:none;font-size:100%;vertical-align:baseline;background:transparent}
a img{border-style:none}
ul,li{list-style-type:none}
hr{border:0;display:block;margin:1em 0;padding:0;height:1px}
.cf:before,.cf:after{content:" ";display:table}.cf:after{clear:both}


@font-face {
    font-family: 'Moon Light';
    src:url('fonts/Moon Light.otf');
}

@font-face {
    font-family: 'Moon Bold';
    src:url('fonts/Moon Bold.otf');
}

@font-face {
    font-family:'Dosis',sans-serif;
    src:url('fonts/Dosis-VariableFont_wght.ttf')
}

html{
height:100%;
font-size:80%
}
body{
background: #271445 url(cute-wallpaper.gif);

background-size: auto 125vw;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Optional: keeps the background fixed when scrolling */
  /*height: 100vh; /* Ensures the element takes up the full viewport height */
  /*width: 100vw; /* Ensures the element takes up the full viewport width */
  
color:#b8c1ec;
font-size:1.4em;
font-family:'Dosis','游ゴシック Medium','Yu Gothic Medium','游ゴシック体',YuGothic,'Hiragino Kaku Gothic ProN','メイリオ',Meiryo,sans-serif;
letter-spacing:.1em;
line-height:1.5;
text-align:center;
height:100%;
}
/*  リンク
------------------------------ */
a{
color:inherit
}
a:hover{
color:#ccc
}



 /* The side navigation menu */
.sidebar {
  
      width: 150px; /* Or a percentage like 20% */
    padding: 10px;
    font-size: 0.9em;
    position: absolute;
    top: 20%/*150px; /* Adjust as needed */
    left: 20%/*200px; /* Or left, bottom, etc. */
    
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #3b0d36;
  /*position: fixed;*/
  opacity: 0.6; /* 50% transparent */
  /*height: 100%;*/
  /*overflow: auto;*/
  /*top: 0;*/
}

/* Sidebar links */
.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}

/* Active/current link */
.sidebar a.active {
  background-color: #3b0635;
  color: white;
  opacity: 0.8; /* 50% transparent */
}

/* Links on mouse-over */
.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
  opacity: 0.8; /* 20% transparent */
}

/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
div.content {
  margin-left: 200px;
  padding: 1px 16px;
  height: 1000px;
}

/* On screens that are less than 700px wide, make the sidebar into a topbar */
@media screen and (max-width: 700px) {
  .sidebar {
    /*width: 100%;*/
    /*height: auto;*/
    /*position: relative;*/
    width: 150px; /* Or a percentage like 20% */
    padding: 10px;
    font-size: 0.9em;
    position: absolute;
    top: 20px; /* Adjust as needed */
    right: 20px; /* Or left, bottom, etc. */
  }
  .sidebar a {float: left;}
  div.content {margin-left: 0;}
}

/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
/*@media screen and (max-width: 400px) {*/
/*  .sidebar a {*/
/*    text-align: center;*/
/*    float: none;*/
/*  }*/
/*} */

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}
 /* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5px auto; /* 15% from the top and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  /* Position it in the top right corner outside of the modal */
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

/* Close button on hover */
.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
}