/* imports and definitions */

@import url("https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap");

@font-face {
  font-family: "Frutiger Black";
  src: url("fonts/frutiger-next-pro-black-condensed.otf");
}

@font-face {
  font-family: "Yaziga";
  src: url("fonts/yaziga/YAGIZA__.TTF");
}

@font-face {
  font-family: "TT Octosquares";
  src: url("fonts/tt_octosquares/TT Octosquares Trial Black.ttf");
}

@font-face {
  font-family: "TT Octosquares";
  src: url("fonts/tt_octosquares/TT Octosquares Trial Expanded ExtraBold.ttf");
  font-stretch: expanded;
}

:root {
  --projector-bg-color: #dd8ce2;
  --admin-bg-color: lightblue;
  --user-bg-color: #fcf87b;
  --progress-bar-color: blue;
  --base-roza: rgb(255, 0, 255);
  --base-rumena: rgb(255, 255, 0);
  --mili-plava: rgb(0, 0, 255);
  --mili-roza: rgb(255, 0, 255);
  --fakereal-green: rgb(0, 255, 0);
  --fakereal-red: rgb(255, 0, 0);
  --kolo-roza: rgb(255, 0, 255);
  --kolo-cyan: rgb(0, 255, 255);
  --stane-rumena: rgb(255, 255, 0);
  --stane-rdeca: rgb(255, 0, 0);
  --nagradno-zelena: rgb(0, 255, 0);
  --nagradno-cyan: rgb(0, 255, 255);
  --tama-roza: rgb(255, 0, 255);
  --tama-rdeca: rgb(255, 0, 0);
  /* sukeban */
  --colour-one: #87ffb8;
  --colour-two: #eb6817;
  --colour-three: #00094f;
  --colour-four: #d23134; /* old red */

}

ul.flashes {
  list-style: none;
  padding-left: 0;
}

/* hmtx */
.htmx-indicator{
  opacity:0;
  transition: opacity 500ms ease-in;
}
.htmx-request .htmx-indicator{
  opacity:1
}
.htmx-request.htmx-indicator{
  opacity:1
}

/* animations */
.flashes-container {
    position: fixed;
    top: 0;
    left:50%;
    transform: translateX(-50%);
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    background-color: #f8d7da;
    color: #721c24;
    text-align: center;
    padding: 10px 0;
    z-index: 1000;
    border-radius: 0px 0px 15px 15px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.fadeout {
    -moz-animation: fadeAnimation 0s ease-in 5s forwards;
    /* Firefox */
    -webkit-animation: fadeAnimation 0s ease-in 5s forwards;
    /* Safari and Chrome */
    -o-animation: fadeAnimation 0s ease-in 5s forwards;
    /* Opera */
    animation: fadeAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes fadeAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
        opacity:0;
    }
}
@-webkit-keyframes fadeAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
        opacity:0;
    }
}

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

.rotating-image {
  width: 200px;
  height: auto;
  animation: rotate 4s linear infinite;
  margin: auto;
  display: block;
}

/* main */
body, input, textarea, button {
  font-family: "TT Octosquares", "Courier Prime", monospace, sans-serif;
}

body {
  width: 98%;
  margin: auto;
  height: 100vh;
}

body.projector {
  background: var(--colour-three);
}

body.user {
  background: var(--colour-three);
  color: white;
}
body.user.waiting-room {
  color: white;
  url('/static/img/APP-BG-1920x1080.png');
}

body.admin {
  background: var(--admin-bg-color);
  font-family: "Courier Prime", monospace, sans-serif;
}

div.main {
  width: 100%;
  margin: auto; }

div.prijavljeni {
  text-align: center; }

div.main.upravljanje {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

div.item {
  min-height: 100px;
  text-align: center;
  display: flex;
  margin: 10px;

}

input.admin.submit, a.big-btn  {
    text-decoration: none;
    padding: 0.5rem;
    font-size: 1rem;
    background-color: #729FCF;
    border: none;
    color: white;
    cursor: pointer;
    font-family: inherit;
    margin: auto;
}

a.big-btn {
  padding: 1rem;
  font-size: 2rem;
  min-width: 280px;
 }

select.langselect {
    margin-top: 15px;
    margin-left: 15px;
    background-color: gray;
    border: solid 1px;
    padding: 10px;
    border-radius: 5px;
    color: white;
    z-index: 99;
}

.hidden {
    display: none;
}