@charset "UTF-8";

@font-face{
font-family: "Icons";
src: url("fonts/Icons.eot?slo3wg");
src: url("fonts/Icons.eot?slo3wg#iefix") format("embedded-opentype"),
url("fonts/Icons.ttf?slo3wg") format("truetype"),
url("fonts/Icons.woff?slo3wg") format("woff"),
url("fonts/Icons.svg?slo3wg#Icons") format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}

body,html{
height: 100%;
}

body{
background-color: #f5fff5;
font-family: Sans-serif;
overflow: auto;
margin: 0px;
padding: 0px;
}

h1{
font-size: 210%;
color: #1b8050;
line-height: 150%;
font-weight: bold;
padding-top: 6px;
}

h2{
font-size: 170%;
color: #a52a2a;
line-height: 150%;
font-weight: bold;
position: relative;
padding: 40px 0 0 1.3em;
}

h2:first-of-type{
padding: 16px 0 0 1.3em;
}

h2::before{
font-family: "Icons" !important;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
content: "\e900";
color: #ff1493;
position: absolute;
left: 0px;
}

h3{
font-size: 130%;
color: #292929;
line-height: 170%;
font-weight: bold;
position: relative;
padding: 16px 0 0 1.4em;
}

h3::before{
font-family: "Icons" !important;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
content: "\e901";
color: #abcdef;
position: absolute;
left: 0px;
}

p{
font-size: 100%;
color: #292929;
line-height: 170%;
}

div{
font-size: 100%;
color: #292929;
line-height: 170%;
}

dl{
margin: 0;
}

dt{
font-size: 100%;
font-weight: bold;
color: #292929;
margin: 16px 0 0.2em 0;
}

dd{
font-size: 100%;
color: #292929;
margin-left: 0;
}

ul{
padding-left: 1.5em;
}

ul li{
font-size: 100%;
color: #292929;
line-height: 170%;
}

img{
max-width: 100%;
height: auto;
border: none;
}

a:link{
color: #116aff;
}

a:visited{
color: #5a4fb2;
}

a:hover{
color: #1124cc;
background-color: #c0ffee;
}

a:active{
color: #1124cc;
}

a[target="_blank"]::after {
font-family: "Icons" !important;
font-size: 85%;
content: "\e902";
}

input,textarea{
font-family: inherit;
font-size: 85%;
max-width: 100%;
}

video{
width: 100%;
max-width: 800px;
height: auto;
aspect-ratio: 16 / 9;
display: block;
}

.description{
padding-top: 16px;
}

.footer{
font-size: 85%;
text-align: center;
margin-top: 40px;
}

.nowrap{
white-space: nowrap;
}

.latestdiary{
padding-bottom: 24px;
}

.diarynav{
text-align: center;
padding-top: 16px;
}

.diarylist{
display: grid;
grid-template-columns: auto 1fr;
column-gap: 1.5em;
align-items: start;
}

.diarylist dt,
.diarylist dd{
margin: 0;
}

.mail::after{
content: "@cactuscoffee.net"
}

.required{
color: #ff1493;
}

.button{
font-size: 100%;
}

.error{
color: #ff1493;
font-weight: bold;
}

@media screen and (min-width: 768px){

.menutitle{
font-family: "Century Gothic",Sans-serif;
font-size: 210%;
color: #1124cc;
line-height: 100%;
font-weight: bold;
padding-top: 4px;
padding-bottom: 8px;
}

.menutitle::before,
.menutitle::after{
content: "-";
}

.menulist{
list-style: none;
padding: 0em;
}

.menulist li{
font-family: "Century Gothic",Sans-serif;
font-size: 180%;
font-weight: bold;
line-height: 100%;
padding: 8px 0em;
}

.menulist a:link{
color: #ff6250;
}

.menulist a:visited{
color: #ff6250;
}

.menulist a:hover{
color: #ff1493;
background-color: #ffddff;
}

.menulist a:active{
color: #ff1493;
}

#menubox{
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 232px;
overflow: auto;
background-image: url(img/bg.png);
}

#menu{
text-align: center;
padding: 12px;
}

#mainbox{
height: 100%;
overflow: auto;
margin-left: 232px;
}

#main{
max-width: 800px;
padding: 12px 12px 12px max(12px,calc(50vw - 516px));
}

}

@media screen and (max-width: 767px){

body{
height: 100%;
width: 100%;
overflow: auto;
}

h1{
font-size: 200%;
}

h2{
font-size: 160%;
}

h3{
font-size: 125%;
}

.menulist a:link{
color: #116aff;
}

.menulist a:visited{
color: #116aff;
}

.menulist a:hover{
color: #1124cc;
background-color: #c0ffee;
}

.menulist a:active{
color: #1124cc;
}

.menutitle{
display: none;
}

.menulist{
list-style: none;
padding: 0px;
text-align: center;
}

.menulist li{
font-size: 140%;
font-weight: bold;
display: inline;
line-height: 170%;
}

#menu{
padding: 12px 12px 3px 12px;
}

#main{
padding: 3px 12px 12px 12px;
}

}

@media print{

#menubox,
#menu{
display: none;
}

#mainbox{
height: 100%;
width: 100%;
overflow: visible;
margin-left: 0px;
}

#main{
padding: 0px;
}

}