@font-face {
                font-family: Nunito;
                src: url('https://sadhost.neocities.org/fonts/Nunito-Regular.ttf');
            }

            @font-face {
                font-family: Nunito;
                src: url('https://sadhost.neocities.org/fonts/Nunito-Bold.ttf');
                font-weight: bold;
            }

            @font-face {
                font-family: Nunito;
                src: url('https://sadhost.neocities.org/fonts/Nunito-Italic.ttf');
                font-style: italic;
            }

            @font-face {
                font-family: Nunito;
                src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf');
                font-style: italic;
                font-weight: bold;
            }

body {
    font-family: 'Nunito', sans-serif;
    margin: 0;
    background-color: #fff;
    background: url(https://mimiland.neocities.org/image/a01-bg-simple.gif);
    color: #bbb;
    overflow-y:scroll;
    overflow-wrap:break-word;
    word-wrap:break-word;
}
* {
    box-sizing: border-box;
}
h1{
    font-size: 23px;
    margin:4px;
}
h2{
    font-size: 20px;
    margin: 4px;
}
p{
    font-size:15px;
    margin:4px;
	color:#181a22;
}
#wrapper{
    background:url(https://mimiland.neocities.org/image/l13-bg-paper.gif);
    margin:20px auto;
    width:620px;
	border-radius: 5px;
	border:1px solid #000;
}
header{
    padding:20px 20px 0 20px;
    text-align:left;
	
}
.header-inner{
    background:url(https://mimiland.neocities.org/image/bnnr.jpg);
    background-size:cover;
    min-height:150px;
    padding:20px;
	border:1px solid #000;
}
#menu{
    color:#d8d9e2;
    width:100%;
    text-align: center;
}
nav li{
    display:inline-block; 
    position:relative;  
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: bold;
}
nav li a,nav li span{
    color:#d8d9e2;
    display:inline-block;
}
nav li+li:before{
    content:"│";
}
nav li a:hover,nav li span:hover{
    color:#5191bc;
    transition: 0.6s;
}
ul{
    padding:2px;
}
a{
	color:#2e3148;
}
a:hover{
	color:#bbb;
	transition: 0.6s;
}
.txt{
	font-size: 28px;
	font-family: 'Candara';
	font-weight: bold;
    filter: drop-shadow(1px 1px 0 #2e3148) drop-shadow(-1px 1px 0 #2e3148) drop-shadow(0 -1px 0 #2e3148) drop-shadow(1px 0 #2e3148);
    margin: 5px;
    color: #ffffff;
}
#contents{
    margin-top: -18px;
    padding:20px;
	order:1;
}
.frame{
    width:auto;
    height:600px;
    display: flex;
}
iframe{
    width: 590px;
    height: 600px;
    overflow: auto;
    border:1px solid #000;
    border-radius: 5px;
    scrollbar-width: thin;
    background-color: #fff;
}
.box{
    padding:20px 25px 10px 55px;
    background:url(https://mimiland.neocities.org/image/notepad.png);
	background-size: contain;
    height:370px;
	width:300px;
    position: absolute;
    top:30px;
    left:30px;
}
.box-in{
	color:#2e3148;
	height:330px;
	overflow: auto;
	scrollbar-width: thin;
	font-size: 13px;
}
.box2{
    padding:51px;
    background:url(https://mimiland.neocities.org/image/frame.png);
    background-size: contain;
    width:290px;
    height: 340px;
    position: absolute;
    top:410px;
    left:42px;
}
.box2-in{
    background:url(https://mimiland.neocities.org/image/bg/back02.gif);
    border-radius: 5px;
    color:#2e3148;
	font-size: 14px;
    overflow: auto;
    height: 243px;
	padding-left: 8px;
    scrollbar-width: thin;
}
.box3{
	width:300px;
}
.cam{
	background:url(https://mimiland.neocities.org/image/cam.png);
	background-size: contain;
	height: 300px;
	width: 300px;
	position: absolute;
	right:30px;
	top:30px;
	padding:61px 112px 0 34px;
}
.cam-in{
	background:url(https://mimiland.neocities.org/image/sanemimi.webp);
	background-position: center;
	background-size:370px;
	border-radius: 16px;
	height: 206px;
	padding: 8px;
	color:#000;
}
.angy{
	background:url(https://mimiland.neocities.org/image/angy.png);
	background-size: contain;
	width:350px;
	height: 350px;
	position: fixed;
	bottom:0;
	right:0;
}
.crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

@media screen and (max-width: 600px){
body{
    margin:20px;
}
header{
    position:relative;
}
.header-inner{
    margin-top:30px;
}
#wrapper{
    width:100%;
	order:1;
}
.box{
	display: none;
}
.box2{
	display: none;
}
.cam{
	display: none;
}
img{max-width:100%;height:auto} 
}