@font-face {
  font-family: "Lines";
  src:url("/assets/fonts/Lines8GX.ttf") format("truetype-variations");
}

@font-face {
  font-family: "Grotesk Remix Regular";
  src: url("/assets/fonts/GroteskRemix-Regular.woff") format("woff");
}

@font-face {
  font-family: "Diatype Regular";
  src: url("/assets/fonts/ABCDiatypeEdu-Regular.woff") format("woff"),
       url("/assets/fonts/ABCDiatypeEdu-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Diatype Medium";
  src: url("/assets/fonts/ABCDiatypeEdu-Medium.woff") format("woff"),
       url("/assets/fonts/ABCDiatypeEdu-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Diatype Mono";
  src: url("/assets/fonts/ABCDiatypeMono-Regular.woff") format("woff"),
       url("/assets/fonts/ABCDiatypeMono-Regular.woff2") format("woff2");
}


@font-face {
  font-family: "Diatype Light";
  src: url("/assets/fonts/ABCDiatypeEdu-Thin.woff") format("woff");
}

@font-face {
  font-family: "Diatype Bold";
  src: url("/assets/fonts/ABCDiatypeEdu-Bold.woff") format("woff"),
       url("/assets/fonts/ABCDiatypeEdu-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Life";
  src: url("/assets/fonts/LifeEF-Regular.woff") format("woff"),
  url("/assets/fonts/LifeEF-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Marr Sans";
  src: url("/assets/fonts/MarrSansCond-Semibold.woff") format("woff"),
  url("/assets/fonts/MarrSansCond-Semibold.woff2") format("woff2");
}

@font-face {
  font-family: "Marr Sans Text";
  src: url("/assets/fonts/MarrSans-Regular.woff") format("woff"),
  url("/assets/fonts/MarrSans-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Marr Sans Text Medium";
  src: url("/assets/fonts/MarrSans-Medium.woff") format("woff"),
  url("/assets/fonts/MarrSans-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "HAL Timezone";
  src: url("/assets/fonts/HALTimezone-Regular.woff") format("woff"),
  url("/assets/fonts/HALTimezone-Regular.woff2") format("woff2");
}


* {
  margin: 0;
  padding: 0;
  /* -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; */
}

:root {
  --padding: 0rem;
  --transition: 500ms;
  --color-black: #000;
  --color-white: #fff;
  --color-grey: #dcdcdc;
  --color-light: #e8e8e8;
  --border: 1px solid #000;
  --color-code-light-grey:  #d3d3d3;
  --color-code-comment:     #a9aaad;
  --color-code-white:       #c5c9c6;
  --color-code-pink:        #f7bbd5;
  --color-code-maroon:      #3f1b1a;
  --color-code-red:         #ff5547;
  --color-code-orange:      #020202;
  --color-code-yellow:      #ffff48;
  --color-code-mustard:     #f5bc42;
  --color-code-green:       #9ef2da;
  --color-code-forest:      #2e5738;
  --color-code-aqua:        #b4cac9;
  --color-code-blue:        #58a1ff;
  --color-code-purple:      #8b4dff;
  
  --color-text: var(--color-code-pink);
  --color-background:var(--color-code-maroon);
 

  --color-text-two: var(--color-code-green);
  --color-background-two: var(--color-code-forest);

  --color-primary-text: var(--color-code-pink);
  --color-primary-text-second: var(--color-code-maroon);
  --color-header: var(--color-code-maroon);


  --color-header-background:var(--color-code-pink);
  --color-bar:var(--color-code-maroon);
  --color-box:var(--color-code-pink);

  --font-family-sans: "Marr Sans Text Medium";
  --font-family-serif: "HAL Timezone";
  --font-family-regular: "Marr Sans";
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

html {
  /* font-family: var(--font-family-sans); */
  color: var(--color-text);
  /* background: var(--color-code-green); */
}

@-webkit-keyframes AnimationName {
    0%{background-position:78% 0%}
    50%{background-position:23% 100%}
    100%{background-position:78% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:78% 0%}
    50%{background-position:23% 100%}
    100%{background-position:78% 0%}
}
@keyframes AnimationName {
    0%{background-position:78% 0%}
    50%{background-position:23% 100%}
    100%{background-position:78% 0%}
}

.img {
  width: 100%;
  filter:grayscale(0%);
  /* box-shadow: 2px 2px 19px rgba(0, 0, 0, 0.3)  ; 
	-webkit-box-shadow: 2px 2px 19px rgba(0, 0, 0, 0.3)  ; 
	-moz-box-shadow: 2px 2px 19px rgba(0, 0, 0, 0.3)  ;  */
  opacity:1;
  /* transform: perspective(3000px) rotateY(0deg); */
  transition: transform 2s ease 3s;
}

/* figure:hover > img { 
  box-shadow: none  ; 
	-webkit-box-shadow: none  ; 
	-moz-box-shadow: none  ; 
}  */
  
.issue-two-description-text {
height:auto;
overflow-y: scroll;
}


.issue-description > p{
  position: relative;
  /* border-bottom: 2px solid black; */
  /* display: block; */
  z-index: 0;
  font-family: var(--font-family-regular);
  /* margin: 0px 20px; */
  text-align: left;
  padding: 10px;
  line-height: 1.2;
  /* text-transform: uppercase; */
  margin: 0px 30px;
  font-size: 1.7rem;
  hyphens: auto;
  background:  var(--color-box);
  color: var(--color-bar);
  /* border:3px solid var(--color-background); */
  opacity:1;

}






.issue-title{ 
  display: inline-block;
  position: relative;
  height:25px;
  padding-top:27px;
  padding-left:10px;
  padding-right:10px;
  margin:0px 30px;
  font-family: var(--font-family-regular);
  font-size: 2.7rem;
  color: var(--color-box);
  background:var(--color-bar);
}

.scroll-read{
  display: none;
}

figure:hover > .example-name{ 
  opacity:1 !important;
  /* color:var(--color-code-orange); */
  /* text-decoration: underline; */
}




body {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background:var(--color-white);
  /* background-size: 1000% 1000%;

  -webkit-animation: AnimationName 36s ease infinite;
  -moz-animation: AnimationName 36s ease infinite;
  animation: AnimationName 36s ease infinite; */
  /* background: linear-gradient(90deg, rgba(204,204,204,1) 0%, rgba(204,204,204,1) 45%, rgba(255,255,255,1) 100%); */
}


.line1{
  font-size:3rem;
  font-family: "Lines";
  display:inline-block;
  font-variation-settings: "wdth" 800, "slnt" 800;
}

.line2{
  font-size:3rem;
  font-family: "Lines";
  display:inline-block;
  font-variation-settings: "wdth" 800, "slnt" 800;
}




body::-webkit-scrollbar {
  width:2em;
  /* border-left:5px solid black; */
  /* background-image:
  linear-gradient(45deg, var(--color-code-orange) 25%, transparent 25%), 
  linear-gradient(135deg, var(--color-code-orange) 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, var(--color-code-orange) 75%),
  linear-gradient(135deg, white 75%, var(--color-code-orange) 75%); */
background-size:10px 10px; /* Must be a square */
 background-position:0 0, 5px 0, 5px -5px, 0px 5px; 
background: var(--color-background);

}

body::-webkit-scrollbar-track {
  box-shadow:none;
}
 
body::-webkit-scrollbar-thumb {
  /* background-image: repeating-linear-gradient(45deg, transparent, transparent 3px, #ffffff 3px, #ffffff 6px);
  background-color: #000000; */
  background: var(--color-text);
}

.divider {
  /* font-family: "GT Alpina"; */
  font-size:1.2rem;
  padding:0px 8px;
}

/* .nejc{
  color:#5F68EC
}

.elena{
  color:#7EC731
} */

.punctuation{
  /* font-family: "GT Alpina", "GT Alpina Emojis 1", "GT Alpina Emojis 2" */
  color:black;
}


.utk{
  position: fixed;
  text-align: left;
  right:0px;
  /* left:-245px; */
  /* transform:rotate(-90deg); */
  color:black;
  font-family: var(--font-family-regular);
}

#utk-circle{
  text-decoration: none;
  padding:0px 10px;
  height: 44px;
  color:var(--color-text-two);
  font-size:36px;
  margin-left:7px;
  background:var(--color-background-two);
}



#utk-circle:hover{
  background:var(--color-text);
  color:var(--color-background);
}

li {
  list-style: none;
}
a {
  color: currentColor;
  text-decoration: none;
}
button {
  font: inherit;
  background: none;
  border: 0;
  color: currentColor;
  cursor: pointer;
}
strong, b {
  font-weight: 600;
}
small {
  font-size: inherit;
  color: var(--color-text-grey);
}

.bg-light {
  background-color: var(--color-light);
}
.color-grey {
  color: silver;
}

.header {
  position: fixed;
  display: flex;
  flex-wrap: wrap;
  top: 0px;
  width:100%;
  margin-left: auto;
  margin-right: auto;
  height:62px;
  justify-content: space-between;
  z-index: 100;
  background:var(--color-background);
  transition: var(--transition) height;
  overflow:hidden;

}



.about-title{
  color: var(--color-code-purple);
  font-family: var(--font-family-serif);
}


.clock-circle {
  position:fixed;
  bottom:0px;
  right: 279px;
  height:44px;
  padding:0px 9px;
  /* width: 180px;
  height:180px; */
  display: flex;
  justify-content: center;
  align-items: center;
  color:var(--color-background-two);
  background:var(--color-text-two);
  font-family: var(--font-family-regular);
  font-size: 2.5rem;
}

.issue-one-link{
  position:fixed;
  bottom:0px;
  right:0px;
  padding:2px 10px;
  /* width: 180px;
  height:180px; */
  display: flex;
  justify-content: center;
  align-items: center;
  background:var(--color-background-two);
  font-family: var(--font-family-regular-two);
  font-size:2.5rem;
}

.issue-one-link-subpage{
  position:fixed;
  bottom:0px;
  right:88px;
  padding:2px 6px;
  /* width: 180px;
  height:180px; */
  display: flex;
  justify-content: center;
  align-items: center;
  background:var(--color-text-two);
  color:var(--color-background-two);
  font-family: var(--font-family-regular);
  font-size:2.5rem;
}



.issue-two-link{
  position:fixed;
  bottom:0px;
  right:0px;
  padding:2px 10px;
  /* width: 180px;
  height:180px; */
  display: flex;
  justify-content: center;
  align-items: center;
  background:var(--color-background-two);
  color:var(--color-text-two);
  font-family: var(--font-family-regular);
  font-size:2.5rem;
}

.issue-two-link:hover{
  color:var(--color-text);
  background:var(--color-background);
}

.issue-one-link-subpage:hover{
  background:var(--color-text);
  color:var(--color-background);
}


.designed{
  position: fixed;
  font-size:17px;
  text-align: right;
  bottom:0px;
  right: 161px;
  line-height: 1.3;
  /* left:-245px; */
  /* transform:rotate(-90deg); */
  font-family: var(--font-family-regular);
}

.designed-by{
  display: block;
  width: 110px;
  padding: 0px 6px;
  color:  var(--color-background-two);
  background: var(--color-text-two);
}

.cc{
  position: relative;
  text-align: left;
  display:block;
  width: 115px;
  padding: 0px 6px;
  background:  var(--color-background-two);
  color: var(--color-text-two);
}

.ee{
  position: relative;
  display:block;
  text-align: left;
  width: 115px;
  padding: 0px 6px;
  color:  var(--color-background-two);
  background: var(--color-text-two);
}


body.light .clock:before {
  background: var(--color-code-orange);
}

.clock .hour,
.clock .min,
.clock .sec {
  position: absolute;
}

/* length of respective arms; */
.clock .hour, .hr {
  width: 40px;
  height: 40px;
} 

.clock .min, .mn {
  width: 50px;
  height: 50px;
}

.clock .sec, .sc {
  width: 140px;
  height: 140px;
}


.hr, .mn, .sc {
  display: flex;
  justify-content: center;
  /* align-items: center; */
  position: absolute;
  border-radius: 50%;
  
}

.hr:before {
  content: '';
  position: absolute;
  width:1px;
  height: 70px;
  background:var(--color-code-orange);
  z-index: 10;
}

.mn:before {
  content: '';
  position: absolute;
  width: 1px;
  height: 80px;
  background:var(--color-code-orange);
  z-index: 11;
  /* z-index more than hour hand */
}

body.light .mn:before {
  background: var(--color-code-orange);

}


.sc:before {
  content: '';
  position: absolute;
  width: 1px;
  height: 80px;
  background: var(--color-code-orange);
  z-index: 12;
  /* z-index more than hour minute hand */
  border-radius: 3px;
}

.about{
  position: absolute;
  top: 62px;
  line-height: 1.2;
  width: 85%;
  padding-left: 1rem;
}


.about-text p{
  font-size: 32px;
  /* text-transform: uppercase; */
  width: 100%;
  margin: 20px auto;
  font-family: var(--font-family-regular);
  transition: var(--transition);
  padding-left: 1rem;
  line-height: 1.2;
  hyphens: auto;
  columns: 3;
}

.about  a:hover{ 
  color:var(--color-code-yellow);

}

.about-text{
  display: flex;
  letter-spacing: -.5px;
  font-family: var(--font-family-serif);
  font-feature-settings: "ss03";

}

.gallery-text{
  display:block;
  font-size:50px;
  color:var(--color-code-white);
  font-family: var(--font-family-serif);
  font-feature-settings:  "ss04", "ss05";
}

#pigeon {
  width:250px;
  display: flex;
}

#intro-text{
   text-decoration: underline;
}

.open{
  height: 360px;
  transition: var(--transition);
  border-bottom: 0px solid black;
  overflow-y:scroll;
}



.main{
   position:relative;
   top: 50px;
}

.medium {
  font-size: .98rem;
  letter-spacing:0px;
  font-family: "Diatype Regular";
}

text {
  font-size: 2.5rem;
  fill: black;
}

#logo {
  padding-top: 0px;
  letter-spacing: -.6px;
  padding-left:2rem;
  z-index:6;
  font-family: "Marr Sans";
  /* color: var(--color-code-purple); */
  color: var(--color-text);
  font-size: 3rem;
  text-transform: uppercase;
  /* display: flex; */
  align-items: center;
  cursor: pointer;
  opacity:1;
  font-feature-settings: "ss06", "ss04", "ss05";
}

.logo-scroll{
  position: absolute;
  opacity:0;
  top: 12px;
  letter-spacing: 0px;
  padding-left:.5rem;
  font-family: "Diatype Regular";
  /* color: var(--color-code-purple); */
  color: black;
  font-size:1.4rem;
  /* text-transform: uppercase; */
  /* display: flex; */
  align-items: center;
  cursor: pointer;
  font-feature-settings: "ss06", "ss04", "ss05";
  transition:var(--transition);
}

.scroll .logo-scroll{
  opacity:1;
  transition:var(--transition);
}

.scroll .line1{
  font-size:3rem;
   opacity:1;
   transition:1s;
   font-variation-settings: "wdth" 200, "slnt" 800;
}

.scroll .line2{
  font-size:3rem;
  opacity:1;
  transition:1s;
  font-variation-settings: "wdth" 200, "slnt" 100;
}

.noscroll .line1{
  font-size:3rem;
  transition:1s;
  font-variation-settings: "wdth" 800, "slnt" 800;
}

.noscroll .line2{
  font-size:3rem;
  transition:1s;
  font-variation-settings: "wdth" 800, "slnt" 800;
}



.menu {
  display: flex;
  align-items: center;
  height: 75px;
}

.menu a {
  padding: 0rem;
  display: block;
  margin: 0px 10px;
}

.menu a[aria-current] {
  text-decoration: underline;
}


#nav-icon {
  width: 50px;
  height: 50px;
  top:5px;
  right: 2rem;
  position: relative;
  -webkit-transform: rotate(
0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(
0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}




#nav-icon span {
  display: block;
  position: absolute;
  height: 3px;
  width: 80%;
  background: var(--color-text);
  opacity: 1;
  left: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: rotate(
0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(
0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}



#nav-icon span:nth-child(1) {
  top: 0px;
}


 #nav-icon span:nth-child(2) {
  top: 8px;
}

 #nav-icon span:nth-child(3) {
  top: 16px;
}

#nav-icon.open-icon span:nth-child(1) {
  -webkit-transform: rotate(
45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(
45deg);
  top: -6px;
  left: 6px;
}

#nav-icon.open-icon span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon.open-icon span:nth-child(3) {
  -webkit-transform: rotate(
-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(
-45deg);
top: 22px;
   left: 6px;
}


.about a {
  font-size: 16px !important;
}

.social {
  display: flex;
  padding: 0 .5rem;
}
.social a {
  padding: 1rem .5rem;
}

.section {
  padding: 0rem 0;
}


.autogrid {
  --gutter: 0rem;
  --min: 10rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
  grid-auto-flow: dense;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.text {
  line-height: 1.5;
  /* font-family: "Life";
  padding:0 3rem; */
}

.text a {
  text-decoration: underline;
}
.text :first-child {
  margin-top: 0;
}
.text :last-child {
  margin-bottom: 0;
}
.text p,
.text ul,
.text ol {
  margin-bottom: 1.4rem;
}
.text ul,
.text ol {
  margin-left: 1rem;
}
.text ul p,
.text ol p {
  margin-bottom: 0;
}
.text ul > li {
  list-style: disc;
}
.text ol > li {
  list-style: decimal;
}
.text ul ol,
.text ul ul,
.text ol ul,
.text ol ol {
  margin-bottom: 0;
}
.text h1,
.h1,
.intro {
  font-size: 2rem;
  margin-bottom: 1rem;
  line-height: 1.25em;
}
.text h2,
.h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.text h3,
.h3 {
  font-weight: 600;
}
.text .codeblock {
  display: grid;
}
.text code {
  font-family: var(--font-family-mono);
  font-size: 1em;
  background: var(--color-light);
  padding: 0 .5rem;
  display: inline-block;
  color: var(--color-black);
}
.text pre {
  margin: 3rem 0;
  background: var(--color-black);
  color: var(--color-white);
  padding: 1.5rem;
  overflow-x: scroll;
  overflow-y: hidden;
  line-height: 1.5rem;
}
.text pre code {
  padding: 0;
  background: none;
  color: inherit;
}
.text hr {
  margin: 6rem 0;
}
.text dt {
  font-weight: 600;
}
.text blockquote {
  font-size: 1.25rem;
  line-height: 1.325em;
  border-left: 2px solid var(--color-black);
  padding-left: 1rem;
  margin: 3rem 0;
  max-width: 25rem;
}
.text blockquote footer {
  font-size: .875rem;
  font-style: italic;
}
.text figure {
  margin: 3rem 0;
}
.text figcaption {
  padding-top: .75rem;
  color: var(--color-text-grey);
}

/* .headline{
  color:black; 
  font-family: "Life";
} */

.bar{
  letter-spacing: -.12rem;
}

.example-name {
  position: relative;
  /* border-bottom: 2px solid black; */
  /* display: block; */
  z-index: 0;
  font-family: var(--font-family-regular);
  width: 420px;
  text-align: left;
  /* border-radius: 100%; */
  /* padding: 10px 0px; */
  line-height: 1.2;
  /* text-transform: uppercase; */
  margin-top: 8px;
  font-size: 1.6rem;
  background:  transparent;
  color: var(--color-primary-text);
  opacity:1;
  cursor:default;
}

.example-name > p{
  padding: 5px;
}

.source-text{
  position: inline;
  /* border-bottom: 2px solid black; */
  /* display: block; */
  z-index: 0;
  width: fit-content;
  font-family: var(--font-family-regular);
  /* margin: 0px 20px; */
  text-align: left;
  /* border-radius: 100%; */
  /* padding: 10px 0px; */
  padding: 5px;
  line-height: 1.2;
  /* text-transform: uppercase; */
  /* margin: 10px; */
  cursor:default;
  font-size: 1.5rem;
  margin-top:0px;
  background:  var(--color-primary-text);
  color:var(--color-primary-text-second);
  opacity:1;
}

.primary-text {
  position: inline;
  /* border-bottom: 2px solid black; */
  /* display: block; */
  z-index: 0;
  font-family: var(--font-family-regular);
  /* margin: 0px 20px; */
  text-align: left;
  /* border-radius: 100%; */
  /* padding: 10px 0px; */
  padding: 5px;
  line-height: 1.2;
  /* text-transform: uppercase; */
  /* margin: 10px; */
  cursor:default;
  font-size: 1.5rem;
  margin-top:0px;
  background:  var(--color-primary-text);
  color:var(--color-primary-text-second);
  opacity:1;
}

.primary-text-two {
  padding: 5px;
  margin-top: 2px;
  color:  var(--color-primary-text);
  background:var(--color-primary-text-second);
}

.read-more{
  background:  var(--color-primary-text);
  color: var(--color-primary-text-second);
  cursor:pointer;
  width:fit-content;
}

.read-more:hover{
  color:  var(--color-primary-text);
  background: var(--color-primary-text-second);
}

hr {
  border: 0;
  background: currentColor;
  height: 2px;
  width: 1.5rem;
  margin: 3rem auto;
}

.align-center {
  text-align: center;
}

.intro {
  max-width: 40rem;
}
.intro *:not(:last-child) {
  margin-bottom: 1em;
}

.cta {
  background: var(--color-black);
  color: var(--color-white);
  display: inline-flex;
  justify-content: center;
  padding: .75rem 1.5rem;
  border: 4px solid var(--color-white);
  outline: 2px solid var(--color-black);
}

.box {
  background: var(--color-light);
  padding: 1.5rem;
  border: 4px solid var(--color-white);
  outline: 2px solid var(--color-light);
}

.video,
.img {
  position: relative;
  display: block;
  --w: 1;
  --h: 1;
}

.img[data-contain] img {
  object-fit: contain;
}





.map {
  --w: 2;
  --h: 1;
  padding-bottom: calc(100% / var(--w) * var(--h));
  position: relative;
  overflow: hidden;
  background: var(--color-black);
}
.map iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.margin-s {
  margin-bottom: .75rem;
}
.margin-m {
  margin-bottom: 1.5rem;
}
.margin-l {
  margin-bottom: 3rem;
}
.margin-xl {
  margin-bottom: 4.5rem;
}
.margin-xxl {
  margin-bottom: 6rem;
}


.next{
  font-size:45px;
  text-align: center;
  background: var(--color-code-red);
  color:var(--color-white);
  width:60px; 
  padding: 20px;
  border-radius:100%
}

.prev{
  font-size:45px;
  text-align: center;
  background: var(--color-code-red);
  width:60px; 
  padding: 20px;
  border-radius:100%
}

.next:hover{
  background:var(--color-code-orange);
}

.prev:hover{
  background:var(--color-code-orange);
}

@media screen and (max-width: 1600px) {
  .issue-description > p{
    line-height: 1.2;
    margin: 0px 20px;
    font-size: 1.4rem;
  }

  .issue-title {
    margin: 0px 20px;
    font-size: 2.4rem;
    height: 25px;
}

.example-name {
  line-height: 1.2;
  font-size: 1.3rem;
}



.primary-text {
line-height: 1.2;
font-size: 1.3rem;
}

}


@media screen and (max-width: 1300px) {
  .issue-description > p{
    line-height: 1.2;
    margin: 0px 20px;
    font-size: 1.4rem;
  }

  .issue-title {
    margin: 0px 20px;
    font-size: 2.4rem;
    height: 25px;
}

  .example-name {
    line-height: 1.2;
    font-size: 1.3rem;
    width:100%
  }

  .source-text {
    line-height: 1.2;
    font-size: 1.3rem;
  }


.primary-text {
  line-height: 1.2;
  font-size: 1.3rem;
}


#logo {
  font-size: 3rem;
}


.line1{
  font-size:3rem;
  font-family: "Lines";
  display:inline-block;
  font-variation-settings: "wdth" 500, "slnt" 800;
}

.line2{
  font-size:3rem;
  font-family: "Lines";
  display:inline-block;
  font-variation-settings: "wdth" 500, "slnt" 800;
}


.scroll .line1{
  font-size:3rem;
   opacity:1;
   transition:1s;
   font-variation-settings: "wdth" 200, "slnt" 800;
}

.scroll .line2{
  font-size:3rem;
  opacity:1;
  transition:1s;
  font-variation-settings: "wdth" 200, "slnt" 100;
}

.noscroll .line1{
  font-size:3rem;
  transition:1s;
  font-variation-settings: "wdth" 500, "slnt" 800;
}

.noscroll .line2{
  font-size:3rem;
  transition:1s;
  font-variation-settings: "wdth" 500, "slnt" 800;
}

.about-text p {
font-size: 23px;
/* text-transform: uppercase; */
width: 100%;
margin: 20px auto;
font-family: var(--font-family-regular);
transition: var(--transition);
padding-left: 1rem;
line-height: 1.2;
hyphens: auto;
columns: 1;
letter-spacing: .2px;
padding-right: 232px;
}

}

@media screen and (max-width: 900px) {

  .scroll-read{
    display: block;
    margin: 0px 0px;
    font-size: 1.45rem;
    padding: 15px 10px;
    padding-top:17px;
    height: 0px;
    display: block;
    width: fit-content;
    font-family: var(--font-family-regular);
    font-size: 1.3rem;
    color: var(--color-box);
    background:var(--color-bar);
  }

.home-grid {
  width: 95%;
  grid-template-columns: repeat(1, 1fr);
}

.issue-description {
  height:290px;
  overflow-y: scroll;
}


.issue-description::-webkit-scrollbar {
  width:1em;
  /* border-left:5px solid black; */
  /* background-image:
  linear-gradient(45deg, var(--color-code-orange) 25%, transparent 25%), 
  linear-gradient(135deg, var(--color-code-orange) 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, var(--color-code-orange) 75%),
  linear-gradient(135deg, white 75%, var(--color-code-orange) 75%); */
background-size:10px 10px; /* Must be a square */
 background-position:0 0, 5px 0, 5px -5px, 0px 5px; 
background: transparent;
}

.issue-description::-webkit-scrollbar-thumb {
  /* background-image: repeating-linear-gradient(45deg, transparent, transparent 3px, #ffffff 3px, #ffffff 6px);
  background-color: #000000; */
  background: var(--color-background);
}


.issue-description > p{
  line-height: 1.2;
  margin: 0px 0px;
  font-size: 1.3rem;

}

.issue-title {
  margin: 0px 0px;
  font-size: 1.45rem;
  padding: 16px 10px;
  padding-top:17px;
  height: 0px;
  display: block;
  width: fit-content;
}

  .main {
    top: 50px !important;
}

  .header {
    height:48px;
  }

  .about {
    top: 50px !important;
    line-height: 1.1;
}

.about a {
  font-size: 16px !important;
  transition: var(--transition);
  line-height: 1.1;
}


.scroll{
  height:48px;
}

.open {
  height: 630px !important;
  overflow-y: scroll;
}

.about-text {
  display: block;
  letter-spacing: -.5px;
  font-feature-settings: "ss03";
}

.about-text p {
  font-size: 27px;
  /* text-transform: uppercase; */
  width: 95%;
  line-height: 1.2;
  transition: var(--transition);
  padding-left: 1rem;
  padding-bottom: 1rem;
  hyphens: auto;
  columns: 1;
}

.menu {
  height:48px;
  transition:var(--transition);
}

#logo {
  letter-spacing: 0rem;
  font-size: 1.7rem;
  margin-top: 1px;
  letter-spacing: -.2px;
  font-family: "Marr Sans";
  padding-left: 1rem;
  }

  .line1{
    font-size:2rem;
    font-family: "Lines";
    display:inline-block;
    font-variation-settings: "wdth" 200, "slnt" 800;
  }
  
  .line2{
    font-size:2rem;
    font-family: "Lines";
    display:inline-block;
    font-variation-settings: "wdth" 250, "slnt" 800;
  }

  .scroll .line1{
    font-size:2rem;
     opacity:1;
     transition:1s;
     font-variation-settings: "wdth" 500, "slnt" 800;
  }
  
  .scroll .line2{
    font-size:2rem;
    opacity:1;
    transition:1s;
    font-variation-settings: "wdth" 150, "slnt" 800;
  }
  
  .noscroll .line1{
    font-size:2rem;
    transition:1s;
    font-variation-settings: "wdth" 200, "slnt" 800;
  }
  
  .noscroll .line2{
    font-size:2rem;
    transition:1s;
    font-variation-settings: "wdth" 250, "slnt" 800;
  }

  /* .noscroll #logo{
    font-size: 1.8rem;
    transition:var(--transition);
  } */
  

#nav-icon {
  width: 40px;
  height: 52px;
  top: 14px;
  right: 0rem;
  position: relative;
  -webkit-transform: rotate(
0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(
0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}

#nav-icon span {

  height: 2px;
  width: 80%;

}
.scroll #nav-icon span {
  height: 2px;
  width: 80%;
}

#nav-icon span:nth-child(1) {
  top: 0px;
}

#nav-icon span:nth-child(2) {
  top: 8px;
}

#nav-icon span:nth-child(3) {
  top: 16px;
}


#nav-icon.open-icon span:nth-child(1) {
  -webkit-transform: rotate(
45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(
45deg);
  top: -2px;
  left: 2px;
}

#nav-icon.open-icon span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon.open-icon span:nth-child(3) {
  -webkit-transform: rotate(
-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(
-45deg);
   top: 20px;
   left: 2px;
}



img {
  width: 100%;
  filter:grayscale(0%);
  box-shadow: none  ; 
	-webkit-box-shadow: none ; 
	-moz-box-shadow:none  ; 
  opacity:1;
  /* transform: perspective(3000px) rotateY(0deg); */
  transition: transform 2s ease 3s;
}


.clock-circle {
    position: fixed;
    bottom: 31px;
    right: 0;
    height: 18px;
    padding: 2px 0px;
    padding-left: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-family-regular);
    font-size: 1.5rem;
}

#utk-circle{
  text-decoration: none;
  padding: 0px 6px;
  height: 22px;
  color: var(--color-code-green);
  font-size: 19px;
  margin-left: 7px;
  background: var(--color-code-forest);
  }

.issue-two-link{
  position:fixed;
  bottom:0px;
  right:0px;
  padding:2px 10px;
  /* width: 180px;
  height:180px; */
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family-regular);
  font-size:1.68rem;
}


.issue-one-link{
  position:fixed;
  bottom:0px;
  right:0px;
  padding:2px 10px;
  /* width: 180px;
  height:180px; */
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family-regular);
  font-size:1.68rem;
}

.issue-one-link-subpage{
  position: fixed;
  bottom: 0px;
  right: 66px;
  padding: 2px 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family-regular);
  font-size: 1.68rem;
  }

.designed{
  position: fixed;
  font-size:12px;
  text-align: right;
  bottom:0px;
  right:118px;
  height:31px;
  line-height: 1.3;
  /* left:-245px; */
  /* transform:rotate(-90deg); */
  font-family: var(--font-family-regular);
}

.designed-by{
  display: block;
  width: fit-content;
  padding: 0px 6px;
}

.cc{
  position: relative;
  display:block;
  width: 80px;
  padding: 0px 6px;

}

.ee{
  position: relative;
  display:block;
  width: 80px;
  padding: 0px 6px;
}
  
}