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

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

html, body {
	color: #00ffaa;
	font-family: "Inter-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");
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
	cursor: url("_images/cursor.png"), auto;
}
a:link {
	color: #8cffdb;
	text-decoration: none;
    cursor: url("_images/cursor.hand.png"), auto;
}
a:visited {
	color: #8cffdb;
	text-decoration: none;
}
a:active {
	color: #8cffdb;
	text-decoration: none;
}
a:hover {
    cursor: url("_images/cursor.hand.png"), auto;		
}

.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.top {
  width: 100%;
}

.middle {
  flex: 1;
  overflow-y: auto;
}

.bottom {
  width: 100%;
}

.cursor-hand {
    cursor: url("_images/cursor.hand.png"), auto;		
}
.editbox {
    width: 95%;
    background: #060606;
    border: 1px solid #1e1e2e;
    color: var(--text);
    font-family: "Roboto-LightItalic";
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
    margin: 0.5vh;
  }
.editbox:focus { border-color: #03fddc; }

.button {
    padding: 1vh;
    margin: 0.5vh;
    background: linear-gradient(to top, #002b1b, #03fddc, #002b1b);
    border: 1px solid #03fddc;
    border-radius: 8px;
    color: #000000;
    font-family: 'Heroes-Legend';
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
  }
.button:hover { transform: translateY(-1px); box-shadow: 0 8px 30px rgba(0,188,255,0.25); }

.logo {
    width: 40vw;
    height: auto;
    vertical-align: middle;
}
.menuimg {
    width: auto;
    height: 7vh;
    margin: 1vw;
}
.img {
    width: 15vw;
    height: auto;
    margin: 2vw;
}

.containerfilez {
    display:flex;
    flex-wrap: wrap;
}
.filezitem {
   flex: 1;
    padding: 1vw;
    margin: 1vw;
    background-color: teal;
}


/* Mobile */
@media (max-width: 600px) {
    
html {
    overflow-x: hidden;
    overflow-y: hidden;   
}
body {
	overflow-x: hidden;
	overflow-y: auto;
}

html, body {
	font-size: 0.765rem;
}
    .menuimg {
    width: auto;
    height: 7vh;
    margin: 1vw;
}
.img {
    width: 30vw;
    height: auto;
    margin: 2vw;
}
    
}

.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; }
.lightorange { color: #f9d75b; }
.orange { color: #f9c400; }
.darkorange { color: #ab7f00; }
.lightsatgreen { color: #879d7b; }
.satgreen { color: #0b0b0b; }
.teal { color: #00ffaa; }
.lightteal {color: #8cffdb; }
.darkteal { color:#007d36; }
.purple { color: #a783ff; }
.lightgold { color: #f0c585; }
.darkgold { color: #452900; }
.gold { color: #b08a4d; }
.lightgrey { color: #ababab; }
.white { color: #FFFFFF; }