*, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    .layout {
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 100%;
    }

    .layout-top {
  width: 100%;
  flex-shrink: 0;
  display: flex; /* ← aligns the 3 divs horizontally */
    }

    .layout-bottom {
      display: flex;
      flex: 1;
		overflow: hidden;
    }

    .layout-left {
  width: 20vw;
  flex-shrink: 0;
  height: 100%;
  overflow-y: auto; /* ← scrolls inside if content overflows */
    }

    .layout-right {
flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
    }

    .layout-right-top {
flex: 1;
  height: 50%;
  overflow-y: auto;
		width: 100%;
    }

    .layout-right-bottom {
flex: 1;
  height: 50%;
  overflow-y: auto;
    }

.top1 {
display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch; /* matches height of sibling divs inside layout-top */
}
.top2 {
width: 60%;
	height: 100%;	
}
.top3 {
	width: 20%;
  height: 100%;	
}

.topmenu {
display: flex; align-items: center; justify-content: center;
}

.top2 #divmeteo,#divrates,#divquicklinks {
display: flex; justify-content: center;align-items: center;	
}

.spacer {
	display: flex;
	height: 5vh;	
}
.spacerfolders {
	display: flex;
	height: 13vh;
}

#divquicklinks .button {
	margin: 0.5vw;
}
#favoritesinfo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4vh;
  width: 80vw;
  font-size: 3vh;
  padding: 5px;
}
#folderinfo {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 4vh;
	font-size: 3vh;
	padding: 5px;
	width: 80vw;
}
#noteslist {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 4vh;
	font-size: 3vh;
	padding: 5px;
	width: 80vw;
}
#logo {
width: 20vw;
height: auto;
}

html {
	overflow-x: hidden;
	overflow-y: hidden;
}
body {
	overflow-x: hidden;
	overflow-y: auto;
}

body {
	color:  #ffffff;
	font-family: "ComicNeue-Regular";
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	height: 100%;
    width: 100%;
	font-size: 1.0rem;
	background-image: url("_images/bg.png");
	cursor: url("_images/cursor.png"), auto;
}
	a:link {
	color: #c30000;
	text-decoration: none;
}
    a:visited {
	color: #c30000;
	text-decoration: none;
}
    a:active {
	color: #c30000;
	text-decoration: none;
}
	a:hover {
cursor: url("_images/cursor-hand.png"), auto;		
}
.cursor-hand {
cursor: url("_images/cursor-hand.png"), auto;		
}
.editbox {
  box-sizing: border-box;
  border-radius: 4px;
  padding: 5px;
  color: #82deff;
  background-image:url(_images/bg.black.90.png);
  border-color:#ABABAB;
  border-width: 1px;
    height: auto;
}
.editbox:focus {
  outline: none;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 5px;
  color: #82deff;
  background-color: #000000;
  border-color:#ABABAB;
  border-width: 1px;
}
.button {
  box-sizing: border-box;
  border-radius: 4px;
  color: #82deff;
  background-color: #006987;
  border-color:#ffffff;
  border-width: 1px;
  padding: 5px;
  margin: 1vw;
}
.button:hover {
  box-sizing: border-box;
  border-radius: 4px;
  color: #ffffff;
  background-color: #1686a4;
  border-color:#ffffff;
  border-width: 1px;
}

.nickname {
    width: 100%;
    font-size: 3vh;
    text-align: center;
}

.nickname img {
	height: 1.3vh; width: auto;margin-top: 1vh;
}
	
.pnumb {
	font-size: 1.0rem;	
}
.imgfav {
	height: auto;width: 1vw;
}
.img {
	height: auto;width: 1vw;
}
#loginsub {
	width: 30vw;
	height: auto;
}
.menuimg {
height: 1.5vw;
	width: auto;
}

.td {
	padding: 0.1vw;	
	}
.tanborderssolid {
border-top-style:solid;
border-top-width:1px;
border-right-style:solid;
border-right-width:1px;
border-bottom-style:solid;
border-bottom-width:1px;
border-left-style:solid;
border-left-width:1px;
border-color:#ffe79b;
}
.goldborderssolid {
border-top-style:solid;
border-top-width:1px;
border-right-style:solid;
border-right-width:1px;
border-bottom-style:solid;
border-bottom-width:1px;
border-left-style:solid;
border-left-width:1px;
border-color:#ffa800;
}
.goldbordersdot {
border-top-style:dotted;
border-top-width:1px;
border-right-style:dotted;
border-right-width:1px;
border-bottom-style:dotted;
border-bottom-width:1px;
border-left-style:dotted;
border-left-width:1px;
border-color:#ffa800;
}

.babyblueborderssolid {
border-top-style:solid;
border-top-width:1px;
border-right-style:solid;
border-right-width:1px;
border-bottom-style:solid;
border-bottom-width:1px;
border-left-style:solid;
border-left-width:1px;
border-color:#82deff;
}

.bgbg { background-color: #111111; }
.greybg { background-color: #242424; }
.redbg { background-color: #c30000; }
.greenbg { background-color: #009c0b; }
.bluebg { background-color: #00519c; }

.greybghover:hover {
background-color: #131313;
border-top-style:solid;
border-top-width:1px;
border-right-style:solid;
border-right-width:1px;
border-bottom-style:solid;
border-bottom-width:1px;
border-left-style:solid;
border-left-width:1px;
border-color:#ffa800;
}

.bg-black90 { background-image:url(_images/bg.black.90.png); }
.bg-white3 { background-image:url(_images/bg.white.3.png); }
.bg-white5 { background-image:url(_images/bg.white.5.png); }
.bg-white10 { background-image:url(_images/bg.white.10.png); }

.bg-white3hover { background-image:url(_images/bg.white.3.png); }
.bg-white3hover:hover { background-image:url(_images/bg.white.5.png); }

.blue { color: #6666ff; }
.red { color: #ff0000; }
.yellow { color: #ffff00; }
.green { color: #009c0b; }
.lred { color: #ff7979; }
.dred { color: #c30000; }
.babyblue { color: #009cff; }
.lightbabyblue { color: #77d4ff; }
.orange { color: #ff8a00; }
.lightsatgreen { color: #879d7b; }
.satgreen { color: #0b0b0b; }
.teal {color: #77d4ff; }
.purple {color: #a783ff;}
.lightgold { color: #f0c585; }
.darkgold { color: #452900; }
.gold { color: #b08a4d; }
.lightgrey { color: #ababab; }
.white { color: #FFFFFF; }

.font10 { font-size:10px; }
.font12 { font-size:12px; }
.font14 { font-size:14px; }
.font16 { font-size:16px; }
.font18 { font-size:18px; }
.font20 { font-size:20px; }
.font22 { font-size:22px; }
.font24 { font-size:24px; }
.font26 { font-size:26px; }
.font28 { font-size:28px; }
.font30 { font-size:30px; }
.font32 { font-size:32px; }
.font34 { font-size:34px; }
.font36 { font-size:36px; }
.font38 { font-size:38px; }
.font40 { font-size:40px; }
.font42 { font-size:42px; }
.font44 { font-size:44px; }
.font46 { font-size:46px; }
.font48 { font-size:48px; }
.font50 { font-size:50px; }
.font72 { font-size:72px; }

.bold { font-weight:bold;  }

/* Mobile */
@media (max-width: 600px) {
	html {
	overflow-x: hidden;
	overflow-y: hidden;
}
body {
	overflow-x: hidden;
	overflow-y: auto;
}
	
body {
	color:  #ffffff;
	font-family: "ComicNeue-Regular";
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	height: 100%;
    width: 100%;
	font-size: 1.0rem;
	background-image: url("_images/bg.png");
	cursor: url("_images/cursor.png"), auto;
}
	
	.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
}

.layout-top {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column; /* stack vertically */
}
	
.layout-bottom {
  display: flex;
  flex-direction: column; /* stack left then right vertically */
  flex: 1;
  overflow: hidden;
}

.layout-left {
  width: 100%;
  flex-shrink: 0;
  height: 20vh;
  overflow-y: auto;
}

.layout-right {
  flex: 1; /* fills remaining space after layout-left */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.layout-right-top {
  flex: 1; /* 50% */
  overflow-y: auto;
}

.layout-right-bottom {
  flex: 1; /* 50% */
  overflow-y: auto;
}
	
.top1 #logo {
	width: 	50vw;	
	height: auto;
}

	#favoritesinfo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4vh;
  width: 100vw;
  font-size: 3vh;
  padding: 5px;
}
#folderinfo {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 4vh;
	font-size: 3vh;
	padding: 5px;
	width: 100vw;
}
#noteslist {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 4vh;
	font-size: 3vh;
	padding: 5px;
	width: 100vw;
}
	#logo {
width: 50vw;
height: auto;
}
	#loginsub {
	width: 50vw;
	height: auto;
}
	.top1 {
width: 100%;
}
.top2 {
width: 100%;	
}
.top3 {
width: 100%;
}
	
	.menuimg {
height: 5vw;
	width: auto;
}
.td {
	padding: 0.3vw;	
	}
	.nickname {
font-size: 3vh;
}

.nickname img {
	height: 1.3vh; width: auto;margin-top: 1vh;
}
	
.pnumb {
	font-size: 1vw;	
}
.imgfav {
	height: auto;width: 5vw;
}
.img {
	height: auto;width: 5vw;
}
}