@font-face{
  font-family: myfont;
   src: url(sysfont.woff2);
  
}
html{
font-family: myfont;
text-underline-offset: 0.4em;
}



:root {
    --main-color:rgb(255, 167, 73);
    --secondary-color:rgb(13, 12, 12);
    --white-color:rgb(246, 245, 240);
    --link-color: rgb(0, 0, 255);
 
    

}

nav{
width: 60%;  
margin: auto;
}

.nav-link{
display: inline-block;
width: 15%;
text-align: center;
border-left: 1px solid black;
font-size: x-large;

}


body{
     min-width:300px;        /* Suppose you want minimum width of 1000px */
   width: auto !important;  /* Firefox will set width as auto */
   width:1000px;    
  cursor: url(resurser/pointer.svg), auto;
  font-size: large;
  line-height: 140%;
  
    color: var(--secondary-color);
-webkit-font-smoothing: none;
font-kerning: none;

    image-rendering: pixelated;
    display: grid;
    grid-template-columns: auto 60vw auto;
grid-template-areas: "hd hd hd"
"sdr main sdl";
grid-gap: 10px;
background-color: var(--white-color);


}


.main{
grid-area: main;
margin: auto;
width: 100%;
overflow-x: hidden;



}



.sdr{
grid-area: sdr;
}
header{
 grid-area: hd;   
 width: 100%;
 margin: auto;
 text-align: center;
}


.rader-tre{
grid-template-columns: 1 2 3;
grid-template-rows: 1 2 3;

}
.iframe{
    min-height: 50vh;
   width: 100%;
    margin: auto;
    
}
.dot{
text-shadow: 1px 1px 0px black;

}
.dot:after{content: "<-";visibility: hidden; height:auto;}

.dot:hover:after {display: inline-block;visibility: visible;}
.dot:hover{ text-decoration: none;
  color: rgb(192, 216, 255);
  text-shadow: 1px 1px 0px rgb(153, 153, 153);
cursor: none;
}


.border{
 padding: 0.5vw;
border: 3px solid var(--secondary-color);
   border-style: double;
   border-radius: 2px;

background-color: var(--white-color);
}

.green{

color: rgb(166, 255, 179);
text-shadow: 1px 2px 0px rgb(146, 146, 146);
}



.hem:link{
    color: black;
text-shadow: 1px 1px 0px rgb(131, 131, 131) !important;
  }
.hem:hover{
  color: rgb(199, 199, 199) !important;
  text-shadow: 1px 1px 0px rgb(139, 139, 139);
  text-decoration: none !important;
   }
   .hem:visited{
    color: black;

    text-shadow: 1px 1px 0px rgb(145, 145, 145);
   }

/*.  SCROLL.   */
        .scroll {

        overflow-y: scroll;
        padding: 10px;
        max-height: 2fr;


        }

        .scroll::-webkit-scrollbar {
                    width: 15px;
                    -webkit-appearance: none;
                }

        .scroll::-webkit-scrollbar-track {
                background-image: url(resurser/ditherhalftone.svg);
     

                }

        .scroll::-webkit-scrollbar-thumb {
                
        background-color: rgb(96, 234, 28);
        border: 3px outset rgb(103, 197, 32);; 
        height: 10vh;
        
                }

        .scroll::-webkit-scrollbar-thumb:hover {
                    background: rgb(177, 255, 151);
                      border: 3px outset rgb(210, 255, 191);; 
                }

        .scroll::-webkit-scrollbar-thumb:active{

        background: #1414141f; 

        border: 2px dotted black;
      
        }




/*LÄNKAR*/


            a:link {
            color: var(--link-color);
 
            background-color: transparent;
            text-decoration: none;
            margin: auto;
            text-align: center;
              
            }
            a:visited {
            color: var(--link-color);
            background-color: transparent;
  
            }
            a:hover {
            color: rgb(255, 0, 230);
            background-color: transparent;
            text-decoration: wavy underline;
            cursor: url(resurser/link.svg), auto;
          

            }
            a:active {
            color: rgb(255, 255, 255);
            font-weight: bold;
            text-decoration: none;
            cursor: url(link2.svg),
            }


/*Marquee*/

/* Marquee styles */
.marquee {
  padding: none;
  --gap: 0px;
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: none;
}

.marquee__content {
  flex-shrink: 0;
  display: flex;
  
  gap: var(--gap);
  min-width: 100%;
    animation: scroll 20s linear infinite;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

.img{
object-fit: contain;
image-rendering: pixelated;

}

.center{
text-align: center;
}

/* Pause on hover */
.marquee--hover-pause:hover .marquee__content {
  animation-play-state: paused;
  color: white;
  background-color: black;
}



@keyframes scroll-abs {
  from {
    transform: translateX(calc(100% + var(--gap)));
  }
  to {
    transform: translateX(0);
  }
}

/* Other page demo styles */
.marquee__content > * {
  flex: 0 0;
  margin: none;
  list-style-type: none;
}

.marquee {
  border-bottom: 2px dashed rgb(0, 0, 0);
}