/*
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
*/
html {
display: grid;
min-height: 100%
}
body {
display: grid;
font-family: 'Fira Sans', sans-serif;
font-size: 1rem
}
.container {
position: relative;
overflow: hidden;
width: 600px;
margin: 5em auto;
padding: 2em;
letter-spacing: 1px;
}
footer {
position: fixed;
bottom: 0;
right: 0;
text-transform: uppercase;
padding: 10px;
font-family: Lato,sans-serif
}
footer p {
letter-spacing: 3px;
font-size: 10px
}
footer a {
color: #aaa;
text-decoration: none
}
footer a:hover{
color: #7d7d7d
}

/* CANVAS */
canvas {
width: 100%;
height: auto;
}

/* IMAGE */
img {
width: 100%;
height: auto;
top: 0px;
left: 0px;
}

/* COPY PASTE */
*::selection {
background: #e91e63;
color: #fff;
}
*::-moz-selection {
background: #e91e63;
color: #fff;
}

/* INPUT */
/*custom inpu file*/
.custom-file-input {
color: transparent;
}
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: "▲ UPLOAD FOTO";
color: #fff;
display: inline-block;
background: #555555;
padding: 10px 22px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
font-weight: 400;
border-radius: 0.5em;
outline: none;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
.custom-file-input:focus {
outline: none !important;
}
.custom-file-input:active::before {
transform: scale(.9) translate(0px, 2px);
box-shadow:  inset 4px 4px 5px 0px rgba(0, 0, 0, 0.20);	   
}

/* LOADING */
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
/* change if the mask should have another color then white */
z-index: 99;
/* makes sure it stays on top */
}
#status {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
/* centers the loading animation horizontally one the screen */
top: 50%;
/* centers the loading animation vertically one the screen */
background-image: url(https://skandal.pages.dev/img/status.gif);
/* path to your loading animation */
background-repeat: no-repeat;
background-position: center;
margin: -100px 0 0 -100px;
/* is width and height divided by two */
}

/* BUTTON */
.btn {
background-color: #04AA6D; /* Green */
border: none;
border-radius: 0.5em;
color: white;
padding: 10px 22px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
font-size: 12px;
cursor: pointer;
}
.btn:hover {
background-color: #e7e7e7;
color: black;
}
button {
background-color: #04AA6D; /* Green */
border: none;
border-radius: 0.5em;
color: white;
padding: 10px 22px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
font-size: 12px;
letter-spacing: 1px;
cursor: pointer;
}
.red:hover {
background-color: #e7e7e7;
color: black;
}
.green {background-color: #04AA6D;} /* Green */
.blue {background-color: #008CBA;} /* Blue */
.red {background-color: #f44336;font-family: 'Fira Sans', sans-serif;} /* Red */
.gray {background-color: #e7e7e7; color: black;} /* Gray */
.black {background-color: #555555;} /* Black */

/* Credit */
.credit {
width: 31ch;
animation: typing 2s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
/* font-size: 2em; */
}

@keyframes typing {
from {
width: 0
}
}
    
@keyframes blink {
50% {
border-color: transparent
}
}

/* Blockquote */
blockquote {
  margin: 0;
}
blockquote p {
  padding: 15px;
  background: #eee;
  border-radius: 5px;
}
blockquote p::before {
  content: '\201C';
}
blockquote p::after {
  content: '\201D';
}

/* Line */
hr {
border: none;
border-top: 3px double #333;
color: #333;
overflow: visible;
text-align: center;
height: 5px;
}
hr::after {
background: #fff;
content: '\262E';
padding: 0 4px;
position: relative;
top: -13px;
}

@media (max-width: 700px) {
.container {
margin: 0 auto;
width: auto;
}
}