@import url('https://fonts.google.com/specimen/Raleway');



/* Do this later, allows you to serve 2 different css files depending on whether user is on desktop or mobile
Add responsiveness without it looking like shit */

/* 
@media (max-width: 800px) {

} */

/* Stops gap above navbar */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}


/* 
------------------------------------------------------------------------------------------------------------------------------------------------------
NAVBAR
------------------------------------------------------------------------------------------------------------------------------------------------------
*/

.navbar {
    font-family: 'Raleway', sans-serif;
    width: 100%;

    /* Stops navbar from having bullet decorations */
    list-style-type: none;

    /* Stops gap above navbar */
    margin: 0;
    padding: 0;

    box-sizing: border-box;
    width: 100%;
    height: 50%;

    /* BG colour */
    background: #1b3a6f;

    /* Allows horizontal nav display */
    display: flex;

    /* Gap between text items */
    gap: 1.5rem;

    /* Text alignment vertically */
    align-items: center;

    /* Padding to the right of "contact" */
    padding-right: 1.5rem;

    /* Padding to the left of fuji, if wanted */
    padding-left: 1rem;
}

.navlink {
    /* Stops underlining of nav links */
    text-decoration: none;

    /* Space between text and underline */
    padding-bottom: 4px;

    /* Nav text colour */
    color: white;

    font-size: 1.2vw;

    background-image: url('assets/SVG/NavSquiggle.svg');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 0% 3px;
    transition: background-size 0.3s ease;
}

.navlink:hover {
    background-size: 100% 3px;
}

.navlink.active {
    background-size: 100% 3px;
}

/* First child is fuji image */
.navbar li:first-child {

    /* Pushes fuji to left and text to right */
    margin-right: auto;
}

.fuji {

    /* Image width and height */
    width: 3vw;
    height: 3vw;
    
    /* Pushes fuji all the way to the left */
    display: flex;
    justify-content: left;
}


/* 
------------------------------------------------------------------------------------------------------------------------------------------------------
PAGE 1 CONTENT
------------------------------------------------------------------------------------------------------------------------------------------------------
*/

.firstpage {
    position: relative;
    width: 100%;
}

.iri {
    width: 100vw;
    height: 100vh;
    object-fit: fill;
    opacity: 60%;
}

.designbyrachel {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 20vw;
    width: 20vw;
    transform: translate(-50%, -50%);
}

.packagedesign {
    position: absolute;
    top: 10%;
    left: 25%;
    height: 7vw;
    width: 7vw;
    transform: rotate(20deg);
}

.brandidentity {
    position: absolute;
    top: 35%;
    left: 10%;
    height: 10vw;
    width: 10vw;
    transform: rotate(-20deg);
}

.mymusic {
    position: absolute;
    top: 70%;
    left: 25%;
    height: 7vw;
    width: 7vw;
    transform: rotate(20deg);
}

.bookdesign {
    position: absolute;
    top: 15%;
    right: 5%;
    height: 5vw;
    width: 5vw;
}

.workshops {
    position: absolute;
    top: 70%;
    right: 25%;
    height: 10vw;
    width: 10vw;
    transform: rotate(-10deg);
}

.marketingcampaigns {
    position: absolute;
    top: 35%;
    right: 10%;
    height: 10vw;
    width: 10vw;
    transform: rotate(20deg);
}

.userinterface {
    position: absolute;
    top: 10%;
    right: 25%;
    height: 10vw;
    width: 10vw;
    transform: rotate(-20deg);
}

/* 
------------------------------------------------------------------------------------------------------------------------------------------------------
BLUE BAR, SEPARATES PAGE 1 AND 2
------------------------------------------------------------------------------------------------------------------------------------------------------
*/

.pagedivider {
    position: relative;
    margin-top: -2%;
    margin-bottom: -2%;
    z-index: 5;
}

.pagedivider img {
    width: 100%;
    display: block;
    object-fit: fill;
}

/* 
------------------------------------------------------------------------------------------------------------------------------------------------------
PAGE 3 CONTENT
------------------------------------------------------------------------------------------------------------------------------------------------------
*/

.secondpage {
    position: relative;
    height: 100vh;
    width: 100%;
    background-image: url('assets/SVG/Waterfall.svg');
    background-size: 40% auto;
    background-repeat: no-repeat;

    /* doing some absolute bullshit because i dont want to ask my girlfriend to flip an svg at 5 am */
    /* if she flips the svg remember to set this back to right */
    transform: scaleX(-1);
    background-position: left top;

    /* overflow-x: hidden; */
}

.secondpage > * {
    transform: scaleX(-1);
}

.frame1 {
    position: absolute;
    z-index: 3;
    height: 50vh;
    width: 50vw;
    left: 10%;
    /* top: 100%; */
}

.frame2 {
    position: absolute;
    z-index: 3;
    height: 50vh;
    width: 50vw;
    right: 20%;
    top: 120%;
}

.frame3 {
    position: absolute;
    z-index: 3;
    height: 50vh;
    width: 50vw;
    right: 43%;
    top: 150%;
}

.wikidog {
    width: 50vw;
    height: 50vh;
    /* left: 10%;
    top: 100%; */
    position: absolute;
    z-index: 2;
    object-fit: cover;
    -webkit-mask-image: url(assets/SVG/ProjectFrameMask.svg);
    mask-image: url(assets/SVG/ProjectFrameMask.svg);
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.wikidog2 {
    width: 50vw;
    height: 50vh;
    right: 20%;
    top: 120%;
    position: absolute;
    z-index: 2;
    object-fit: cover;
    -webkit-mask-image: url(assets/SVG/ProjectFrameMask.svg);
    mask-image: url(assets/SVG/ProjectFrameMask.svg);
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.wikidog3 {
    width: 50vw;
    height: 50vh;
    right: 43%;
    top: 150%;
    position: absolute;
    z-index: 2;
    object-fit: cover;
    -webkit-mask-image: url(assets/SVG/ProjectFrameMask.svg);
    mask-image: url(assets/SVG/ProjectFrameMask.svg);
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.featuredprojects {
    position: absolute;
    height: 20vh;
    width: 20vw;
    right: 45%;
    top: 125%;
}

.page2marketing {
    position: absolute;
    height: 10vh;
    width: 10vw;
    transform: rotate(-20deg);
    top: 126%;
    left: 7%;
    z-index: 4;
}

.page2packagedesign {
    position: absolute;
    height: 10vh;
    width: 10vw;
    transform: rotate(20deg);
    top: 176%;
    left: 51%;
    z-index: 4;
}
.page2brandid {
    position: absolute;
    height: 10vh;
    width: 10vw;
    transform: rotate(20deg);
    top: 125%;
    left: 72%;
    z-index: 4;
}


/* 
------------------------------------------------------------------------------------------------------------------------------------------------------
PAGE 2/3 DIVIDER
------------------------------------------------------------------------------------------------------------------------------------------------------
*/

.pagedivider2 {
    position: relative;
    margin-top: -2%;
    z-index: 5;
}

.pagedivider2 img {
    width: 100%;
    display: block;
}


/* 
------------------------------------------------------------------------------------------------------------------------------------------------------
PAGE 3 CONTENT
------------------------------------------------------------------------------------------------------------------------------------------------------
*/

.thirdpage {
    position: relative;
    height: 100vh;
    width: 100%;
    margin-top: 1100px;
}

.waterfall {
    position: absolute;
    z-index: 1;
    margin-right: 800px;
    margin-top: -30px;
    height: 100vh;
}

.headshot {
    position: absolute;
    height: 30vw;
    width: 30vw;
    z-index: 3;
    border-radius: 50%;
    object-fit: cover;
    object-position: 0px -30px;
    left: 10%;
    top: 10%;
}

.page3design {
    z-index: 3;
    position: absolute;
    height: 15vw;
    width: 15vw;
    left: 40%;
    top: 55%;
}

.page3brandid {
    position: absolute;
    z-index: 3;
    height: 5vw;
    width: 5vw;
}