@import "../bower_components/mui/src/sass/mui/colors";

//import sub sass files
@import 'mixins';
@import 'fonts';
@import 'global';
@import 'subsup';
@import 'smallstuff';
@import 'tree';
//steps
@import 'steps/step13';
@import 'steps/lookatdom';
@import 'steps/julianne';
@import 'steps/sleeping';
@import 'steps/usexpathsteps';
@import 'steps/zoomthatmother';
@import 'steps/treestep';
@import 'steps/imagecyclers';

//define colors
$clustercolor1: mui-color('light-blue', '200');
$clustercolor2: mui-color('lime', '200');
$clustercolor3: mui-color('orange', '200');
$markercolor: mui-color('lime', 'A200');

//define fonts
$namefont: 'Dancing Script', cursive;
$fontmontserrat: 'Montserrat', sans-serif;

//links
#steplinks a {
    pointer-events: auto;
    color:gray;
    margin-left: 4px;
    font-size: 12px;
}
#steplinks {
    z-index:9000;
    opacity:0;
    position: absolute;
    width: 100%;
    top: 0px;
}
#steplinks:hover {
    opacity:1;
}




/*first step: header*/
#firststep {
    text-align: center;
    font-family: $fontmontserrat;

    .headertitle {
        font-size:120%;
        font-weight: 300;
    }

    .of {
        font-size:80%;
        font-weight: 300;
    }

    .name {
        font-style:italic;
        font-size: 130%;
    }

    .phdtitle {
        font-size: 140%;
        font-family: $fontmontserrat;
        margin-top: 42px;
    }
}



#docluster .card {
    background-color: mui-color('blue', '600');
    opacity:0.8;
}

/*two examples step*/




//highlight color
.starhighlight {
    background-color: $markercolor;
    @include blur(10px);
    height: 23px;
    position: absolute;
    transition-delay: 20s;
    transition: opacity;
    transition-duration : 2s;
}

//all that coloring for the xpaths in a list
.impress-on-continuecluster #solution3 li:nth-child(1),
.impress-on-continuecluster #solution3 li:nth-child(3),
.impress-on-continuecluster #solution3 li:nth-child(5),
.impress-on-docluster #solution3 li:nth-child(1),
.impress-on-docluster #solution3 li:nth-child(3),
.impress-on-docluster #solution3 li:nth-child(5) {
    background-color: $clustercolor1; 
}
.impress-on-continuecluster #solution3 li:nth-child(2),
.impress-on-docluster #solution3 li:nth-child(2) {
    background-color: $clustercolor2; 
}
.impress-on-continuecluster #solution3 li:nth-child(4),
.impress-on-continuecluster #solution3 li:nth-child(6),
.impress-on-docluster #solution3 li:nth-child(4),
.impress-on-docluster #solution3 li:nth-child(6) {
    background-color: $clustercolor3; 
}

#docluster.past, #docluster.future {
    opacity:0;
}

//htmlisbuilt
#htmlisbuilt.future, #htmlisbuilt.past {
    opacity:0 ;
}
#htmlisbuilt.active {
    opacity: 1;
    transition: opacity 2s;
}

// getting to the end
#continuecluster #curlybracket {
    font-size: 200px;
    position: absolute;
    right: 310px;
    top: -150px;
    color: #333333;
    font-family: 'Open Sans Condensed', sans-serif;
}

//keep the xpaths visible 
.impress-on-continuecluster #solution3 {
    opacity:1;
}

#continuecluster .card {
    width: 452px;
    position: absolute;
    top: -85px;
    left: 7px;
}

#continuecluster.past, #continuecluster.future {
    opacity:0;
}
#continuecluster.active {
    opacity:1;
}

// almost at the end...
.xpathhighlight {
    color:mui-color('green', '600')
}

// last step
#laststep {
    text-align:center;
    font-family: 'Montserrat';

    p:nth-child(1) {
        font-size:130%;
    }

    img {
        // width:100%;
        height:500px;
        margin-top:10px;
    }

    
}

.impress-on-laststep .step {
    opacity:0;
}

.conclusionstep {
    .problemheader, .solutionheader {
        float:left;
        margin-right: 10px;
    }

    .problemheader {
        color: mui-color('orange', '400');
    }
    .solutionheader {
        color: mui-color('green', '400');
    }

    .cardtitle {
        font-size:150%;
    }
}

.conclusionstep, #conclusionstep {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}

// mergeresult2
#mergeresult2 {
     p:first-child {
        font-size:140%;
     }
     > ul > li {
         font-size:120%;
     }
}