@font-face {
    font-family: 'Kollektif'; /*name to be used later*/
    src: url('https://urit.ee/fonts/Kollektif.ttf'); /*URL to font*/
}
@font-face {
    font-family: 'KollektifBold'; /*name to be used later*/
    src: url('https://urit.ee/fonts/Kollektif-Bold.ttf'); /*URL to font*/
}
@font-face {
    font-family: 'KollektifItalic'; /*name to be used later*/
    src: url('https://urit.ee/fonts/Kollektif-Italic.ttf'); /*URL to font*/
}
@font-face {
    font-family: 'KollektiBoldfItalic'; /*name to be used later*/
    src: url('https://urit.ee/fonts/Kollektif-BoldItalic.ttf'); /*URL to font*/
}
@font-face {
    font-family: 'LilitaOne'; /*name to be used later*/
    src: url('https://urit.ee/fonts/LilitaOne-Regular.ttf'); /*URL to font*/
}

body {
  background-color: #fcfaf4;
  font: normal 10px "Kollektif", Verdana,sans-serif;
  /*border: 3em solid #7563aa;*/
}

html,body {
  height: 100%;
}

nav {
  background-color: #7563aa;
}

.main_title {
  font-size: 9vw;
  color: #fcfaf4;
}

.navbar-brand a{
  color:#f5c53e;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;
  border:3em solid #7563aa;
}

.flex-item {
  min-width: 50%;
  min-height: 50%;
}

.lb {
  border:3em solid #7563aa;
}
.lb-r {
  border-right:3em solid #7563aa;
}
.lb-l {
  border-left:3em solid #7563aa;
}
.lb-t {
  border-top:3em solid #7563aa;
}
.lb-b {
  border-bottom:3em solid #7563aa;
}
.text-center {
  text-align: center;
}

.box-r1c1 {
  border-bottom:3em solid #7563aa
}
.box-r1c2 {
  /*background-color: orange;*/
  border-bottom:3em solid #7563aa;
}
.box-r2c1 {
  /*background-color: lime;*/
  border-bottom:3em solid #7563aa;
}
.box-r2c2 {
  /*background-color: coral;*/
}



#space, .stars {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

.stars {
  background-image:
    radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 50px 160px, #ddd, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: zoom 4s infinite;
  opacity: 0;
}

.stars:nth-child(1) {
  background-position: 50% 50%;
  animation-delay: 0s;
}
.stars:nth-child(2) {
  background-position: 20% 60%;
  animation-delay: 1s;
}
.stars:nth-child(3) {
  background-position: -20% -30%;
  animation-delay: 2s;
}
.stars:nth-child(4) {
  background-position: 40% -80%;
  animation-delay: 3s;
}
.stars:nth-child(5) {
  background-position: -20% 30%;
  animation-delay: 4s;
}

@keyframes zoom {
  0% {
    opacity: 0;
    transform: scale(0.5);
    animation-timing-function: ease-in;
  }
  85% {
    opacity: 1;
    transform: scale(3.8);
    animation-timing-function: linear;
  }
  100% {
    opacity: 0;
    transform: scale(5.5);
  }
}



/* W-HELPERS for 50W as no breakpoints exist in boostrap */

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
  .box-r1c1 {
    border-bottom:3em solid #7563aa;
    border-right:3em solid #7563aa;
  }
  .box-r1c2 {
    border-bottom:3em solid #7563aa;
  }
  .box-r2c1 {
    border-right:3em solid #7563aa;
    border-bottom: none;
  }
  .box-r2c2 {}

  .w-sm-100 {
    width:100%!important;
  }
  .w-sm-75 {
    width:75%!important;
  }
  .w-sm-50 {
    width:50%!important;
  }
  .w-sm-25 {
    width:25%!important;
  }
  .h-sm-100 {
    height:100%!important;
  }
  .h-sm-75 {
    height:75%!important;
  }
  .h-sm-50 {
    height:50%!important;
  }
  .h-sm-25 {
    height:25%!important;
  }
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  .box-r1c1 {
    border-bottom:3em solid #7563aa;
    border-right:3em solid #7563aa;
  }
  .box-r1c2 {
    border-bottom:3em solid #7563aa;
  }
  .box-r2c1 {
    border-right:3em solid #7563aa;
  }
  .box-r2c2 {}

  .w-md-100 {
    width:100%!important;
  }
  .w-md-75 {
    width:75%!important;
  }
  .w-md-50 {
    width:50%!important;
  }
  .w-md-25 {
    width:25%!important;
  }
  .h-md-100 {
    height:100%!important;
  }
  .h-md-75 {
    height:75%!important;
  }
  .h-md-50 {
    height:50%!important;
  }
  .h-md-25 {
    height:25%!important;
  }
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  .box-r1c1 {
    border-bottom:3em solid #7563aa;
    border-right:3em solid #7563aa;
  }
  .box-r1c2 {
    border-bottom:3em solid #7563aa;
  }
  .box-r2c1 {
    border-right:3em solid #7563aa;
  }
  .box-r2c2 {}

  .w-lg-100 {
    width:100%!important;
  }
  .w-lg-75 {
    width:75%!important;
  }
  .w-lg-50 {
    width:50%!important;
  }
  .w-lg-25 {
    width:25%!important;
  }
  .h-lg-100 {
    height:100%!important;
  }
  .h-lg-75 {
    height:75%!important;
  }
  .h-lg-50 {
    height:50%!important;
  }
  .h-lg-25 {
    height:25%!important;
  }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
  .box-r1c1 {
    border-bottom:3em solid #7563aa;
    border-right:3em solid #7563aa;
  }
  .box-r1c2 {
    border-bottom:3em solid #7563aa;
  }
  .box-r2c1 {
    border-right:3em solid #7563aa;
  }
  .box-r2c2 {}

  .w-xl-100 {
    width:100%!important;
  }
  .w-xl-75 {
    width:75%!important;
  }
  .w-xl-50 {
    width:50%!important;
  }
  .w-xl-25 {
    width:25%!important;
  }
  .h-xl-100 {
    height:100%!important;
  }
  .h-xl-75 {
    height:75%!important;
  }
  .h-xl-50 {
    height:50%!important;
  }
  .h-xl-25 {
    height:25%!important;
  }
}

/* END W-HELPERS */

/* TODO: delete delete delete from here */
/* This may not be needed after new design */


#responsive-canvas {
  width: 100%;
}