:root {
  --body-bg: #141414;
  --text-color: #909090;
  --latest-date: #696969;
  --link-color: #ffffff;
  --link-decor: none;
  --switch-bg: #252525;
  --alt-bg-color: hsla(0, 0%, 47%, 0.063);
  --description-bg: hsla(0, 0%, 20%, 0.375);
  --footer-text: #565656;
  --bg-pattern: url(img/bgPattern2.png);
  --bg-pattern-red: url(img/bgPatternRed.png);
  --logo: url(img/logoanim.gif);
  --ref-imelda: url(img/ref/ref_ImeldaOgilvy.svg);
  --ref-spletna: url(img/ref/ref_SpletnaPostaja.svg);
  --ref-render: url(img/ref/ref_Renderspace.svg);
  --border-radius: 10px;
}

.lightmode {
  --body-bg: #ededed;
  --text-color: #7d7d7d;
  --latest-date: #9e9e9e;
  --link-color: #010101;
  --link-decor: underline;
  --switch-bg: #f9f9f9;
  --alt-bg-color: hsla(0, 0%, 16%, 0.047);
  --description-bg: hsla(0, 0%, 85%, 0.932);
  --footer-text: #adadad;
  --bg-pattern: url(img/bgPatternLight2.png);
  --bg-pattern-red: url(img/bgPatternRed.png);
  --logo: url(img/logoanim_dark.gif);
  --ref-imelda: url(img/ref/ref_ImeldaOgilvy-light.svg);
  --ref-spletna: url(img/ref/ref_SpletnaPostaja-light.svg);
  --ref-render: url(img/ref/ref_Renderspace-light.svg);
  --border-radius: 10px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background-color: var(--body-bg);
  font-family: Geist;
  color: var(--text-color);
  font-size: 1rem;
}

@font-face {
  font-family: Geist;
  font-weight: 100;
  font-display: swap;
  src: url(fonts/Geist-Thin.woff2) format(woff2);
}
@font-face {
  font-family: Geist;
  font-weight: 200;
  font-display: swap;
  src: url(fonts/Geist-ExtraLight.woff2) format(woff2);
}
@font-face {
  font-family: Geist;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/Geist-Light.woff2) format(woff2);
}
@font-face {
  font-family: Geist;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Geist-Regular.woff2) format(woff2);
}
@font-face {
  font-family: Geist;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/Geist-SemiBold.woff2) format(woff2);
}
@font-face {
  font-family: Geist;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/Geist-Bold.woff2) format(woff2);
}

a {
  text-decoration: var(--link-decor);
  color: var(--link-color);
  text-underline-offset: 0.3rem;
  text-decoration-skip-ink: auto;
}

/* zato, da je na YT link sliki upoštevban border-radius*/
.grid-wrapper a img {
  border-radius: var(--border-radius);
  object-fit: cover;
}

.img-cover {
  object-fit: cover;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}


p {
  line-height: 1.6rem;
  /* margin-bottom: 1rem; */
  &:not(:last-child){
    margin-bottom: 2rem;
  }
}


/* THEME SWITCH */

#theme-switch {
  height: 50px;
  width: 50px;
  padding: 0;
  border-radius: 50%;
  background-color: var(--switch-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  /* position: fixed;
  top: 20px;
  right: 20px; */
}

#theme-switch svg:last-child {display: none;}

.lightmode #theme-switch svg:first-child {display: none;}
.lightmode #theme-switch svg:last-child {display: block;}


/* STYLES */

header {
  /* border: 1px solid darkorchid; */
  padding: 40px 30px;
}

/* .logo {
  background-color: #9f9797b3;
} */

.logo-content {
  content: var(--logo);
  width: 120px;
}

nav {
  display: flex;
  justify-content: space-between;
  gap: 50px;
  align-items: center;
  /* border: #0479ff 1px solid; */
}

nav ul {
  list-style: none;
  display: flex;
  max-width: 360px;
  flex-grow: 1;
  justify-content: space-between;
  gap: 2rem;
  /* border: #0ffc4e 1px solid; */
}

nav ul a {
  display: flex;
  padding: 14px 20px;
  font-size: 0.75rem;
  /* background-color: #433c3c7e; */
  /* border: 1px solid #fe2828; */
}

button{
  border: none;
  padding: 0.8em 2em;
  color: white;
  border-radius: 4px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.intro-text p {
  display: grid;
  /* font-size: 1.6rem; */
  font-size: 1.7vw;
  /* line-height: 2.1rem; */
  line-height: 140%;
  padding: 10px 30% 60px 150px;
  /* padding: 10px 16vw 60px 150px; */
  font-weight: 200;
}



/* --------------------- */


img, video {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  display: inline-block;
}

video {
  border-radius: var(--border-radius);
}

.grid-wrapper > div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-wrapper > div > img, video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius);
}

.grid-wrapper {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  /* grid-auto-rows: 200px; */
  grid-auto-flow: dense;
}

/* .grid-wrapper > * {
  border: 1px solid #fe2828;
} */

.wrapper-padding {
  padding: 80px 80px;
}

.latest {
  background: var(--bg-pattern) center repeat;
}

.latest > div {
  flex-direction: column;

}

.latest-card-title {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0px;
}

.latest-date {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--latest-date);
}

.latest-card-archive {
  display: flex;
  width: 100%;
  padding: 10px 0px;
}

/* .misc {
  background-color: #232323;
} */

.description {
  align-items: start !important;
  justify-content: start !important;
  padding: 30px;
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
}

.description-color {
  background-color: var(--description-bg);
}


h1 {
  font-size: 1.2rem;
  font-weight: 700;
  padding-bottom: 18px;
}

h3 {
  font-size: 1rem;
  font-weight: 600;
  padding-bottom: 18px;
}


.tall-2 { grid-row: span 2; }
.tall-3 { grid-row: span 3; }
.wide-2 { grid-column: span 2; }
.wide-3 { grid-column: span 3; }
.tall2wide2 { grid-column: span 2; grid-row: span 2; }

.zrihtaj-si {
  background-color: var(--alt-bg-color);
}

.zrihtaj-si > .tall-2 {
  grid-row: span 1;
}

.reference {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  justify-content: center;
  align-items: center;
}

.ref-imelda { content: var(--ref-imelda); }
.ref-spletna { content: var(--ref-spletna); }
.ref-render { content: var(--ref-render); }


.no-link {
  cursor: not-allowed;
}

address {
  font-style: normal;
  text-align: center;
  background: var(--bg-pattern-red) center repeat;
}

.contact {
  font-size: 2rem;
  font-weight: 100;
  line-height: 3rem;
}

.very-big {
  font-size: 3rem;
}

footer {
  display: flex;
  flex-direction: column;
  padding: 60px;
  align-items: center;
  text-align: center;
  font-size: 0.8rem;
  color: var(--footer-text);
}




/*----- RESPONSIVE STYLES 850px -----*/


@media screen and (max-width: 1150px) {
  .grid-wrapper {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  .wrapper-padding {
    padding: 80px 60px;
  }
  .zrihtaj-si > .wide-3 {
    grid-column: span 2;
  }
  /* .zrihtaj-si > .tall-2 {
    grid-row: span 2;
  } */
  .misc > .tall-2 {
    grid-row: span 1;
  }
  .intro-text p {
    font-size: 1.6rem;
    line-height: 2.1rem;
    padding: 10px 100px 60px 100px;
    font-weight: 200;
  }
}




/*----- RESPONSIVE STYLES 600px -----*/


@media screen and (max-width: 600px) {
  .grid-wrapper {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  .wrapper-padding {
    padding: 80px 20px;
  }
  .zrihtaj-si > .wide-3 {
    grid-column: span 1;
  }
  .zrihtaj-si > .wide-2 {
    grid-column: span 1;
  }
  .zrihtaj-si > .tall-2 {
    grid-row: span 2;
  }
  .misc > .tall2wide2 { grid-column: span 1; grid-row: span 1; }
  nav {
    display: flex;
    flex-direction: column;
    row-gap: 30px;
  }
  .intro-text p {
    font-size: 1.35rem;
    line-height: 2rem;
    padding: 10px 50px 60px 50px;
    font-weight: 300;
  }
}