@font-face{
    font-family: adamLight;
    src: url(../Fonts/Adam-Light.ttf);
}


@font-face{
    font-family: adamMedium;
    src: url(../Fonts/Adam-Medium.ttf);
}

@font-face{
    font-family: adamBold;
    src: url(../Fonts/Adam-Bold.ttf);
}



@-webkit-keyframes fadeIn {
  0% {-webkit-opacity: 0;}
  10% {-webkit-opacity: 0;}
  100% {-webkit-opacity: 1;}
}

@-webkit-keyframes fadeInLate {
  0% {-webkit-opacity: 0;}
  20% {-webkit-opacity: 0;}
  100% {-webkit-opacity: 1;}
}

@-webkit-keyframes fadeInLateLate {
  0% {-webkit-opacity: 0;}
  30% {-webkit-opacity: 0;}
  100% {-webkit-opacity: 1;}
}

@-webkit-keyframes fadeInLateLateLate {
  0% {-webkit-opacity: 0;}
  40% {-webkit-opacity: 0;}
  100% {-webkit-opacity: 1;}
}

@-webkit-keyframes backgroundFadeIn {
  from {-webkit-background-color: white;}
  to {-webkit-background-color: rgba(34,34,35,1);}
}

@-webkit-keyframes background{
    0% {-webkit-background-size: 200%;}
    100%{-webkit-background-size: 140%;}
}

@-webkit-keyframes backgroundDesk{
    0% {-webkit-background-size: 150vw;}
    100%{-webkit-background-size: 100vw;}
}





@keyframes fadeIn {
  0% {opacity: 0;}
  10% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeInLate {
  0% {opacity: 0;}
  20% {opacity: 0;}
  100% {-webkit-opacity: 1;}
}

@keyframes fadeInLateLate {
  0% {opacity: 0;}
  30% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeInLateLateLate {
  0% {opacity: 0;}
  40% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes backgroundFadeIn {
  from {background-color: white;}
  to {background-color: rgba(34,34,35,1);}
}

@keyframes background{
    0% {background-size: 200%;}
    100%{background-size: 140%;}
}

@keyframes backgroundDesk{
    0% {background-size: 150vw;}
    100%{background-size: 100vw;}
}




@media screen and (min-width: 1000px) {

body{
    position: absolute;
    overflow-x: hidden;
    height: 100vh;
    width: 100vw;
    max-height: 100vh;
    min-height: 100vh;
    margin: 0px;
    background-color: rgba(34,34,35,1);
    animation: backgroundFadeIn 1s;
    -webkit-animation: backgroundFadeIn 1s;
}

a{
    text-decoration: none;
}

.menuGlobal{
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 100vh;
  /*  margin-top: -9vh;*/
}

.header{
    position: fixed;
    animation: fadeIn 1s;
    -webkit-animation: fadeIn 1s;
    width: 100vw;
    z-index: 100;
    mix-blend-mode: difference;
}

.headerLogo{
    margin-left: 2vw;
    margin-top: 2vh;
    height: 8vh;

}

.instaLogo{
    visibility: hidden;
    text-align: right;
    height: 4vh;
}

.menuBox{
    margin-left: 1.5vw;
    background-color: black;
    min-height: 100vh;
    /*max-width: 30vw;*/
    transform: skewX(350deg);
}

.storyBox{
    /*position: absolute;*/
    min-height: 100vh;
    /*max-width: 30vw;*/
    overflow: hidden;
    background-image: url("../IMG/me2.jpg");
    background-position: center;
    background-size: cover;
    animation: fadeInLate 3s;
    -webkit-animation: fadeInLate 3s;
}

.musicBox{
    /*position: absolute;*/
    height: 100vh;
    /*max-width: 30vw;*/
    overflow: hidden;
    background-image: url("../IMG/decks.jpg");
    background-position: center;
    background-size: cover;
    animation: fadeInLateLate 3s;
    -webkit-animation: fadeInLateLate 3s;
}

.contactBox{
    /*position: absolute;*/
    height: 100vh;
    /*max-width: 30vw;*/
    overflow: hidden;
    background-image: url("../IMG/contact.jpg");
    background-position: center;
    background-size: cover;
    animation: fadeInLateLateLate 3s;
    -webkit-animation: fadeInLateLateLate 3s;
}

.storyBoxIMG{
    z-index: 90;
    position: absolute;
    /*max-width: 30vw;*/
    transform: translate(-25vw, -16vh);
    transition: width 2s;
}

.contactBoxIMG{
    z-index: 90;
    position: absolute;
    /*max-width: 30vw;*/
    transform: translate(-25vw, -45vh);
    transition: width 2s;
}

.storyTitle:hover{
    width: 50vw;
    background-color: rgba(255,255,255,0.5);
    letter-spacing: 1vw;
}


.storyTitle:hover > .menuPhrase{
    /*width: 80vw;*/
    /*margin-left: 10vw;*/
    letter-spacing: 0.7vw;
}


.storyTitle:hover > .underline{
    width: 30vw;
    margin-right: 10vw;
    margin-left: 10vw;
}

.storyTitle{
    display: flex;
    flex-direction: column;
    text-align: center;
    position: relative;
    z-index: 100;
    min-height: 100vh;
    width: 30vw;
    background-color: rgba(255,255,255,0.7);
    letter-spacing: 0.5vw;
    transition: background-color 1s, letter-spacing 1s, width 1s;
}

.menuTitle{
    margin-top: 0px;
    margin-bottom: 0.5vh;
    padding-top: 40vh;
    color: rgba(34,34,35,1);
    font-family: adamBold;
    font-size: 5vh;
}

.contactTitle{
    display: flex;
    flex-direction: column;
    text-align: center;
    position: relative;
    z-index: 100;
    height: 100vh;
    width: 30vw;
    background-color: rgba(255,255,255,0.7);
    letter-spacing: 1.5vw;
    transition: background-color 1s, letter-spacing 1s;
}

.contactTitle:hover{
    background-color: rgba(255,255,255,0.3);
    letter-spacing: 2vw;
}

.underline{
    position: relative;
    height: 0.3vh;
    width: 20vw;
    margin-top: 0px;
    margin-left: 5vw;
    margin-right: 5vw;
    background-color: rgba(34,34,35,1);
    transition: width 1s, margin-left 1s, margin-right 1s;
}

.menuPhrase{
    color: rgba(34,34,35,1);
    letter-spacing: 0.5vw;
    font-family: adamMedium;
    font-size: 2vh;
    transition: letter-spacing 1s;
}

.storyLink{
    position: relative;
    animation: fadeInLate 3s;
    -webkit-animation: fadeInLate 3s;
}

.musicLink{
    position: relative;
    animation: fadeInLateLate 3s;
    -webkit-animation: fadeInLateLate 3s;
}

.contactLink{
    position: relative;
    animation: fadeInLateLateLate 3s;
    -webkit-animation: fadeInLateLateLate 3s;
}



.copyrightDiv{
    mix-blend-mode: difference;
    position: absolute;
    bottom: 1vh;
    width: 100vw;
    text-align: center;
}

.copyrightTitle{
    position: relative;
    margin-bottom: 0px;
    letter-spacing: 0.5vh;
    /*color: rgba(34,34,35,1);*/
    color: white;
    font-family: adamBold;
    font-size: 1vh;
}

.devBy{
    position: relative;
    margin-top: 2px;
    color: white;
    font-family: adamLight;
    font-size: 1vh;
}


}



























































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



body{
    position: absolute;
    overflow-x: hidden;
    height: 100vh;
    width: 100vw;
    max-height: 100vh;
    min-height: 100vh;
    margin: 0px;
    background-color: rgba(34,34,35,1);
    animation: backgroundFadeIn 1s;
    -webkit-animation: backgroundFadeIn 1s;
}

a{
    text-decoration: none;
}

.header{
    animation: fadeIn 1s;
    -webkit-animation: fadeIn 1s;
    width: 100vw;
}

.headerLogo{
    margin-left: 2vw;
    margin-top: 2vh;
    height: 8vh;
}

.instaLogo{
    visibility: hidden;
    text-align: right;
    height: 4vh;
}

.menuBox{
    margin-bottom: 1vh;
    background-color: rgba(34,34,35,1);
    animation: backgroundFadeIn 1s;
    -webkit-animation: backgroundFadeIn 1s;
    height: 25vh;
    width: 100vw;
    transform: skewY(-7deg);
}

.storyBox{
    position: absolute;
    height: 25vh;
    width: 100vw;
    overflow: hidden;
    background-image: url("../../IMG/me2.jpg");
    background-position: center;
    background-size: cover;
    animation: fadeInLate 3s;
    -webkit-animation: fadeInLate 3s;
}

.musicBox{
    position: absolute;
    height: 25vh;
    width: 100vw;
    overflow: hidden;
    background-image: url("../../IMG/decks.jpg");
    background-position: center;
    background-size: cover;
    animation: fadeInLateLate 3s;
    -webkit-animation: fadeInLateLate 3s;
}

.contactBox{
    position: absolute;
    height: 25vh;
    width: 100vw;
    overflow: hidden;
    background-image: url("../../IMG/contact.jpg");
    background-position: center;
    background-size: cover;
    animation: fadeInLateLateLate 3s;
    -webkit-animation: fadeInLateLateLate 3s;
}

.storyBoxIMG{
    z-index: 90;
    position: absolute;
    width: 150vw;
    transform: translate(-25vw, -16vh);
    transition: width 2s;
}

.contactBoxIMG{
    z-index: 90;
    position: absolute;
    width: 150vw;
    transform: translate(-25vw, -45vh);
    transition: width 2s;
}

.storyTitle:hover{
    background-color: rgba(255,255,255,0.5);
        letter-spacing: 3.5vw;
}


.storyTitle:hover > .menuPhrase{
    width: 80vw;
    margin-left: 10vw;
    letter-spacing: 1.1vw;
}


.storyTitle{
    display: flex;
    flex-direction: column;
    text-align: center;
    position: relative;
    z-index: 100;
    height: 25vh;
    width: 100vw;
    background-color: rgba(255,255,255,0.7);
    letter-spacing: 3vw;
    transition: background-color 1s, letter-spacing 1s;
}

.menuTitle{
    margin-top: 0px;
    margin-bottom: 0.5vh;
    padding-top: 7vh;
    color: rgba(34,34,35,1);
    font-family: adamBold;
    font-size: 5vh;
}

.contactTitle{
    display: flex;
    flex-direction: column;
    text-align: center;
    position: relative;
    z-index: 100;
    height: 25vh;
    width: 100vw;
    background-color: rgba(255,255,255,0.7);
    letter-spacing: 1.5vw;
    transition: background-color 1s, letter-spacing 1s;
}

.contactTitle:hover{
    background-color: rgba(255,255,255,0.3);
    letter-spacing: 2vw;
}

.underline{
    position: relative;
    height: 0.3vh;
    width: 65vw;
    margin-top: 0px;
    margin-left: 17.5vw;
    margin-right: 17.5vw;
    background-color: rgba(34,34,35,1);
    transition: width 1s, margin-left 1s;
}

.menuPhrase{
    color: rgba(34,34,35,1);
    letter-spacing: 1vw;
    font-family: adamMedium;
    font-size: 2vh;
    transition: letter-spacing 1s;
}

.storyLink{
    position: relative;
    animation: fadeInLate 3s;
    -webkit-animation: fadeInLate 3s;
}

.musicLink{
    position: relative;
    animation: fadeInLateLate 3s;
    -webkit-animation: fadeInLateLate 3s;
}

.contactLink{
    position: relative;
    animation: fadeInLateLateLate 3s;
    -webkit-animation: fadeInLateLateLate 3s;
}

.copyrightDiv{
    position: absolute;
    bottom: 1vh;
    width: 100vw;
    text-align: center;
}

.copyrightTitle{
    position: relative;
    margin-bottom: 0px;
    letter-spacing: 0.5vh;
    color: white;
    font-family: adamBold;
    font-size: 1vh;
}

.devBy{
    position: relative;
    margin-top: 2px;
    color: white;
    font-family: adamLight;
    font-size: 1vh;
}

}