css3oef2.scss

@import "variables";
@import "reboot";
@import "mixincentraalblok";

body {
    background-color: #c7eaf0;
    color: #000;
}

#container{
    @include centraalblok(800px);
    background-color: #fff;
    color: #000;
}

#flexcontainer{
    display: flex;

    p{
        flex: 1 1 auto;
        padding: $basismarge;
        border: $basismarge/2 solid #000;
        margin: 2*$basismarge;
        text-align: center;
        color: $oranje;
        background-color: inherit;
        font-size: 7*$basismarge;
        font-weight: bold;

        &:first-child{
            transform:rotate(-5deg);
        }

        &:nth-child(2){
            transform: rotate(-10deg)
        skewX(-10deg);
        }

        &:last-child{
            transform: skewY(30deg) scale(0.85);
        }
    }
}

#img1{
    background-color: $oranje;
    border-radius: 50%;
    transition: all 2s;

    &:hover{
        border-radius: 0%;
        background-color: $blauw;
        transform: rotate(180deg);
    }
}

#animations, #achtergrond{
    display: none;
}

@media (min-width: 600px){
    #animations, #achtergrond{
        display: block;
    }

    #achtergrond{
        padding-top: 120px;
        height: 180px;
        background-image: url(#{$map}achtergrond.jpg);
        background-repeat: repeat-x;
    }

    @keyframes draaien{
        100%{
            transform: rotate(360deg);
        }

    }

    .wiel{
        animation-name: draaien;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }

    .wiel1{
        position: relative;
        left: -225px;
        top: 25px;

    }

    .wiel2{
        position: relative;
        left:-175px;
        top: 20px;
    }

    @keyframes rijden {
        0%{
            transform: translate(0px, 0px);
        }

        100%{
            transform: translate(140%, 0px);
        }
    }

    .geheel{
        animation-name: rijden;
        animation-duration: 4s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
}