indiescience/styles.scss

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
    font-smooth: never;
    -moz-font-smooth: never;
    box-sizing: border-box;
}

@font-face {
    font-family: 'Helvetica';
    src:    url('fonts/HelveticaLTStd-Roman.otf') format('opentype');
}

@font-face {
    font-family: 'HelveticaOblique';
    src:    url('fonts/HelveticaLTStd-Obl.otf') format('opentype');
}

@font-face {
    font-family: 'HappyTimes';
    src:    url('fonts/happy-times-NG_regular_master.otf') format('opentype');
}

@font-face {
    font-family: 'HappyTimesOblique';
    src:    url('fonts/happy-times-NG_italic_master.otf') format('opentype');
}

@font-face {
    font-family: 'SelfModern';
    src:    url('fonts/Self Modern Italic.otf') format('opentype');
}



// @font-face {
//     font-family: 'Migra';
//     src:    url('fonts/MigraItalic-ExtralightItalic.otf') format('opentype');
// }

$cuteviolet: rgb(69, 5, 250);
$red: rgb(255, 63, 29);

html{
    height: 100%;
}

body{
    margin: 0;
    padding: 0;
    background: black;
    overflow: hidden;
}


// home page
.home{
    margin: 0;
    padding: 0;
    background: black;
    background-image: url(outlinebg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}

.noScroll{
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
}

.menu {
    font-family: Helvetica;
    font-size: 9pt;
    font-weight: normal;
    position: fixed;
    top: 3px;
    left: 3px;

    .buttonsMenu{
        background: rgb(0, 0, 0);
        color: rgb(255, 255, 255);
        display: inline-block;
        border-width: 1px;
        border-style: solid;
        border-radius: 1vw;
        border-color: white;
        padding: 0.3vw 0.6vw 0.3vw 0.6vw;
        cursor: pointer;

        &:hover {
            background: $red;
            color: rgb(0, 0, 0);
            border-color: $red;
        }
    }
    
}

#aboutUs{background: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    display: inline-block;
    border-width: 1px;
    border-style: solid;
    border-radius: 1vw;
    border-color: white;
    padding: 0.3vw 0.6vw 0.3vw 0.6vw;
    cursor: pointer;

    &:hover {
        background: $red;
        color: rgb(0, 0, 0);
        border-color: $red;
    }
}

.hoverAboutUs{
    display: none;
    position: absolute;
    top: 2vw;
    left: 6vw;

    .closeButton {
        position: absolute;
        margin: 3px;
        background: rgb(0, 0, 0);
        color: rgb(255, 255, 255);
        display: inline-block;
        border-width: 1px;
        border-style: solid;
        border-radius: 1vw;
        border-color: white;
        padding: 0.2vw 0.4vw 0.2vw 0.4vw;
        cursor: pointer;
        top: 2px;
        right: 2px;
        font-family: Helvetica;
        font-size: 0.5vw;

        &:hover {
            background: white;
            color: rgb(0, 0, 0);
            border-color: white;
        }

    }
}





.iconsSideMenu{
    font-family: Helvetica;
    font-size: 9pt;
    font-weight: normal;
    position: fixed;
    display: block;
    top: 50%;
    transform: translateY(-50%);
    left: 3px;

    img{
        width: 5vw;
        margin: 5px;
        display: block;
    }

}

.object {
    position: absolute;
    width: 10vw;
    cursor: move;
    color: white;
    text-align: center;
    font-family: SelfModern;
    font-size: 1.2 vw;
    font-weight: normal;

    #Rd {
        display: none;
    }

    p {
        /*opacity: 0;
        transform: translateY(-50%);
        transition: transform 500ms ease-in-out, opacity 300ms ease-in-out; */
        display: none;
        margin: 0;
    }

    &:hover p {
        /*opacity: 1;
        transform: translateY(0);*/
        display: block;
    }

    &:hover #Rd {
        display: block;
    }

    &:hover #BW {
        display: none;
    }

    img {
       width: 100%;
       display: inline;
       }

    a {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30%;
        height: 30%;
        cursor: pointer;
        display: block;
        transform: translate(-50%, -50%);
    }

}

// landing pages
.landingPage {
    position: relative;
    padding: 9vw 20vw 0 20vw;
    top: 50%;
    transform: translateY(-50%);
    background: rgb(0, 0, 0);
    background-image: url(backgroundproducercountries.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: white;
    text-align: center;
    font-family: Helvetica;
    font-size: 1vw;
    font-weight: normal;

    p {
        padding: 2vw 5vw;
    }
    

    h1 {
        font-family: SelfModern;
        font-size: 400%;
        font-weight: normal;
        margin: 0 0 30w 0;
        padding: 1vw;
        
    }

    .buttonEnter {
        // text-transform: uppercase;
        margin: 5% 0 0 0;
        background: rgb(0, 0, 0);
        color: rgb(255, 255, 255);
        display: inline-block;
        position: fixed;
        top: 60%;
        right: 50%;
        border-width: 1px;
        border-style: solid;
        border-radius:3vw;
        border-color: white;
        padding: 1.5vw 1vw 1.5vw 1vw;
        cursor: pointer;

        &:hover {
            background: $red;
            color: rgb(0, 0, 0);
            border-color: $red;
        }
    }
}

@for $i from 1 through 5 {
    .object:nth-child(#{$i}){
        left: random(90) + % ;
        top: random(90) + % ;
    }

}

.netherlands{
        position: relative;
        // padding: 10vw 30vw 0 30vw;
        // top: 50%;
        // transform: translateY(-50%);
        background: rgb(0, 0, 0);
        background-image: url(backgroundnetherlands.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 100%;
        overflow: hidden;
        color: white;
        // text-align: center;
        font-family: Helvetica;
        font-size: 0.8vw;
        font-weight: normal;

        p {
            position: absolute;
            left: 48vw;
            width: 20vw;
            top: 11vw;
            // padding: 10vw 30vw 0 30vw;
        }

        .buttonEnter {
            // text-transform: uppercase;
            margin: 1% 0 0 0;
            background: rgb(0, 0, 0);
            color: rgb(255, 255, 255);
            display: inline-block;
            top: 70%;
            left: 50%;
            position: fixed;
            transform: translateY(-50%);
            transform: translateX(-50%);
            border-width: 1px;
            border-style: solid;
            border-radius: 3vw;
            border-color: white;
            font-size: 1vw;
            padding: 0.5vw 0.7vw 0.5vw 0.7vw;
            cursor: pointer;
    
            &:hover {
                background: $red;
                color: rgb(0, 0, 0);
                border-color: $red;
            }
        }
}

.producerscountries{
    position: relative;
    // padding: 10vw 30vw 0 30vw;
    // top: 50%;
    // transform: translateY(-50%);
    background: rgb(0, 0, 0);
    background-image: url(backgroundproducercountries.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: white;
    text-align: center;
    font-family: Helvetica;
    font-size: 0.8vw;
    font-weight: normal;

    p {
        position: absolute;
        width: 30vw;
        left: 35vw;
        transform: translateY(-50%);
        top: 27vw;
        // padding: 10vw 30vw 0 30vw;
    }

    .buttonEnter {
        // text-transform: uppercase;
        margin: 1% 0 0 0;
        background: rgb(0, 0, 0);
        color: rgb(255, 255, 255);
        display: inline-block;
        top: 70%;
        left: 50%;
        position: fixed;
        transform: translateY(-50%);
        transform: translateX(-50%);
        border-width: 1px;
        border-style: solid;
        border-radius: 3vw;
        border-color: white;
        font-size: 1vw;
        padding: 0.5vw 0.7vw 0.5vw 0.7vw;
        cursor: pointer;

        &:hover {
            background: $red;
            color: rgb(0, 0, 0);
            border-color: $red;
        }
    }
}

.hpGianmarco{
    margin: 0;
    padding: 0;
    background: black;
    background-image: url(outlinebg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}

.homepage{
    margin: 0;
    padding: 0;
    background: black;
    background-image: url(backgroundproducercountries.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}

.landingPageJuli {
    position: absolute;
    // top: 50%;
    // transform: translateY(-50%);
    background: rgb(0, 0, 0);
    background-image: url(outlinebg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: white;
    font-family: Helvetica;
    font-size: 1vw;
    font-weight: normal;
    

    .texte {
        position: absolute;
        text-align: left;
        width: 30vw;
        margin: 10vw 20vw;
    }

    .LienEpisode1 {
        position: absolute;
        width: 50px;
        height: 50px;
        cursor: pointer;
        top: 20vw;
        right: 30vw;

        img {
            width: 100%;
        }
    }

    .ImgEpisode1 {
        display: none;
        position: absolute;
        top: 20vw;
        right: 30vw;

    }

    .closeButton {
        position: absolute;
        top: 0;
        right: 0;
        // margin: 3px;
        background: rgb(0, 0, 0);
        color: rgb(255, 255, 255);
        display: inline-block;
        border-width: 1px;
        border-style: solid;
        border-radius: 1vw;
        border-color: white;
        padding: 0.3vw 0.6vw 0.3vw 0.6vw;
        cursor: pointer;

        &:hover {
            background: white;
            color: rgb(0, 0, 0);
            border-color: white;
        }
    }

    .LienEpisode2 {
        position: absolute;
        top: 30vw;
        left: 20vw;
        width: 50px;
        height: 50px;
        cursor: pointer;

        img {
            width: 100%;
        }
    }

    .ImgEpisode2 {
        display: none;
        position: absolute;
        top: 30vw;
        left: 20vw;

            }
}

.objectCamille {
    position: absolute;
    display: block;
    color: white;
    text-align: center;
    height: 10vw;

    transition: top 10s linear, left 10s linear;

    &:nth-child(1){
        height: 14vw;
    }
    &:nth-child(2){
        height: 10vw;
    }
    &:nth-child(3){
        height: 14vw;
    }
    &:nth-child(4){
        height: 10vw;
    }
    &:nth-child(5){
        height: 14vw;
    }
    &:nth-child(6){
        height: 10vw;
    }

    img{            
        height: 100%;
        display: none;
    }
    img:first-child{
        display: block;
    }
    .hover {
       display: block;
    }
    &:hover img:first-child{
        display: none;
    }
    &:hover img:last-child{
        display: block;
    }
}


// pages thoughts

.bodyManifestoPage{
    margin: 0;
    padding: 0;
    background: black;
    background-image: url(bgthoughts.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.april{
    width: 30%;
    position: absolute;
    top: 20vw;
    right: 20vw;
    overflow: hidden;

    .texte{
        font-family: HelveticaOblique;
    }
}

.juin{
    width: 20%;
    position: absolute;
    top: 10vw;
    left: 10vw;
    overflow: hidden;

    .texte{
        font-family: HelveticaOblique;
    }
}

.beantobar{
    width: 25%;
    position: absolute;
    top: 18vw;
    left: 5vw;
    overflow: hidden;
}

.tonys{
    width: 35%;
    position: absolute;
    top: 3vw;
    left: 33vw;
    overflow: hidden;
}

.issues{
    width: 50%;
    position: absolute;
    top: 35vw;
    right: 5vw;
    overflow: hidden;

    a:link{
        color: white;
    }
    a:visited{
        color: white;
    }
    a:active{
        color: $cuteviolet;
    }
}

.thoughtsWindows{
    font-family: Helvetica;
    font-size: 11pt;
    font-weight: normal;
    // cursor: move;

    .entête{
        text-transform: uppercase;
        font-size: 10pt;
        background: black;
        border-width: 1px;
        border-style: solid;
        color: white;
        padding: 3px;
        display: flex;

        .titre{
            text-align: left;
            width: 50%;
        }
        .date{
            text-align: right;
            width: 50%;
        }
    }

    .texte{
        background: white;
        padding: 20px;
    }

}

.somethoughts{
    position: absolute;
    width: 50vw;
    top: 8vw;
    left: 5vw;
}

// pages draggeable

.bodyPageDraggeable{
    margin: 0;
    padding: 0;
    background: black;
    overflow: auto;
}


.quotes{
    width: 40%;
    position: absolute;
    font-family: Helvetica;
    font-size: 11pt;
    font-weight: normal;
    cursor: move;

    &:hover .entête{
        opacity: 1;
    }

    .entête{
        text-transform: uppercase;
        font-size: 10pt;
        background: black;
        border-width: 1px;
        border-style: solid;
        color: white;
        padding: 3px;
        opacity: 0;
        display: flex;

        .titre{
            text-align: left;
            font-family: HelveticaOblique;
            width: 50%;
        }
        .linksource{
            text-align: right;
            width: 50%;
        }
    }

    .texte{
        background: white;
        padding: 3px;
    }

    mark{
        background-color: $cuteviolet;
        color: white;
        padding: 1px 6px 1px 6px;
    }

    a:link{
        color: white;
    }
    a:visited{
        color: white;
    }
    a:active{
        color: $cuteviolet;
    }
}

.moreResources{
    font-family: HelveticaOblique;
    font-size: 11pt;
    font-weight: normal;
    position: absolute;
    // cursor: move;

    .entête{
        text-transform: uppercase;
        font-size: 10pt;
        background: black;
        border-width: 1px;
        border-style: solid;
        border-color: white;
        color: $cuteviolet;
        padding: 3px;
        display: flex;

        .titre{
            text-align: left;
            width: 50%;
        }
        
    }

    .texte{
        background: white;
        padding: 3px;
    }

    a:link{
        color: $cuteviolet;
    }
    a:visited{
        color: $cuteviolet;
    }
    a:active{
        color: black;
    }

}

#inapril2018{
    top: 5vw;
    right: 13vw;
}

#theharkinengel{
    top: 7vw;
    left: 10vw;
}

#theprotocollaidout{
    top: 20vw;
    left: 2vw;
}

#in2009{
    top: 15vw;
    right: 4vw;
}


.personnalText{
    position: absolute;
    font-family: HelveticaOblique;
    font-size: 11pt;
    font-weight: normal;
    color: white;
    cursor: move;
    padding: 2px;
    left: 20vw;
    top: 33vw;

    &:hover{
        border-width: 1px;
        border-style: dashed;
        border-color: white;
        border-radius: 0.5vw;
    }

    .personnalTextHarkinEngel{
        column-count: 3;
        column-gap: 20px;
        width: 60vw;
    }

    .personnalTextLivingIncome{
        column-count: 1;
        column-gap: 20px;
        width: 40vw;
    }
}

.wholeBoxEditable{
    position: fixed;
    display: block;
    width: 15vw;
    top: 36vw;
    right: 9px;

    .zoneDragBoxEditable{
        height: 15px;
        width: 100%;
        cursor: move;
    }

    .boxEditable{
    border-width: 1px;
    border-style: dashed;
    border-color: white;
    border-radius: 0.5vw;
    position: absolute;
    font-family: Helvetica;
    font-size: 11pt;
    font-weight: normal;
    color: $cuteviolet;
    background: black;
    margin: 2px;
    width: 100%;
    }
}

.instructions{
    display: block;
    width: 15vw;
    bottom: 8px;
    right: 5px;
    font-family: Helvetica;
    font-size: 9pt;
    font-weight: normal;
    position: fixed;
    border-width: 1px;
    border-style: solid;
    border-color: $cuteviolet;
    // border-radius: 0.5vw;
    background: black;
    margin: 2px;
    color: white;
    padding: 5px;


        .buttonGoogleDoc{
        display: inline-table;
        background: $cuteviolet;
        color: white;
        border-width: 1px;
        border-style: solid;
        border-radius:1vw;
        border-color: $cuteviolet;
        padding: 0.2vw 0.5vw 0.2vw 0.5vw;
        margin: 10px 40% 2px 40%;
        cursor: pointer;
        color: white;

        &:hover {
            background: white;
            color: $cuteviolet;
            border-color: white;
        }
    }
}


// tests
.bodyTestIndex{
    margin: 0;
    padding: 0;
    // background-image: url(outlinebg.png);
    // background-position: center;
    // background-repeat: no-repeat;
    // background-size: cover;
    width: 100%;
    height: 100%;

}

// .objectTestIndex{
//     position: absolute;
//     width: 10vw;
//     cursor: move;

//     img {
//        width: 100%;
//        }

//     a {
//         position: absolute;
//         top: 50%;
//         left: 50%;
//         width: 30%;
//         height: 30%;
//         cursor: pointer;
//         display: block;
//         transform: translate(-50%, -50%);
//     }
// }

#bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -20;
    background: rgb(255, 255, 255);
    font-family: Helvetica;
    font-size: 11pt;
    font-weight: normal;
    text-align: center;
    background-image: url(BGoutlineNoir.png);
    background-position-y: 50px;
    background-repeat: no-repeat;
    background-size: cover;

    .title{
        font-size: 40px;
        margin: 5vw 10vw 0 10vw;
    }

    .texte{
        margin: 1vw 20vw 0 20vw;
    }

    .title2{
        display: none;
    }
    .texte2{
        display: none;
    }
    .title3{
        display: none;
    }
    .texte3{
        display: none;
    }


}

#trigger {
    position: absolute;
    z-index: 3;
    width: 10vw;
    cursor: move;  

    img {
        width: 100%;
        }
 
     a {
         position: absolute;
         top: 50%;
         left: 50%;
         width: 30%;
         height: 30%;
         cursor: pointer;
         display: block;
         transform: translate(-50%, -50%);
     }

}

#trigger2 {
    position: absolute;
    z-index: 4;
    width: 10vw;
    cursor: move;

    img {
        width: 100%;
        }
 
     a {
         position: absolute;
         top: 50%;
         left: 50%;
         width: 30%;
         height: 30%;
         cursor: pointer;
         display: block;
         transform: translate(-50%, -50%);
     }

}

#trigger:hover ~ #bg {
    background: rgb(0, 0, 0);
    background-image: url(BGoutlineBlc.png);
    background-position-y: 50px;
    background-repeat: no-repeat;
    background-size: cover;
    .title{
        display: none;
    }
    .texte{
        display: none;
    }
    .title2{
        display: block;
        font-size: 40px;
        margin: 5vw 10vw 0 10vw;
        color: white;
    }
    .texte2{
        display: block;
        margin: 1vw 20vw 0 20vw;
        color: white;
    }
    .title3{
        display: none;
    }
    .texte3{
        display: none;
    }
}


#trigger2:hover ~ #bg {
    background: rgb(255, 88, 171);
    background-image: url(BGoutlineBlc.png);
    background-position-y: 50px;
    background-repeat: no-repeat;
    background-size: cover;
    .title3{
        display: block;
        font-size: 40px;
        margin: 5vw 10vw 0 10vw;
        color: rgb(255, 255, 255);
    }
    .texte3{
        display: block;
        margin: 1vw 20vw 0 20vw;
        color: rgb(255, 255, 255);
    }
    .title{
        display: none;
    }
    .texte{
        display: none;
    }
    .title2{
        display: none;
    }
    .texte2{
        display: none;
    }
}

// stuffs

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

    
}

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

}