@font-face {
  font-family: "console";
  src: url("https://monoki.neocities.org/assts/fonts/ModernDOS8x16.ttf") format("truetype");
}

p {

}

a {
color: #ffeec4;
}

a:hover {
color: #7fe3d5;
}

a:visited {
color: #fb93c1;
}

body {
background: black;
background-image: Url("./img/bg.jpg");
background-size: cover;
background-attachment: fixed;
color: white;
font-family: console;
}

.container {
margin: auto;
max-width: 800px;
}

.content {
width: 100%;
height: 100%
display: flex;
justify-content: center;
}
.cen {
margin:auto;
text-align: center;
}

button {
border-radius: 0px;
background-color: white;
color: black;
font-family: console;
font-size: 15px;
}

button::hover {
border-radius: 0px;
background-color: black; /* Optional: A background color for contrast */
  background-image: radial-gradient(circle, white 1px, transparent 1px);
  background-size: 5px 5px; /* Controls the spacing between dots */
color: black;
font-family: console;
font-size: 15px;
}

button::active {
border-radius: 0px;
border-width: 1px;
border-style: solid;
border-color: white;
background-color: black;
color: white;
font-family: console;
font-size: 15px;
}

.buttonrev {
border-radius: 0px;
background-color: black;
color: white;
font-family: console;
font-size: 15px;
}

.buttonrev::hover {
border-radius: 0px;
background-color: grey; /* Optional: A background color for contrast */
  background-image: radial-gradient(circle, white 1px, transparent 1px);
  background-size: 5px 5px; /* Controls the spacing between dots */
color: black;
font-family: console;
font-size: 15px;
}

.buttonrev::active {
border-radius: 0px;
border-width: 1px;
border-style: solid;
border-color: white;
background-color: grey;
color: black;
font-family: console;
font-size: 15px;
}

.modalcontain {
height: 100vh;
width: 100vw;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0,0,0,0.5);
display: none;
}

.paper {
width: 500px;
height: 600px;
background-color: white;
background-image: url("./img/OLD_PAPER_TEXTURE.jpg");
color: black;
padding: 15px;
}


.textbox {
background-color: black;
max-width: 800px;
margin: auto;
border-image-source: url("./img/borderline2.png");
border-image-width: 20px;
border-image-slice: 34%;
border-image-repeat: round;
border-radius: 15px;
//border: 2px solid white;
border-width: 20px;
padding: 25px;
z-index:1;
//position: absolute;
}

.logos {
text-align: center;
display:flex;
justify-content: center;
align-items: center;
//position: absolute;
z-index: 2;
margin: auto;
}


@keyframes cogSpin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}

@keyframes cogSpinBig {
from {transform: rotate(0deg);}
to {transform: rotate(-360deg);}


}

@keyframes tickCog {
from {transform: rotate(0deg);}
to {transform: rotate(18deg);}


}
.cog {
//transform-origin: 50% 50%;
//transform-box:fill-box;
//scale: 2.35; 
//translate: 100px 40px;
//transform: scale(1.5), translate(10, 10);
animation-name: cogSpinBig;
animation-duration: 8s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}

.cog1 {
/*translate: 150px 150px;
transform-origin: 50% 50%;
transform-box:fill-box;*/
animation-name: cogSpin;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
}

.cog2 {
/*transform-origin: 50% 50%;
transform-box:fill-box;*/
animation-name: cogSpin;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}

.cog4 {
/*translate: 150px 150px;
transform-origin: 50% 50%;
transform-box:fill-box;*/
animation-name: tickCog;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
}