:root, [data-theme="pink"]{
  --background:#fff2d5;
  --color: black;
  --link:#df6c6c;
  --accent: #0056d6;
  --cut:url('https://cinni.net/img/site/cut-light.png');
  --bgimg:url('https://file.garden/ZV0zGR3QDGCZvdxd/x4wwzy.jpg');
}

@font-face{
  font-family: 'terminal';
  src: url(RomanceA.ttf) format("opentype");
}
@font-face{
    font-family:'degheest';
    src: url(Director-Regular.woff) format("woff");
}
::selection{
color:pink;
  background:blue;
}
*{
  box-sizing: border-box;
}

body{
  width:100%;
  margin:0;
  padding:0;
  background:var(--background);
  color:var(--color);
  font-family: "degheest" , serif;
  background-image:var(--bgimg);
  cursor: url('https://cinni.net/img/site/cur-pointer.png'), pointer;
}

a{
  color:var(--link);
  cursor: url('https://cinni.net/img/site/cur-grab.png'), grab;
}
header h1{
  text-align:center;
  font-family:terminal;
  letter-spacing:5px;
  text-shadow:2px 2px 5px black;
}
main{
  width:100%;
  height:830px;
}
nav{
  background:var(--background);
  border-top:1px groove black;
  width:100%;
  position:fixed;
  bottom:0;
  padding:2px;
}
button{
  background:var(--background);
  color:var(--color);
  border-color: black;
  margin-top:3px;
}

nav details{
  display:inline;
  
}
#menu{
  position:fixed;
  bottom:32px;
  background:var(--background);
  border:1px groove black;
  border-top-left-radius:1px;
  border-top-right-radius:1px;

}
#nameplate{
  background:var(--accent);
  font-weight:bold;
  font-size:1.2rem;
  font-family:terminal;
  letter-spacing:2px;
  padding:0;
  margin:0;
  border-top-left-radius:1px;
  border-top-right-radius:1px;
  border-bottom:1px groove black;
}
#nameplate img{
  margin:5px;
  margin-bottom:0;
  border-radius: 30px;
  height:60px;
  width:60px;
}
#nameplate p{
  margin:0;
  padding:0;
  display:inline;
  position:relative;
  bottom:20px;
  color: white;
}
#menu ul{
  padding:0;
  margin:5px;
  list-style-type:none;
  width:175px;
  color: black;
}
#menu li{
margin-top:2px;
color: black;
}
#menu li img{
  margin-top:2px;
  margin-left:2px;
  color: black;
}
#menu a{
  text-decoration: none;
  color: black;
}
#menu li:hover{
  background: yellow;
}
#menu section{
  background-color: #ffe4a8;
  width:150px;
  padding:5px;
}

summary::marker {
  color: var(--link);

}
summary{
  list-style-type: '★ ';
  border:2px groove;
  padding:0 5px;
}
summary:active{
  color:var(--link);
  border:2px groove black;
}
summary:hover{
  cursor: url('https://cinni.net/img/site/cur-grab.png'), grab;
}
details[open] > summary {
  list-style-type: '☆ ';
  
}

.flex{
  display:flex;
  flex-wrap:wrap;
  color: black;
}

#window{
  width:850px;
  height:600px;
  min-height:100px;
  min-width: 200px;
  resize: both;
  overflow: auto;
  border:1px groove black;
  top:100px;
  left:450px;
  position: absolute;
  box-shadow:5px 5px 5px rgba(0, 0, 0, 0.5);
  max-width:100%;
  background: var(--background);
}

#windowDrag{
  font-family:terminal;
  letter-spacing:2px;
  font-size:1.2rem;
  padding:2px;
  margin:0;
  color:black;
  width:100%;
  background:pink;
  background: var(--accent);
  height:27px;
  cursor: move;
  font-weight:bold;
  min-width:200px;
  border-bottom:1px groove black;
}
#windowDrag span{
  margin:0;
  padding:0;
  top:-3px;
  left:-5px;
  position:relative;
}
#windowDrag img{
  padding:0 2px;
}
#window p{
  margin:0;
  padding:10px;
}

iframe{
  width:100%;
  height:calc(100% - 45px);
  overflow:hidden;
}


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