*{
    border: 0;
    margin: 0;
    padding: 0;
}

/* Global */

body{
    scrollbar-width: none;
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
}

.logo{
    position: absolute;
    width: 15vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	 
}

.NTI{
    position: absolute;
    top: 12.5vh;
    left: 1.9vw;
    font-size: 2vw;
    letter-spacing: 0.1vw;
    font-family: 'Source Sans Pro', sans-serif;
    color: white;
    user-select: none;
}

.adress{
    position: absolute;
    top: 19vh;
    left: 1.9vw;
    font-size: 1.5vw;
    letter-spacing: 0.1vw;
    font-family: 'Source Sans Pro', sans-serif;
    color: white;
    user-select: none;
}

.icon{
    position: absolute;
    color: white;
    left: 2.6vw;
    top: 70vh;
    font-size: 1.5vw;
    user-select: none;
}

#fb{
    top: 74vh;
    margin-left: 0.1vw;
    transition: 0.3s;
}

#ig{
    top: 82vh;
    margin-left: -0.125vw;
    transition: 0.3s;
}

#yt{
    top: 90vh;
    margin-left: -0.3vw;
    transition: 0.3s;
}

#fb:hover{
    color: #4267B2;
    transform: scale(1.4);
    cursor: pointer;
}

#ig:hover{
    color: #8a3ab9;
    transform: scale(1.4);
    cursor: pointer;
}

#yt:hover{
    color: #FF0000;
    transform: scale(1.4);
    cursor: pointer;
}

::-webkit-scrollbar{
    width: 0vw;
}

#background{
    background: linear-gradient(0deg, #1b1b1b 0%, #8a00ed 100%);
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

#background img{
    display: none;
}

#video{
    position: relative;
    width: 100vw;
    margin-top: -10vh;
    filter: brightness(0.75);
    height: auto;
}


/* Menu */

.headerTitle{
    position: relative;
    color: white;
    float: right;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    cursor: pointer;
}

.headerTitle:hover{
    color: rgb(218, 124, 255);
    transform: scale(1.1);
}

.boom{
    margin-right: 3vw;
}

#navbar p{
    display: inline-block;
    text-decoration: none;
    font-size: 1.5vw;
    line-height: 7vh;
    margin-left: 3vw;
    transition: 0.3s;
}

#logo img{
    height: 6vh;
    margin-top: 0.5vh;
    margin-left: 2vw;
    transition: 0.4s;
    filter: invert(1);
    max-width: none;
}
/* Mobile Adjustments ~ Menu */
@media screen and (max-width: 580px) {
    #navbar {
      padding: 2vw 1vh !important;
    }
    #navbar p{
      float: none;
      display: block;
      text-align: left;
    }
  }

/* First Container */

.boxContainer{
    width: 80vw;
    height: 40vh;
    margin-left: auto;
    margin-right: auto;
}

.teknik{
    color: white;
    margin-left: 5vw;
    margin-top: 0vh;
    transition: 1s ease-in-out;
    visibility: hidden;
    font-family: 'Roboto', sans-serif;
    font-size: 2vw;
    font-weight: 600;
    opacity: 0;
}

#tekniktext{
    margin-top: 5vh;
    transition: 1s ease-in-out;
    width: 65%;
    font-size: 1.75vw;
    font-weight: 400;
    visibility: hidden;
    opacity: 0;
}

#teknikundertext{
    margin-top: 5vh;
    transition: 1s ease-in-out;
    width: 50%;
    font-size: 1.25vw;
    font-weight: 300;
    visibility: hidden;
    opacity: 0;
}

#teknikundertext2{
    margin-top: 4vh;
    transition: 1s ease-in-out;
    width: 50%;
    font-size: 1.25vw;
    font-weight: 300;
    visibility: hidden;
    opacity: 0;
}

#media{
    width: 40%;
    margin-top: 50vh;
    margin-left: 56vw;
    transition: 1s ease-in-out;
    visibility: hidden;
    opacity: 0;
    left: 5vw;
    -webkit-user-drag: none;
    user-select: none;
}

/* Second Container */


#info{
    width: 25vw;
    height: 70vh;
    margin-top: 20vh;
    margin-left: 6.5vw;
}

#textBox{
    position: absolute;
    top: 94%;
    width: 100%;
    height: 30%;
    background-color: #272727;
    transition: ease-in-out 0.3s;
    color: white;
}

.undertitle{
    font-size: 1.25vw;
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    line-height: 4vh;
    transition: ease-in-out 0.4s;
}

.undertext{
    font-family: 'Roboto', sans-serif;
    width: 90%;
    margin-left: 5%;
    margin-top: 1vh;
    font-size: 0.9vw;
    text-align: center;
    line-height: 3vh;
}

#info:hover #george, #info:hover #noah, #info:hover #karl{
    filter: brightness(1.1);
    transform: scale(1.05);
}

#info:hover .undertitle{
    color: rgb(218, 124, 255);
}

#info:hover #textBox{
    top: 75%;
}

.image{
    overflow-x: hidden;
    filter: brightness(0.8);
    transition: 0.7s;
}

#noah, #karl, #george{
    height: 100%;
    width: auto;
    float: right;
}

/* Mobile Device Adjustments */

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

    #info:hover #george, #info:hover #noah, #info:hover #karl{
        filter: brightness(1);
        transform: scale(1);
        
    }

    #video {
        height: 100vh;
        width: auto;
        display: none;
    }

    #background img{
        display: block;
        width: 50vw;
        margin-top: 40vh;
        margin-left: auto;
        margin-right: auto;
    }

  #fb, #ig, #yt{
     display: none;
  }

  #frontText{
      font-size: 5vw;
  }

  #navbar p{
    float: right;
    font-size: 5vw;
    margin-right: 5vw;
  }

  #logo img{
      float: left;
      height: 6vh;
  }

  #info{
      width: 40vw;
      height: 40vh;
      margin-top: 2vh;
  }

  #teknik{
      font-size: 6vw;
  }

  #tekniktext{
      font-size: 4vw;
  }

  #teknikundertext, #teknikundertext2{
      font-size: 3vw;
  }

  #media{
      width: 50%;
      margin-left: 47.5vw;
      margin-top: 45vh;
  }

  #datalagring{
    transform: translateX(-5vw);
      font-size: 2vw;
  }

  #examensarbete{
    transform: translateX(1.5vw);
    font-size: 2vw;
  }

  #mjukvarudesign{
    transform: translateX(10vw);
    font-size: 2vw;
  }

  #gip{
    transform: translate(11.5vw, 3.35vh);
    font-size: 2vw;
  }

  #mobile{
    transform: translate(-8vw, -3.25vh);
    font-size: 2vw;
  }

  #tillampad{
    transform: translate(-7vw, -3.25vh);
    font-size: 2vw;
  }

  #programmering{
    transform: translate(-10vw, 0vh);
    font-size: 2vw;
  }

  #webbtjanster{
    transform: translate(-15vw, 0vh);
    font-size: 2vw;
  }

  #data{
      transform: translate(5.5vw, -3vh);
      font-size: 3vw;
      width: 50vw;
  }

  #datakurs{
    transform: translate(5.5vw, -6vh);
    width: 80vw;
    font-size: 3vw;
  }

  #examen{
    transform: translate(-1vw, -3vh);
    font-size: 3vw;
    width: 50vw;
  }

  #examenkurs{
    transform: translate(-1vw, -6vh);
    width: 80vw;
    font-size: 3vw;
  }

  #mjukvaru{
    transform: translate(-10vw, -3vh);
    font-size: 3vw;
    width: 50vw;
  }

  #mjukvarukurs{
    transform: translate(-10vw, -6vh);
    width: 80vw;
    font-size: 3vw;
  }

  #gipen{
    transform: translate(-10.75vw, -6.35vh);
    font-size: 3vw;
  }

  #gipkurs{
    transform: translate(-10.75vw, -9.5vh);
    width: 80vw;
    font-size: 3vw;
  }

  #mobil{
    transform: translate(8.25vw, 0vh);
    font-size: 3vw;
    width: 90vw;
  }

  #mobilkurs{
    transform: translate(8.25vw, -3vh);
    width: 80vw;
    font-size: 3vw;
  }

  #program{
    transform: translate(10.25vw, -3vh);
    font-size: 3vw;
    width: 90vw;
  }

  #programmeringkurs{
    transform: translate(10.25vw, -6vh);
    font-size: 3vw;
    width: 90vw;
  }

  #tillamp{
    transform: translate(7.25vw, 0vh);
    font-size: 3vw;
  }

  #tillampkurs{
    transform: translate(7.25vw, -3vh);
    font-size: 3vw;
    width: 80vw;
  }

  #webb{
    transform: translate(15.25vw, -3vh);
    font-size: 3vw;
    width: 80vw;
  }

  #webbkurs{
    transform: translate(15.25vw, -6vh);
    font-size: 3vw;
    width: 80vw;
  }

  #textBox{
    position: absolute;
    top: 60%;
    padding: 0.1vw;
    width: 100%;
    height: 40%;
    background-color: #272727;
    z-index: 10;
    transition: ease-in-out 0.3s;
    color: white;
}

#info:hover #textBox{
    top: 60%;
}

#FourthContainer p{
    font-size: 2vh;
}

#VR, #TP, #BIBBLAN{
    font-size: 1.25vh;
    color:rgb(218, 124, 255);
    line-height: 4vh;
}

#underText{
    line-height: 2vh;
    font-size: 1.1vh;
}

#noah, #george, #karl{
    width: 100%;
    height: auto;
}

}

/* Third Container */

#FourthContainer, #secondBox, #thirdBox{
    box-shadow: black 0vw -0.5vh 1vh;
}

.text{
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    position: absolute;
    top: 6vh;
    left: 21vw;
    font-size: 0.9vw;
    letter-spacing: 0.2vw;
    transition: 0.3s;
    color: white;
    z-index: 1;
}

#examensarbete{
    left: 37.5vw;
}

#mjukvarudesign{
    left: 55vw;
}

#gip{
    left: 73.5vw;
}

#mobile{
    top: 12.5vh;
    left: 17vw;
}

#programmering{
    top: 12.5vh;
    left: 35.5vw;
}

#tillampad{
    top: 12.5vh;
    left: 51vw;
}

#webbtjanster{
    top: 12.5vh;
    left: 72.5vw;
}

.title{
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    position: absolute;
    top: 21vh;
    width: 30vw;
    font-size: 2vw;
    letter-spacing: 0.2vw;
    color: rgb(218, 124, 255);
    cursor: default;
}

#data{
    top: 24.5vh;
    left: -16.65vw;
    visibility: show;
}

#examen{
    top: 24.5vh;
    left: -33.15vw;
    visibility: hidden;
}

#mjukvaru{
    top: 24.5vh;
    left: -50.7vw;
    visibility: hidden;
}

#gipen{
    top: 24.5vh;
    left: -69.3vw;
    width: 80vw;
    visibility: hidden;
}

#mobil{
    top: 18vh;
    left: -12.7vw;
    width: 80vw;
    visibility: hidden;
}

#program{
    top: 18vh;
    left: -31.1vw;
    visibility: hidden;
}

#tillamp{
    top: 18vh;
    left: -46.5vw;
    width: 80vw;
    visibility: hidden;
}

#webb{
    top: 18vh;
    left: -68.25vw;
    visibility: hidden;
}

.kurstext{
    color: white;
    position: absolute;
    top: 31vh;
    left: -16.7vw;
    width: 80vw;
}

#examenkurs{
    left: -33.15vw;
    visibility: hidden;
    width: 80vw;
}

#mjukvarukurs{
    left: -50.7vw;
    visibility: hidden;
    width: 80vw;
}

#gipkurs{
    left: -69.3vw;
    visibility: hidden;
    width: 80vw;
}

#mobilkurs{
    left: -12.7vw;
    top: 24.5vh;
    visibility: hidden;
    width: 80vw;
}

#programmeringkurs{
    left: -31.1vw;
    top: 24.5vh;
    visibility: hidden;
    width: 80vw;
}

#tillampkurs{
    left: -46.5vw;
    top: 24.5vh;
    visibility: hidden;
    width: 80vw;
}

#webbkurs{
    left: -68.25vw;
    top: 24.5vh;
    visibility: hidden;
    width: 80vw;
}

.hover{
    color: rgb(218, 124, 255);
    cursor: pointer;
}

.color{
    color: rgb(218, 124, 255);
    cursor: default;
}

/* Credits */

#credit{
    font-family: 'Marvel', 'Roboto', sans-serif;
    font-size: 3vh;
    color: white;
    position:absolute;
    bottom:2vh;
    right:1.5vw;
}

#highlight{
    color: rgb(218, 124, 255);
}