@import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz');
@import url('https://fonts.googleapis.com/css?family=Inconsolata');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Muli|Nunito+Sans');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

.across {
    justify-content: center;
}

.middle {
    align-items: center;
}

.column {
    flex-direction: column;
}
/*Flex containers*/
/*================================================*/
.wrapper, .main-panel, .right-panel, .vertical-align, .right-panel, .left-panel, .main-container, .text-conainer, .side-nav, .footer {
    display: flex;
}
/*================================================*/
.wrapper {
    height: 100vh;
    background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
    background: linear-gradient(to bottom, #323232 0%, #3F3F3F 40%, #1C1C1C 150%), linear-gradient(to top, rgba(255, 255, 255, 0.40) 0%, rgba(0, 0, 0, 0.25) 200%);
    background-blend-mode: multiply;
}

.text-container {
    width: 55%;
    position: absolute;
    top: 15%;
    left:25%;
}

.main-container {
    position: relative;
}

.main-image {
    width: 65%;
}

/*The typing styling/effect for the home page*/
/*==============================================*/
p {
    font-family: 'Inconsolata', monospace;
    overflow: hidden;
    white-space: nowrap;
    font-size: 18px;
    padding-bottom: 20px;
    line-height: 20px;
    color: #000;
    opacity: 0.0;
}


.line-one {
    animation: type 3s steps(53);
    animation-delay: 2s;
    animation-fill-mode: forwards;
}

.line-two {
    animation: type2 3s steps(55);
    animation-delay: 5s;
    animation-fill-mode: forwards;
}

.line-three {
    animation: type3 3s steps(59);
    animation-delay: 8s;
    animation-fill-mode: forwards;
}

.line-four {
    animation: type4 3s steps(45);
    animation-delay: 11s;
    animation-fill-mode: forwards;
    color: #2ba53b;
}

.line-five {
    animation: type5 3s steps(66);
    animation-delay: 14s;
    animation-fill-mode: forwards;
}

.line-six {
    animation: type6 3s steps(61);
    animation-delay: 17s;
    animation-fill-mode: forwards;
}

.line-seven {
    animation: type7 3s steps(74);
    animation-delay: 20s;
    animation-fill-mode: forwards;
}

.line-eight {
    animation: type8 3s steps(62);
    animation-delay: 23s;
    animation-fill-mode: forwards;
}

.line-nine {
    animation: type9 3s steps(72);
    animation-delay: 26s;
    animation-fill-mode: forwards;
}

.line-ten {
    animation: type10 3s steps(64);
    animation-delay: 29s;
    animation-fill-mode: forwards;
}

.line-eleven a {
    margin-left: 80%;
    font-size: 35px;
    animation: type11 3s steps(1);
    animation-delay: 33s;
    animation-fill-mode: forwards;
    opacity: 0.0;
    color: #2ba53b;
}



@keyframes type {
    0% {
        width: 0ch;
    }
    100% {
        width: 53ch;
    }
    0% {
        opacity: 0.9;
    }
    100% {
        opacity: 1;
    }
}


@keyframes type2 {
    0% {
        width: 0ch;
    }
    100% {
        width: 57ch;
    }
    0% {
        opacity: 0.9;
    }
    100% {
        opacity: 1;
    }
}

@keyframes type3 {
    0% {
        width: 0ch;
    }
    100% {
        width: 59ch;
    }
    0% {
        opacity: 0.9;
    }
    100% {
        opacity: 1;
    }
}

@keyframes type4 {
    0% {
        width: 0ch;
    }
    100% {
        width: 45ch;
    }
    0% {
        opacity: 0.9;
    }
    100% {
        opacity: 1;
    }
}

@keyframes type5 {
    0% {
        width: 0ch;
    }
    100% {
        width: 66ch;
    }
    0% {
        opacity: 0.9;
    }
    100% {
        opacity: 1;
    }
}

@keyframes type6 {
    0% {
        width: 0ch;
    }
    100% {
        width: 61ch;
    }
    0% {
        opacity: 0.9;
    }
    100% {
        opacity: 1;
    }
}

@keyframes type7 {
    0% {
        width: 0ch;
    }
    100% {
        width: 74ch;
    }
    0% {
        opacity: 0.9;
    }
    100% {
        opacity: 1;
    }
}

@keyframes type8 {
    0% {
        width: 0ch;
    }
    100% {
        width: 62ch;
    }
    0% {
        opacity: 0.9;
    }
    100% {
        opacity: 1;
    }
}

@keyframes type9 {
    0% {
        width: 0ch;
    }
    100% {
        width: 72ch;
    }
    0% {
        opacity: 0.9;
    }
    100% {
        opacity: 1;
    }
}

@keyframes type10 {
    0% {
        width: 0ch;
    }
    100% {
        width: 64ch;
    }
    0% {
        opacity: 0.9;
    }
    100% {
        opacity: 1;
    }
}

@keyframes type11 {
    0% {
        width: 0ch;
    }
    100% {
        width: 5ch;
    }
    0% {
        opacity: 0.9;
    }
    100% {
        opacity: 1;
    }
}

/*================================================*/

.title-name {
    font-size: 50px;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #fff;
    padding: 20px;
    background: linear-gradient(to bottom, rgb(228, 226, 211) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgb(115, 114, 109) 120%) rgb(40, 146, 33);
    background-blend-mode: multiply,multiply;
    line-height: 60px;
}


img {
width: 100%;
}

/*Artwork navigation and effects*/
/*===============================================*/
.grow:hover {
    transition: all 0.3s;
    box-shadow: 5px 5px 11px;
    transform: scale(2.3);
    cursor: pointer;
}

.button-one,
.button-two,
.button-three,
.button-four,
.button-five,
.button-six,
.button-seven {
    border-radius: 50%;
    box-shadow: 5px 5px 11px;
    width: 50px;
    height: 50px;
}

.button-one:hover {
    background-image: url(images/pexels-photo-519762.jpeg);
    background-size: cover;
}

.button-one {
    background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
}

.button-two:hover {
    background-image: url(images/graffiti-berlin-wall-wall-trabi.jpg);
    background-size: cover;
}

.button-two {
    background-image: linear-gradient(-225deg, #65379B 0%, #886AEA 53%, #6457C6 100%);
}

.button-three:hover {
    background-image: url(images/creative-graffiti-street-art-wall-art.jpg);
    background-size: cover;
}

.button-three {
    background-image: linear-gradient(to top, #cd9cf2 0%, #f6f3ff 100%);
}

.button-four:hover {
    background-image: url(images/cake-2611488_1920.jpg);
    background-size: cover;
}

.button-four {
    background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
}

.button-five:hover {
    background-image: url(images/grafitti-1574031_1920.jpg);
    background-size: cover;
}

.button-five {
    background-image: linear-gradient(to right, #f83600 0%, #f9d423 100%);
}

.button-six:hover {
    background-image: url(images/girl-1909006_1920.jpg);
    background-size: cover;
}

.button-six {
    background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
}

.button-seven:hover {
    background-image: url(images/antelope-canyon-lower-canyon-arizona.jpg);
    background-size: cover;
}

.button-seven {
    background-image: linear-gradient(to top, #96fbc4 0%, #f9f586 100%);
}

/*==================================================*/
.artwork {
    width: 80%;
    box-shadow: 0 14px 38px rgb(226, 231, 237), 0 0 80px 15px rgb(226, 231, 237);
}

h4 {
    text-transform: uppercase;
    letter-spacing: 3px;
}


.title, .sub-title {
    color: #fff;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    padding: 10px;
}


.title-box {
    text-align: center;
    padding: 10px;
    font-weight: lighter;
}


.date, .dimensions {
    font-family: 'Muli', sans-serif;
    font-size: 15px;
    color: #000;
}

.right-panel {
    justify-content: space-between;
    width: 60%;
    height: 100vh;
    background-image: linear-gradient(-225deg, #65379B 0%, #886AEA 53%, #6457C6 100%);
}

.sand {
    background-image: linear-gradient(to top, #96fbc4 0%, #f9f586 100%);
}

.arrow {
    background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
}

.hog {
    background-image: linear-gradient(to right, #f83600 0%, #f9d423 100%);
}

.cookies {
    background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
}

.boy {
    background-image: linear-gradient(to top, #cd9cf2 0%, #f6f3ff 100%);
}

.auto {
    background-image: linear-gradient(-225deg, #65379B 0%, #886AEA 53%, #6457C6 100%);
}

.genius {
    background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
}


.left-panel {
    width: 70%;
    height: 100vh;
    background: linear-gradient(to bottom, #D5DEE7 0%, #E8EBF2 50%, #E2E7ED 100%), linear-gradient(to bottom, rgba(0,0,0,0.02) 50%, rgba(255,255,255,0.02) 61%, rgba(0,0,0,0.02) 73%), linear-gradient(33deg, rgba(255,255,255,0.20) 0%, rgba(0,0,0,0.20) 100%);
 background-blend-mode: normal,color-burn;
 margin-left: 10%;
}


#sidebar {
    position: fixed;
    width: 100px;
    background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
    background: linear-gradient(to bottom, #323232 0%, #3F3F3F 40%, #1C1C1C 150%), linear-gradient(to top, rgba(255, 255, 255, 0.40) 0%, rgba(0, 0, 0, 0.25) 200%);
    background-blend-mode: multiply;
    height: 100vh;
}

#sidebar ul li {
    color: #fff;
    list-style-type: none;
    padding-top: 25px;
    text-align: center;
    font-size: 20px;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    letter-spacing: 3px;
}

.side-nav {
    margin-top: 30px;
}

.side-nav div {
    margin-bottom: 30px;
}

.change:hover {
    background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
    padding: 20px;
    
}