html{
  height: 100%;

}
body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;


}
#grid-portfolio{
 
   width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns:25% 18% 32% 25%;
  grid-template-rows:1fr 1fr 1fr 1fr 1fr 1fr 1fr;


}

@font-face{
  font-family:"DeterminationMonoWebRegular";
  src: url(../DeterminationMonoWebRegular-Z5oq.ttf);
}
#portfolio-background{
  position:fixed;
  
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index:-1;
  display: flex;
  

}
.mitt-namn{
  grid-row: 1;
  grid-column: 2/4;
  display: flex;
  align-items: center;
  justify-content:space-around;
  margin-top: 42px;
  
  width:100%;
 
}



.menu-buttons{
  font-size:40px;
   color: white;
   font-family:DeterminationMonoWebRegular;
   margin-left:40px;
   
  
   display: inline-block;
   
  
}
.menu-buttons:hover {
  color: yellow;
  cursor: pointer;
  transform: scale(1.05);
  
  
  
  
}
.main-content{
  grid-row: 2/6;
 
  display: flex; 
  flex-direction: column;
  /* row-gap: 100px; */
  
  
}

header{
    display: flex;
    justify-content: center;
}
a{
text-decoration: none;
}

li.text {
	margin-left: 20px;
	margin-top: 20px;
	line-height: 15px;
	word-spacing: 5px;
	letter-spacing: 3px;
	display: flex;
}

p.ast {
	
	margin: 15px;
  position: relative;
  display: table;
  
}
a{
   font-family:"DeterminationMonoWebRegular";
  color: white;

}
a :hover{
  color: yellow;
}
 




li.list {
	margin-top: 20px;
	margin-left: 5px;
	word-spacing: 5px;
	letter-spacing: 3px;
}
.ast{
  font-family:"DeterminationMonoWebRegular";
  color: white;
    
 
}

.ul1{
  grid-row: 2/4;
  grid-column: 2/4;
 display:grid;
  
  width:30%;

	border: 7px solid #fff;
	
	height:70%;
	padding: 0;
  margin-left:0px;
  background-color: black;
  font-size: 45px;
  display: none;
}
.ul2{
  grid-row: 3/5;
  grid-column: 2/4;
 display:grid;
  grid-template-columns:25% 25% 25% 25%;
  grid-template-rows:25% 25% 25% 25% ;
  width:30%;
	border: 7px solid #fff;
	height:100%;
  margin-top:9%;
  margin-left:0px;
	
	padding: 0;
  display: flex;
  flex-direction: column;
  display: none;
  
  background-color: black;
  overflow: hidden;
}
.ul3 {
  grid-row: 2/7;
  grid-column: 3/6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 7px solid #fff;
  width: 68%;
  background-color: black;
  display: inline-block;
  
 
  font-size: 60px;
  height: 100%;
  overflow: hidden; 
  display: none; 

  
}


.project-placement {
  width: 100%;
  height: 100%;
  overflow-y: scroll; /* kan fortfarande skrolla */
  padding: 20px 40px;
  box-sizing: border-box;

  /* gömmer äckliga scrollbar*/
  scrollbar-width: none;      
  -ms-overflow-style: none;   
}

.project-placement::-webkit-scrollbar {
  display: none;              
}



.project-placement p.ast:hover {
  color: yellow;
  cursor: pointer;
  transform: scale(1.02);
 
}

.ul4{
  display:grid;
  grid-row: 5/7;
  grid-column: 2/4;
  margin-right: 0;
  margin-left:0;
  
 
  
  
	border: 7px solid #fff;
	width: 100%;
	height:100%;
	padding: 0;
  font-size: 25px;
  display: flex;
  
  background-color: black;
  visibility:hidden;
  
  
}
.ul5{
  display:grid;
  grid-row: 5/7;
  grid-column: 2/4;
  margin-right: 0;
  margin-left:0;
  
 
  grid-template-columns:25% 25% 25% 25%;
  grid-template-rows:25% 25% 25% 25% ;
  
	border: 7px solid #fff;
	width: 100%;
	height:100%;
	padding: 0;
  font-size: 30px;
  display: flex;
  
  background-color: black;
  visibility:hidden;
  

  
 
 
}
.heart-project{
  
  width: 30px;
  height: 30px;
  display: inline-block;
  

}

.back-div{
display: inline-block;
}


.back-div :hover{
   color: yellow;
  cursor: pointer;
  transform: scale(1.05);
}
.project-placement p.ast {
  position: relative;
  font-family: "DeterminationMonoWebRegular";
  color: white;
  margin: 25px 0;
 
  padding-left: 40px; 
}


.project-placement p.ast::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 24px;
  height: 24px;
  background: url("../bilder/628b87a35ad06bc16f4fe050.png") no-repeat center center;
  background-size: contain;
  
}

/* Hover effect — show the heart */
.project-placement p.ast:hover::before {
  transform: translateY(-50%) scale(1.2);
}

.project-placement p.ast:hover {
  color: yellow;
  cursor: pointer;
  transform: scale(1.02);
}
.undertale-star{
  width: 100px;
  height: 100px;
  display: inline-block;
  display: flex;
  
}
.undertale-star :hover{
  cursor: pointer;
  
}
#funka p.ast, #funka2 p.ast {
  font-family: "DeterminationMonoWebRegular";
  color: white;
  font-size: 25px;
  line-height: 1.6;
  white-space: pre-wrap;
}
.annoying-dog{
 width:100%;
 height:100%;
position: relative;
 top:20% ;
 
}
#back-button{
  
}




















@media (width <= 800px) {
  #grid-portfolio{
 
   width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns:30% 5% 30% 35%;
  grid-template-rows:1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }
   
  #portfolio-background{
    position:fixed;
  
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index:-1;

    }

    .menu-buttons:hover {
      color: yellow;
      cursor: pointer;
      transform: scale(1.05);
      
      
    }
    .menu-buttons{
      font-size:5.5vw;

    }
    #back-button :hover{
cursor: pointer;
}
.ul1{
  font-size: 8px;
  margin-left: 5px;
  grid-column: 1;
  grid-row: 2;
  width: 90%;
  height:85% ;
  margin-right: 0;
  font-size: 25px;
}
#back-button{
font-size: 25px;  
}
.ast{
  

}
.ul3{
  grid-row: 2/7;
  grid-column: 3/7;
  width: 100%;
  font-size: 25px;

}
.ul2{
  grid-column: 1;
 
  width: 90%;
  height: 80%;
  margin-left: 5px; 
  margin-right: 0;
}
.project-placement p.ast::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 12px;
  height: 12px;
  background: url("../bilder/628b87a35ad06bc16f4fe050.png") no-repeat center center;
  background-size: contain;
}
.p.ast{
  display: table;
}
.project-placement p.ast {
  position: relative;
  font-family: "DeterminationMonoWebRegular";
  color: white;
  margin: 25px 0;
 
  padding-left: 20px; 
}
.project-placement{
  padding-left: 15px;
}
.annoying-dog{
  width: 100%;
  height: 100%;
}
.ul4{
  display: grid;
 grid-column:1;
 grid-row:6;
 width: 400px;
 

}
.ul5{
  display: grid;
 grid-column:1;
 grid-row:6;
 width: 400px;
 
 display: inline-block;

}
#star1{
  scale: 0.8;
}
#star2{
  scale: 0.8;
}



  
}