/*Grid*/
.wrapper {
    width:100%;
    height:100%;
    display: grid;
    grid-template-columns:5vw 25vw 1vw 19vw 19vw 1fr ;
    grid-template-rows: 1vh 5vh 2vh 12vh 5vh 10vh 5vh 10vh 5vh 10vh 30vh 5vh;

}
body{
    margin: 0;
    background-color: black;
    user-select:none;
}
/*Random grejer som används i alla sidor*/
.text{
    color: white;
    border-color: black;
}
.linjeligger{
    width: 100%;
    height: 3px;
    background-color: white;
    grid-row:5; 
    grid-column:1/7;
}
.knapp{
    background-color: black;
    color:white;
    border-style:solid;
    border-color: white;
    border-radius: 10px;
    font-size: 6vw;
    width: 90%;
    height: 8vw;
    font-family:sans-serif;
    text-decoration:none;
}
.knapp:hover{
    background-color: white;
    color:black;
    border-color: black;
}
.linje{
    grid-row:5/15; 
    grid-column:3;
    color: white;
    margin:0;
    background-color: white;
    border-color: white;
    border-style:solid;
    width: 2px;
}
/*Knapparna*/
#toppen{
   grid-row: 6; 
   grid-column: 2;
}
#mitten{
    grid-row: 8; 
    grid-column: 2;
}
#botten{
    grid-row: 10; 
    grid-column: 2;
}
/*rubriken*/
#title{
    grid-row:2 ; 
    grid-column:2/7 ;
}
#title2{
    grid-row:3 ; 
    grid-column:2/7 ;
}
#title3{
    grid-row:4 ; 
    grid-column:2/7;
}
/*Bilder till hem*/
#isaac{
    display:grid;
    grid-template-rows: 40% 40%;
    justify-content: center;
    grid-row:5/13 ; 
    grid-column: 1/7;
    width: 100%;
    height:100%;
    visibility:visible;
}
#isaac12{
    visibility:hidden;
}
/*Bilder till Projekt  */
#isaac2{
    grid-row:1/15; 
    grid-column:1/3;
    width:100%;
    align-self: end;
}
#projekt{
    grid-row:6/12; 
    grid-column:4/7;
    margin-left: 5vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 45vw;
}
#projektbild1{
    height:6vw;
    width:6vw;
}
#projekt1{
    font-size: 4.5vw;
}
#projektbild2{
    height:4vw;
}
#projekt2{
    font-size: 4vw;
}
#projektbild3{
    height:4vw;
}
#projekt3{
    font-size: 4vw;
}
#projektbild4{
    height:4vw;
}
#projekt4{
    font-size: 4vw;
}
#projektbild5{
    height:4vw;
}
#projekt5{
    font-size: 4vw;
}
#projektbild6{
    height:4vw;
}
#projekt6{
    font-size: 4vw;
}
/* Bilder till Kontakt */
#isaacflyg{
    grid-row:11/13; 
    grid-column:1/7;
    width: 100%;
    align-self:end;
}
#swish{
    grid-row:4/12; 
    grid-column:4/6 ;
    width:36vw;
    align-self: center;
    margin-left:1vw ;
}
#ruta{
    grid-row:4/12; 
    grid-column:4/6;
    align-self: center;
    color: white;
    background-color: white;
    border-style:none;
    width: 38vw;
    height: 38vw;
    border-radius: 3vw;
}
#ljus{
    width:100vw ; 
    max-height: 100vh;
}
/*Bilder till Om mig */
#ommigdiv{
    grid-row:6; 
    grid-column:5/7;
}
#jag{
    grid-row:11/13; 
    grid-column:6;
    align-self:end;
    width:100%
}
#isaac3{
    grid-row:7; 
    grid-column:2;
    height: 100%;
}
@media (min-width: 768px){
/* Grid */
    .wrapper {
    width:100%;
    height:100%;
    display: grid;
    grid-template-columns:5vw 25vw 1vw 19vw 19vw 1fr ;
    grid-template-rows: 1vh 5vh 2vh 12vh 5vh 10vh 5vh 10vh 5vh 10vh 30vh 5vh;

}
/*Random grejer som används i alla sidor*/
body{
    margin: 0;
    background-color: black;
    user-select:none;
}
.text{
    color: white;
}
.linjeligger{
    visibility:hidden;
}
.knapp{
    background-color: black;
    color:white;
    border-style:solid;
    border-color: white;
    border-radius: 10px;
    width: 60%;
    height: 5vw;
    font-family:sans-serif;
    text-decoration:none;
}
.knapp:hover{
    background-color: white;
    color:black;
    border-color: black;
}
.linje{
    grid-row:5/15; 
    grid-column:3;
    color: white;
    margin:0;
    background-color: white;
    border-color: white;
    border-style:solid;
    width: 2px;
    visibility: hidden;
}
/* Knapparna */
#toppen{
   grid-row: 6; 
   grid-column: 2;
   font-size:4vw ;
}
#mitten{
    grid-row: 8; 
    grid-column: 2;
    font-size: 4vw;
}
#botten{
    grid-row: 10; 
    grid-column: 2;
    font-size: 4vw;
}
/* Rubriken */
#title{
    grid-row:1 ; 
    grid-column:1/7;
    font-size: 5vh;
    display:flex;
    justify-content: center;
}
#title2{
    grid-row:3 ; 
    grid-column:1/7;
    font-size: 2vh;
    display:flex;
    justify-content: center;
}
#title3{
    grid-row:3 ; 
    grid-column:1/7;
    font-size: 5vh;
    display:flex;
    justify-content: center;
}
/* Bilder till hem */
#isaac12{
    grid-row:1/13 ; 
    grid-column:1/7;
    visibility:visible;
    height:100%;
    width: 100%;
}
#isaac{
    visibility:hidden;
}
/* Bilder till Projekt */
#isaac2{
    grid-row:1/15; 
    grid-column:4/6;
    width:100%;
    align-self: end;
}
#projekt{
    grid-row:1/12; 
    grid-column:5;
    margin-left: 5vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    width: 45vw;
}
.projektbild{
    height:6vw;
}
#projektbild1{
    height:4vw;
    width:4vw
}
#projekt1{
    font-size: 3vw;
}
#projektbild2{
    height:4vw;
}
#projekt2{
    font-size: 4vw;
}
#projektbild3{
    height:4vw;
}
#projekt3{
    font-size: 4vw;
}
#projektbild4{
    height:4vw;
}
#projekt4{
    font-size: 4vw;
}
#projektbild5{
    height:4vw;
}
#projekt5{
    font-size: 4vw;
}
#projektbild6{
    height:4vw;
}
#projekt6{
    font-size: 4vw;
}
/* Bilder till Kontakt */
#isaacflyg{
    grid-row:11/13; 
    grid-column:4/6;
    width: 100%;
    align-self:end;
}
#swish{
    grid-row:5/11; 
    grid-column:4/6 ;
    height:15vw;
    width:15vw;
    margin-left:12.3vw;
}
#ruta{
    grid-row:5/11; 
    grid-column:4/6;
    color: white;
    background-color: white;
    border-style:solid;
    border-color: black;
    width: 17vw;
    height: 17vw;
    border-radius: 3vw;
    margin-left:11vw ;
}
#ljus{
    width:100% ; 
    grid-row:1/13; 
    grid-column:1/7;
}
/* Bilder till Om mig */
#ommigdiv{
    grid-row:6; 
    grid-column:5/7;
}
#jag{
    grid-row:11/13; 
    grid-column:6;
    align-self:end;
    width:100%
}
#isaac3{
    grid-row:7; 
    grid-column:2;
    height: 100%;
}
}