body {
  margin: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(b22aa22b2f3f55b6468361158d52e2e7.gif);
  background-attachment: fixed;
  background-color: black;
}

.container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(25, 1fr);
  position: relative;
  width: 100%;
  height: 350vh;
  overflow: hidden;
}

.header{
  flex-direction: column;
  position: fixed;
  top: 50%;
  width: 90px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: rgb(42, 56, 56);
  z-index: 10;
  flex: 1;
  height: auto;
  left: 50px;
  transform: translateY(-50%);
  border-radius: 50px;

}

.text {
  grid-column: 2 / span 8;
  grid-row: 3 / 5;   
  z-index: 2;
  color: rgb(255, 255, 255);
  font-size: 6vw;
  font-family: "Tagesschrift", system-ui;
  align-self: center;           
  justify-self: center;
}


.buttons1{
  color: rgb(255, 255, 255);
  background: none;
  height: 50px;
  width: 80px;
  border-radius: 30px;
  border-color: transparent;
  font-family: "Tagesschrift", system-ui;
  margin-bottom: 40px;
  margin-top: 40px;
  cursor: pointer;
  
}

.buttons1:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  background-color: rgb(71, 71, 78);
  transition: 0,1s;
}

.about-me{
  grid-column: 4 /span 7;
  grid-row: 11 / span 4;
  z-index: 2;
  color: white;
  font-size: 2vw;
  font-family: "Tagesschrift", system-ui;
  width: 60%;
  text-align: left;
}
.contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 30px;
}

.Contacts {
  display: flex;
  justify-content: center;
  align-items: end;
  grid-row: 25 / 26;
  grid-column: 1 / span 10;
  background-color: black;
  width: 100%;
  align-self: end;
  padding: 20px 0;
}

.number, .mail {
  color: white;
  font-size: 2vw;
  margin: 5px 0 0 0;
  font-family: "Tagesschrift", system-ui;
}

.email, .phone {
  width: 2vw;
  height: 4vh;
  object-fit: cover;
  cursor: pointer;
}

.name{
  color: white;
  font-size: 4vw;
  font-family: "Tagesschrift", system-ui;
  grid-column: 4 / 9;
  grid-row: 4 / span 6;
  position: absolute;
}

.info{
  grid-column: 4 / span 4;
  grid-row: 10/ span 5;
  z-index: 2;
  color: white;
  font-size: 6vw;
  font-family: "Tagesschrift", system-ui;
  text-align: center;


}

.projects{
  grid-column: 4 / span 4;
  grid-row: 16 / span 2;
  color: white;
  color: white;
  font-size: 6vw;
  font-family: "Tagesschrift", system-ui;
  text-align: center;
}

.expflex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  width: 75%;
  grid-column: 3 /span 8;
  grid-row: 19 / 23;
}

.exp, .exp2, .exp3, .exp4, .exp5, .exp6 {
  width: 300px;
  height: 200px;
  border-radius: 35px;
  border: none;
  background-color: rgb(155, 155, 155);
  opacity: 0.8;
  margin: 10px;
  position: relative;
 
}

.figma{
  width: 100%;
  height: 80%;
  border-radius: 35px;
  object-fit: cover;
}

.skr{
  height: 80%;
  width: 100%;
  border-radius: 35px;
  object-fit: contain;
  margin-top: 10px;
}

.skrnamn{
  color: rgb(0, 0, 0);
  font-size: 40px;
  font-family: "Tagesschrift", system-ui;
  background-color: rgb(107, 104, 104);
  border-radius: 0 0 35px 35px;
  width: 100%;
  position: absolute;
  padding: 5px 0;
  text-align: center;
  left: 0;
  bottom: 0;
}
.lgo{
  height: 80%;
  width: 100%;
  border-radius: 35px;
  object-fit: contain;
  margin-top: 10px;
}

.bilar{
  height: 80%;
  width: 100%;
  border-radius: 35px;
  object-fit: contain;
}

.lgonamn{
  color: rgb(0, 0, 0);
  font-size: 40px;
  font-family: "Tagesschrift", system-ui;
  background-color: rgb(107, 104, 104);
  border-radius: 0 0 35px 35px;
  width: 100%;
  position: absolute;
  padding: 5px 0;
  text-align: center;
  left: 0;
  bottom: 0;
}

.figmanamn{
  color: rgb(0, 0, 0);
  font-size: 40px;
  font-family: "Tagesschrift", system-ui;
  background-color: rgb(107, 104, 104);
  border-radius: 0 0 35px 35px;
  width: 100%;
  position: absolute;
  padding: 5px 0;
  text-align: center;
  left: 0;
  bottom: 0;
}

.bilarnamn{
  color: rgb(0, 0, 0);
  font-size: 40px;
  font-family: "Tagesschrift", system-ui;
  background-color: rgb(107, 104, 104);
  border-radius: 0 0 35px 35px;
  width: 100%;
  position: absolute;
  padding: 5px 0;
  text-align: center;
  left: 0;
  bottom: 0;
}

.exp:hover, .exp2:hover, .exp3:hover, .exp4:hover, .exp5:hover, .exp6:hover{
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  background-color: rgb(71, 71, 78);
  transition: 0.1s;
}


@media (max-width: 580px) {

  html{
    height: 100%;
  }
  body {
    background-attachment: fixed;
    height: 100%;
  }
  .container {
    grid-template-rows: repeat(27, 1fr);
    height: 450vh;
  }
  .text {
    font-size: 10vw;
    grid-column: 2 / span 8;
    grid-row: 2 / 4;
  }
  .header{
    flex-direction: row;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    grid-row: none;
    grid-column: none;
    transform: translateY(0%);
    height: 70px;
    border-radius: 0;
  }

  .name {
    font-size: 8vw;
    grid-column: 2 / span 8;
    grid-row: 3 / 7;
  }

  .about-me {
    font-size: 4vw;
    grid-column: 3 / span 8;
    grid-row: 10 / span 6;
    width: 80%;
  }

  .info {
    font-size: 10vw;
    grid-column: 2 / span 8;
    grid-row: 9 / span 2;
  }

  .projects {
    font-size: 10vw;
    grid-column: 2 / span 8;
    grid-row: 16 / span 3;
  }
 .figmanamn{
   color: rgb(0, 0, 0);
   font-size: 4vw;
   font-family: "Tagesschrift", system-ui;
   background-color: rgb(107, 104, 104);
   border-radius: 0 0 35px 35px;
   width: 100%;
   position: absolute;
   padding: 5px 0;
   text-align: center;
   left: 0;
   bottom: 0;
 }
  .expflex {
    height: 30%;
    width: 100%;
    grid-column: 1 /11;
    grid-row: 18 / span 5;
  }

  .exp, .exp2, .exp3, .exp4, .exp5, .exp6 {
    min-width: 30%;
    max-width: 47%;
    min-height: 40%;
    max-height: 57%;
    border-radius: 35px;
    border: none;
    background-color: rgb(155, 155, 155);
    opacity: 0.8;
    margin: 10px;
    position: relative;
  }
  .exp:hover, .exp2:hover, .exp3:hover, .exp4:hover, .exp5:hover, .exp6:hover{
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  background-color: rgb(71, 71, 78);
  transition: 0,1s;
 }
 .Contacts {
    grid-row: 30 / 31;
  }
  .buttons1:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  background-color: rgb(71, 71, 78);
  transition: 0,1s;
}
}

@media (max-width: 630px) and (min-width: 581px) {
  .container {
    grid-template-rows: repeat(30, 1fr);
    height: 425vh;
  }
  .text {
    font-size: 12vw;
    grid-column: 2 / span 8;
    grid-row: 2 / 4;
  }
  .header{
    flex-direction: row;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    grid-row: none;
    grid-column: none;
    transform: translateY(0%);
    height: 70px;
    border-radius: 0;
  }

  .name {
    font-size: 8vw;
    grid-column: 2 / span 8;
    grid-row: 3 / 7;
  }

  .about-me {
    font-size: 5vw;
    grid-column: 3 / span 8;
    grid-row: 9 / span 6;
    width: 80%;
  }

  .info {
    font-size: 12vw;
    grid-column: 2 / span 8;
    grid-row: 8 / span 2;
  }

  .projects {
    font-size: 12vw;
    grid-column: 2 / span 8;
    grid-row: 15 / span 3;
  }

  .expflex {
    width: 100%;
    grid-column: 1 /11;
    grid-row: 17 / span 5;
  }
  .exp, .exp2, .exp3, .exp4, .exp5, .exp6 {
    min-width: 100px;
    max-width: 300px;
    min-height: 100px;
    max-height: 200px;
    border-radius: 35px;
    border: none;
    background-color: rgb(155, 155, 155);
    opacity: 0.8;
    margin: 10px;
    position: relative;
  }
  .exp:hover, .exp2:hover, .exp3:hover, .exp4:hover, .exp5:hover, .exp6:hover{
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  background-color: rgb(71, 71, 78);
  transition: 0.1s;
  cursor: pointer;
 }
 .Contacts {
    grid-row: 30 / 31;
  }
  .buttons1:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  background-color: rgb(71, 71, 78);
  transition: 0,1s;
}
}

@media (max-width: 1083px) and (min-width: 631px) {

  .container {
    grid-template-rows: repeat(27, 1fr);
    height: 350vh;
  }
  .text {
    font-size: 10vw;
    grid-column: 2 / span 8;
    grid-row: 2 / 4;
  }
  .header{
    flex-direction: row;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    grid-row: none;
    grid-column: none;
    transform: translateY(0%);
    height: 70px;
    border-radius: 0;
  }

  .name {
    font-size: 8vw;
    grid-column: 2 / span 8;
    grid-row: 3 / 7;
  }

  .about-me {
    font-size: 3vw;
    grid-column: 3 / span 8;
    grid-row: 11 / span 6;
    width: 80%;
  }

  .info {
    font-size: 10vw;
    grid-column: 2 / span 8;
    grid-row: 9 / span 2;
  }

  .projects {
    font-size: 10vw;
    grid-column: 2 / span 8;
    grid-row: 17 / span 3;
  }

  .expflex {
    width: 100%;
    grid-column: 1 /11;
    grid-row: 20 / span 5;
  }

  .exp, .exp2, .exp3, .exp4, .exp5, .exp6 {
    min-width: 150px;
    max-width: 270px;
    min-height: 130px;
    max-height: 200px;
    border-radius: 35px;
    border: none;
    background-color: rgb(155, 155, 155);
    opacity: 0.8;
    margin: 10px;
    position: relative;
  }
  .exp:hover, .exp2:hover, .exp3:hover, .exp4:hover, .exp5:hover, .exp6:hover{
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  background-color: rgb(71, 71, 78);
  transition: 0,1s;
 }
 .Contacts {
    grid-row: 30 / 31;
  }
  .buttons1:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  background-color: rgb(71, 71, 78);
  transition: 0,1s;
}

}