/*fonts loaded here-----------------------------------------------------*/
@font-face {
    font-family: corpus;
    src: url(/font/Corpus.woff);
    font-kerning: auto;
}

@font-face {
    font-family: mono;
    src: url(/font/SpaceMono-Regular.ttf);
}

@font-face {
    font-family: bebas;
    src: url(/font/BebasNeue-Regular.ttf);
}

@font-face {
    font-family: roboto;
    src: url(/font/Roboto-VariableFont_wdth,wght.ttf)
}


/*container styling*/
body {
  background-image: url("/images/Valentin Cvetanoski blur.PNG");
  background-size: cover;
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 10vh auto auto auto auto;
  grid-template-areas:
    "nav nav"
    "imgr main"
    "side main"
    "side main"
    "footer footer";
  font-weight: 800;
  font-size: 12px;
  color: #004d40;
  text-align: center;
  grid-gap: 2rem;
}

.container2{
    display: grid;
  height: 100vh;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 10vh auto auto auto auto;
  grid-template-areas:
    "nav nav"
    "side main"
    "side main"
    "side main"
    "footer footer";
  font-weight: 800;
  font-size: 12px;
  color: #004d40;
  text-align: center;
  grid-gap: 1rem;
}

.container3{
    display: grid;
  height: 100vh;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 10vh auto auto auto auto;
  grid-template-areas:
    "nav nav"
    "main main"
    "main main"
    "main main"
    "footer footer";
  font-weight: 800;
  font-size: 12px;
  color: #004d40;
  text-align: center;
  grid-gap: 1rem;
}

.nav {
  background-color:rgb(1, 0, 9);
  grid-area: nav;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
  display: grid;
  grid-template-columns: 0.5fr 4fr;
}

.main {
  background:rgba(8, 54, 85, 0.7);
  grid-area: main;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
  border-radius: 1rem;
}

.imgr {
  background: rgba(8, 54, 85, 0.7);
  grid-area: imgr;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
  border-radius: 1rem;
}

.side {
  background: rgba(8, 54, 85, 0.7);
  grid-area: side;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
  border-radius: 1rem;
}

.footer {
  background: #0c012e;
  grid-area: footer;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

.feature {
    display: grid;
  grid-template-columns: auto auto auto;
  font-weight: 800;
  font-size: 12px;
  color: #004d40;
  text-align: center;
}

.big {
  background:transparent;
  border-style: solid;
  border-color: #ffffff;
}

.small1 {
   background:transparent;
  border-color: #ffffff;
  border-style: solid;
}

.small2 {
   background:transparent;
     border-color: #ffffff;
  border-style: solid;
}
/*post styling-------------------*/
.post {
  text-align: left;
  padding: 10px;
}

.link {
  color: rgb(39, 158, 232);
}

/*Word styling--------------------------------------*/

p{
  color:white;
  font-family: roboto;
  font-size: 16px;
}

.post > h2{
  font-size: 1.8rem;
}

.reduced{
  font-size: 11px;
}

::-moz-selection { /* Code for Firefox */
  color: yellow;
  background: none;
}

::selection {
  color:  yellow;
  background: none;
}

.corpus {
  font-family: corpus;
  font-size: 20px;
}

.centerword{
    text-align: center !important;
}

.main > p {
    text-align: left;
    padding-left: 1em;
    padding-right: 1em;
}

.corpus {
    color: #ffffff;
    font-family: corpus !important;
}

a:hover, a:visited, a:link, a:active {
   text-decoration: none !important;
}

h1{
    color: white;
    font-family: bebas;
    font-size: 5vh;
}

h2{
    color: white;
    font-family: roboto;
}

/*regular menu------------------------*/
.menu {
    position: absolute;
    top: 1vh;
    right: 3vh;
    margin-right:0;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    padding-left: 1vw;
}

.menu > div {
    position: relative;
    padding-right: 1vw;
    height: 0.001vh;
}

/*search*/
#ulsearch > li{
  padding-bottom: 18px;
}

#ulsearch > li > a{
  font-size: 15px;
  color:white;
  font-family: roboto;
  text-decoration: none;
}

/*ham menu----------------------------------*/
.ham_button {
  display:none;
  position: absolute;
  top: 2.5vh;
  right: 5vh;
}

.ham_button.active {
  display: none;
  position: fixed;
  background-image: url("/images/glassy_tech.jpg");
  z-index: 50;
}

.offscreen_menu {
  display: none;
  background-color: rgba(0, 54, 108, 0.7);
  height: 100vh;
  width: 50vw;
  position: fixed;
  top: 0vh;
  transition: 3.s ease;
}

.offscreen_menu > ul {
  position: relative;
  top: 8vh;
}

.offscreen_menu.active {
  display: none;
  right: 0;
}

ul {
  list-style-type: none;
}

/* Marquee Ticker --------------------------------------------------------------- */

.ticker {
  --ticker-duration: 70s;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  background: #000000;
  color: #fff;
  overflow: hidden;
  padding: 0.5rem;
}



.ticker__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: ticker;
  animation-duration: var(--ticker-duration);
  text-align: center;
  padding-left: 100%;
  width: max-content;
}



.ticker__inner > p {
  margin: 0 5rem;
  font-size: 120%;
  font-family: roboto;
}



@keyframes ticker {
  0% {
    transform: translate3d(0%, 0, 0);
  }

  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

/*responsive website stuff-------------*/

#m1 {
display: block;
color: limegreen;
}

#m2 {
display: none;
color: pink;
}

@media only screen and (max-width: 950px) {
  p{
    font-size:13px;
  }

  .corpus{
    font-size:20px;
  }

  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto 0.3fr 1fr 0.8fr 1.2fr;
    grid-template-areas:
      "nav"
      "main"
      "imgr"
      "side"
      "footer";
  }

  .container2 {
    grid-template-columns: 1fr;
    grid-template-rows: 0.3fr 1fr 0.8fr 1.2fr;
    grid-template-areas:
      "nav"
      "main"
      "side"
      "footer";
  }

  .container3 {
    grid-template-columns: 1fr;
    grid-template-rows: 0.3fr 1fr 0.8fr 1.2fr;
    grid-template-areas:
      "nav"
      "main"
      "footer";
  }

  .feature {
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
  }

  #m1 {
    display: none;
  }

  #m2 {
    display: block;
  }

  .menu {
    display: none;
  }

  .ham_button {
    display: block;
  }

  .ham_button.active {
    display: block;
  }

  .offscreen_menu.active {
    display: block;
  }
}