/*
cool colours to use:
color: rgb(128,245,10)
rgba(128,10,245,0.8)
rgba(245,10,10,1)rgb(128,10,245)
rgb(128,10,245)
*/
:root{
    --primary: #edf6d6;
    --primarydark: #a35c74;
    --secondary: #3e232c;
    --secondaryopac: #3e232c;
}

html {
    /*gonna need some type of animated bg or some shit idk*/
    background-color: var(--secondary);
    /* Fallback color */
    background-color: var(--secondaryopac);
    /* Black w/opacity/see-through */
    background-size: cover;
}
html, body{
    height: 100%;
    overflow: hidden;
}

#mainbox{
    margin: auto;
    padding-top: 5px;
    outline-color: var(--primary);
    outline-style: solid;
    width: 99%;
    height: 75%;
}

#hotbar{
    margin: auto;
    outline-color: var(--primary);
    outline-style: solid;
    width: 99%;
    height: 25%;
}
.flexhotbar {
    padding: 16px;
    display: flex;  
    justify-content: space-between;
}

.link {
    padding: 16px 16px;
    text-align: center;
    text-decoration: none;
    font-size: 16pt;
    font-family: monospace;
    color: var(--secondary);
    position: relative;
    display: block;
    margin: 0px;
    outline-style: solid;
    outline-color: var(--primary);
}

.button{
  position:relative;
  display:inline-block;
  margin:20px;
}

.button a{
  color:var(--secondary);
  font-size:16pt;
  text-align: center;
  text-decoration:none;
  background-color:var(--primary);
  display:block;
  position:relative;
  padding:16px 16px;
  
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-shadow: 0px 1px 0px #000;
  filter: dropshadow(color=#000, offx=0px, offy=1px);
  
  -webkit-box-shadow:inset 0 2px 0 var(--primarydark), 0 10px 0 var(--primarydark);
  -moz-box-shadow:inset 0 2px 0 var(--primarydark), 0 10px 0 var(--primarydark);
  box-shadow:inset 0 2px 0 var(--primarydark), 0 10px 0 var(--primarydark);
  
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
}

.button a:active{
  top:10px;
  background-color:var(--primary);
  
  -webkit-box-shadow:inset 0 1px 0 var(--primarydark), inset 0 -3px 0 var(--primarydark);
  -moz-box-shadow:inset 0 1px 0 var(--primarydark), inset 0 -3pxpx 0 var(--primarydark);
  box-shadow:inset 0 1px 0 var(--primarydark), inset 0 -3px 0 var(--primarydark);
}

.button:after{
  content:"";
  height:100%;
  width:100%;
  padding:4px;
  position: absolute;
  bottom:-15px;
  left:-4px;
  z-index:-1;
  background-color:#2B1800;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.rainbow {
  text-align: center;
  font-size: 64px;
  font-family: monospace;
  letter-spacing: 5px;
  animation: colorRotate 1s linear 0s infinite, shaky 0.2s linear 0s infinite; 
}

.notif {
    animation: shaky 0.2s linear 0s infinite;
}

p{
    text-align: center;
    font-size: 32;
    font-family: monospace;
    color: white;
}

.pulse{
  animation: pulse 1s infinite;
  box-shadow: 0 0 0 2em transparent;
} /*used when there is something new on that page */


.onegeartop{
    font-size: 100px;
    opacity: 0.8;
    z-index: -1;
    position: absolute;
    top: 0;
}

.twogearsbot {
    font-size: 100px;
    opacity: 0.8;
    z-index: -1;
    position: absolute;
    right: 5%;
}

.gear-rotate{
    width: 2em;
	height: 2em;
    top: 50%;
    left: 50%;
    margin-top: -1em;
    margin-left: -1em;
	background: var(--primary);
	position: absolute;
	border-radius: 1em;
	-webkit-animation: 4s gear-rotate linear infinite;
	-moz-animation: 4s gear-rotate linear infinite;
	animation: 4s gear-rotate linear infinite;

}

.gear-rotate-left{
    margin-top: -3.2em;
    top 50%;
    width: 2em;
	height: 2em;
	background: #edf6d6;
	position: absolute;
	border-radius: 1em;
    -webkit-animation: 4s gear-rotate-left linear infinite;
    -moz-animation: 4s gear-rotate-left linear infinite;
    animation: 4s gear-rotate-left linear infinite;
}
.gear-rotate::before, .gear-rotate-left::before {
	width: 2.8em;
	height: 2.8em;
	background: 
    -webkit-linear-gradient(0deg,transparent 39%,#edf6d6 39%,#edf6d6 61%, transparent 61%),
    -webkit-linear-gradient(60deg,transparent 42%,#edf6d6 42%,#edf6d6 58%, transparent 58%),
    -webkit-linear-gradient(120deg,transparent 42%,#edf6d6 42%,#edf6d6 58%, transparent 58%);
	background: 
    -moz-linear-gradient(0deg,transparent 39%,#edf6d6 39%,#edf6d6 61%, transparent 61%),
    -moz-linear-gradient(60deg,transparent 42%,#edf6d6 42%,#edf6d6 58%, transparent 58%),
    -moz-linear-gradient(120deg,transparent 42%,#edf6d6 42%,#edf6d6 58%, transparent 58%);
	background: 
    -o-linear-gradient(0deg,transparent 39%,#edf6d6 39%,#edf6d6 61%, transparent 61%),
    -o-linear-gradient(60deg,transparent 42%,#edf6d6 42%,#edf6d6 58%, transparent 58%),
    -o-linear-gradient(120deg,transparent 42%,#edf6d6 42%,#edf6d6 58%, transparent 58%);
	background: -ms-linear-gradient(0deg,transparent 39%,#edf6d6 39%,#edf6d6 61%, transparent 61%),-ms-linear-gradient(60deg,transparent 42%,#edf6d6 42%,#edf6d6 58%, transparent 58%),-ms-linear-gradient(120deg,transparent 42%,#edf6d6 42%,#edf6d6 58%, transparent 58%);
	background: 
      linear-gradient(0deg,transparent 39%,#edf6d6 39%,#edf6d6 61%, transparent 61%),
    linear-gradient(60deg,transparent 42%,#edf6d6 42%,#edf6d6 58%, transparent 58%),
    linear-gradient(120deg,transparent 42%,#edf6d6 42%,#edf6d6 58%, transparent 58%);
	position: absolute;
	content:"";
	top: -.4em;
	left: -.4em;
	border-radius:1.4em;
}
.gear-rotate::after, .gear-rotate-left::after {
	width: 1em;
	height: 1em;
	background: var(--secondary);
	position: absolute;
	content:"";
	top: .5em;
	left: .5em;
	border-radius: .5em;
}

@keyframes colorRotate {
  from {
    color: #6666ff;
  }
  10% {
    color: #0099ff;
  }
  50% {
    color: #00ff00;
  }
  75% {
    color: #ff3399;
  }
  100% {
    color: #6666ff;  
  }    
}

@keyframes shaky {
  0% { transform: translate(0, 0); }
  25% { transform: translate(5px, 5px); }
  50% { transform: translate(0, 0); }
  75% { transform: translate(-5px, 5px); }
  100% { transform: translate(0, 0); }
}

@keyframes pulse {
    0% {box-shadow: 0 0 0 0 var(--primary);}

    box-shadow: 
    inset -3.5em 0 0 0 ,
    inset 3.5em 0 0 0 ;    
}

@-webkit-keyframes gear-rotate {
  0% { 
    -webkit-transform: rotate(0deg);
  }
  100% { 
    -webkit-transform: rotate(-180deg); 
  }
}

@-moz-keyframes gear-rotate {
  0% { 
    transform: rotate(0deg);
  }
  100% { 
    transform: rotate(-180deg); 
  }
}

@keyframes gear-rotate {
  0% { 
    transform: rotate(0deg); 
  }
  100% { 
    transform: rotate(-180deg); 
  }
}

@-webkit-keyframes gear-rotate-left {
 0% {
   -webkit-transform: rotate(30deg); 
  }
  100% {
    -webkit-transform: rotate(210deg);
  }
}

@keyframes gear-rotate-left {
 0% { 
   -webkit-transform: rotate(30deg); 
  }
  100% { 
    -webkit-transform: rotate(210deg);
  }
}