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

/* ---GLOBAL--- */
html,body {
height:100%;
margin:0
}

body {
font-family:Arial,sans-serif;
cursor:url(./main/curs1.png),auto;
min-height:100vh;
text-align:initial;
position:relative
}

/* ---- FIXED BACKGROUND ---- */
body::before {
content:"";
position:fixed;
inset:0;
background:url(./main/portal.png) center / cover no-repeat;
z-index:-1
}

/* ---- PRELOAD IMAGES ---- */
body::after {
content:"";
position:absolute;
width:0;
height:0;
overflow:hidden;
}

/* ----PAGE FRAME---- */
.page {
display:flex;
flex-direction:column;
max-width:1100px;
min-height:calc(100vh - 14px);
margin:10px auto;
padding:9px;
position:relative;
border-radius:3px;
border:1px #87ba9c solid;
background:url(./main/border2.png) repeat-x bottom,url(./main/border2.png) repeat-x top,url(./main/border1.png) repeat-y left,url(./main/border1.png) repeat-y right
}

/* ---------- HEADER ---------- */
header {
background:url(./main/header6.png);
background-size:cover;
background-position:center;
padding:40px;
height: 136px;
font-size:15px;
color:#fff;
border:0 #fff solid;
border-radius:3px
}

/* ----NAVBAR---- */
.nav-bar {
display:flex;
justify-content:center;
gap:50px;
background:url(./main/springtrap.png) repeat;
height:38px
}

.nav-bar a {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 130px;
  height: 38px;

  background: url(./main/KEYsprite.png) center 0 no-repeat;
  background-size: 130px 76px;

  color: #5ccc89;
  text-decoration: none;
  font-size: 18px;

 
}

.nav-bar a:hover {
  background-position: center -38px;
  color: #5cff7c;
}

/* ---------- MAIN ---------- */
main {
flex:1;
background:linear-gradient(#acaca4cc,#acaca4cc),url(./main/main1.png);
background-repeat:repeat;
padding:20px;
order:2;
border:0 #fff solid
}

.content-area {
/*content area = main + sidebar*/
display:flex;
flex:1
}

/* ---------- DROPS ---------- */
.drop1 {
position:absolute;
opacity:1;
top:60px;
left:50px;
width:auto;
height:auto;
pointer-events:none
}

.drop2 {
position:fixed;
opacity:1;
bottom:0;
right:300px;
width:auto;
height:auto;
pointer-events:none
}

.drop3 {
position:fixed;
opacity:1;
top:70px;
right:100px;
width:auto;
height:auto;
pointer-events:none
}


h1{
  padding-bottom: 20px;
  }



/* ---------- FOOTER ---------- */
footer {
background:url(./main/footerz.png);
background-position:center;
background-repeat:repeat;
color:#fff;
text-align:center;
padding:8px;
font-size:10px
}

/* ---------- MOBILE ---------- */
@media (max-width: 700px) {

  .nav-bar {
    gap: 0;
    overflow: hidden;
    justify-content: center;
    
  }

  .nav-bar a {
    flex-shrink: 0;
    width: 90px;
  }

}


main {
order:1
}


.drop1,.drop2,.drop3 {
display:none
}
}