@import url('https://fonts.googleapis.com/css?family=Sacramento');
@import url('https://fonts.googleapis.com/css?family=Cabin+Condensed|Sacramento');
@import url('https://fonts.googleapis.com/css?family=Raleway');


@media screen and (min-width: 1025px) {
    * {
        /*border: solid 1px black;*/
        margin: 0;
        padding: 0;
        height: auto;
        /*box-sizing:border-box*/
    }

    html {
        width: 100%;
        height: 100%;
        margin: 0;
        background: #A5DEE4;
    }

    a {
        color: initial;
        text-decoration: initial;
    }

    .content {
        display: none;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 8;
    }

    .home {
        background: #A5DEE4;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100%;
    }

    .burger {
        display: inline-block;
        cursor: pointer;
        right: 6.2vw;
        top: 5vh;
        position: fixed;
        z-index: 11;
    }

    .burger:hover {
        cursor: pointer;
    }

    .bar1, .bar2, .bar3 {
        width: 45px;
        height: 9px;
        background-color: white;
        margin: 10px 0;
        transition: 0.4s;
    }

    .change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-9px, 6px);
        transform: rotate(-45deg) translate(-9px, 18px);
    }

    .change .bar2 {
        opacity: 0;
    }

    .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px);
        transform: rotate(45deg) translate(-8px, -18px);
    }

    .guideWords {
        width: 40rem;
        justify-content: space-evenly;
        z-index: 9;
        display: flex;
        right: 0;
        top: 50vh;
        position: fixed;
        transform: rotate(90deg) translateY(-415%);
        font-family: 'Cabin Condensed', sans-serif;

    }

    .guideWords a {
        position: relative;
        display: block;
        color: white;
        line-height: 3rem;
        font-size: 2rem;
    }

    .guideline {
        display: none;
        height: 2px;
        width: 100%;
        background-color: white;
    }

    .guidehomebox:hover .homeline {
        display: block;
        animation: lineshow 0.5s forwards;
    }

    .guideworkbox:hover .workline {
        display: block;
        animation: lineshow 0.5s forwards;
    }

    .guideaboutbox:hover .aboutline {
        display: block;
        animation: lineshow 0.5s forwards;
    }

    .guidehomebox {
        top: 5rem;
        width: 6rem;
        transition: 0.5s;
    }

    .guideworkbox {
        top: 5rem;
        width: 5.5rem;
        transition: 0.5s;

    }

    .guideaboutbox {
        top: 5rem;
        width: 9rem;
        transition: 0.5s;

    }

    @keyframes lineshow {
        0% {
            width: 0px;
        }
        100% {
            height: 2px;
            width: 100%;
        }
    }
    .bottom {
        background-color: #A5DEE4;
        width: 100%;
        height: 100%;
        margin-bottom: 0;
    }

    .bottom ul {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px;
        font-family: 'Cabin Condensed', sans-serif;
        font-size: 17px;
        opacity: 0.8;
        color: white;
    }

    .maggie {
        font-family: 'Sacramento', cursive;
        color: white;
        font-size: 750%;
        left: 6.2vw;
        top: 3.5vh;
        position: fixed;
        z-index: 1000;
        background-color: #A5DEE4;
        padding-right: 2.5%;
    }

    .line {
        position: fixed;
        align-items: center;
        justify-content: center;
        width: 1290px;
        height: 750px;
        right: 13vw;
        top: 12vh;
        border: solid white 5px;
        z-index: 999;
    }

    .typewriter h1 {
        color: white;
        font-family: monospace;
        overflow: hidden;
        border-right: .15em solid white;
        white-space: nowrap;
        margin: 0 auto;
        letter-spacing: .15em;
        animation: typing 3s steps(30, end),
        blink-caret .5s step-end infinite;
        font-size: 35px;
    }

    /* The typing effect */
    @keyframes typing {
        from {
            width: 0
        }
        to {
            width: 100%
        }
    }

    /* The typewriter cursor effect */
    @keyframes blink-caret {
        from, to {
            border-color: transparent
        }
        50% {
            border-color: white
        }
    }
}

@media screen and (min-width:768px) and (max-width:1024px){
    * {
        /*border: solid 1px black;*/
        margin: 0;
        padding: 0;
        height: auto;
        /*box-sizing:border-box*/
    }

    html {
        width: 100%;
        height: 100%;
        margin: 0;
        background: #A5DEE4;
    }

    a {
        color: initial;
        text-decoration: initial;
    }

    .content {
        display: none;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 8;
    }

    .home {
        background: #A5DEE4;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100%;
    }

    .burger {
        display: inline-block;
        cursor: pointer;
        right: 6.2vw;
        top: 5vh;
        position: fixed;
        z-index: 11;
    }

    .burger:hover {
        cursor: pointer;
    }

    .bar1, .bar2, .bar3 {
        width: 45px;
        height: 9px;
        background-color: white;
        margin: 10px 0;
        transition: 0.4s;
    }

    .change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-9px, 6px);
        transform: rotate(-45deg) translate(-9px, 18px);
    }

    .change .bar2 {
        opacity: 0;
    }

    .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px);
        transform: rotate(45deg) translate(-8px, -18px);
    }

    .guideWords {
        width: 40rem;
        justify-content: space-evenly;
        z-index: 9;
        display: flex;
        right: 0;
        top: 50vh;
        position: fixed;
        transform: rotate(90deg) translateY(-455%);
        font-family: 'Cabin Condensed', sans-serif;

    }

    .guideWords a {
        position: relative;
        display: block;
        color: white;
        line-height: 3rem;
        font-size: 2rem;
    }

    .guideline {
        display: none;
        height: 2px;
        width: 100%;
        background-color: white;
    }

    .guidehomebox:hover .homeline {
        display: block;
        animation: lineshow 0.5s forwards;
    }

    .guideworkbox:hover .workline {
        display: block;
        animation: lineshow 0.5s forwards;
    }

    .guideaboutbox:hover .aboutline {
        display: block;
        animation: lineshow 0.5s forwards;
    }

    .guidehomebox {
        top: 5rem;
        width: 6rem;
        transition: 0.5s;
    }

    .guideworkbox {
        top: 5rem;
        width: 5.5rem;
        transition: 0.5s;

    }

    .guideaboutbox {
        top: 5rem;
        width: 9rem;
        transition: 0.5s;

    }

    @keyframes lineshow {
        0% {
            width: 0px;
        }
        100% {
            height: 2px;
            width: 100%;
        }
    }
    .bottom {
        background-color: #A5DEE4;
        width: 100%;
        height: 100%;
        margin-bottom: 0;
    }

    .bottom ul {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px;
        font-family: 'Cabin Condensed', sans-serif;
        font-size: 17px;
        opacity: 0.8;
        color: white;
    }

    .maggie {
        font-family: 'Sacramento', cursive;
        color: white;
        font-size: 750%;
        left: 6.2vw;
        top: 3.5vh;
        position: fixed;
        z-index: 1000;
        background-color: #A5DEE4;
        padding-right: 2.5%;
    }

    .line {
        position: fixed;
        align-items: center;
        justify-content: center;
        width: 790px;
        height: 950px;
        right: 13vw;
        top: 12vh;
        border: solid white 5px;
        z-index: 999;
    }

    .typewriter h1 {
        color: white;
        font-family: monospace;
        overflow: hidden;
        border-right: .15em solid white;
        white-space: nowrap;
        margin: 0 auto;
        letter-spacing: .15em;
        animation: typing 3s steps(30, end),
        blink-caret .5s step-end infinite;
        font-size: 35px;
    }

    /* The typing effect */
    @keyframes typing {
        from {
            width: 0
        }
        to {
            width: 100%
        }
    }

    /* The typewriter cursor effect */
    @keyframes blink-caret {
        from, to {
            border-color: transparent
        }
        50% {
            border-color: white
        }
    }
}

@media screen and (max-width: 767px){
    * {
        /*border: solid 1px black;*/
        margin: 0;
        padding: 0;
        height: auto;
        /*box-sizing:border-box*/
    }

    html {
        width: 100%;
        height: 100%;
        margin: 0;
        background: #A5DEE4;
    }

    a {
        color: initial;
        text-decoration: initial;
    }

    .bottom{
        background-color: #A5DEE4;
        width: 100%;
        height: 100%;
        margin-top: 10%;
        margin-bottom: 0;
    }


    .bottom ul{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px;
        font-family: 'Cabin Condensed', sans-serif;
        font-size: 17px;
        opacity: 0.8;
        color: white;
    }

    .home {
        background: #A5DEE4;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 90vh;
        width: 100%;
    }

    .burger {
        display: inline-block;
        cursor: pointer;
        right: 6.2vw;
        top: 5vh;
        position: fixed;
        z-index: 11;
    }

    .burger:hover {
        cursor: pointer;
    }

    .bar1, .bar2, .bar3 {
        width: 45px;
        height: 5px;
        background-color: white;
        margin: 10px 0;
        transition: 0.4s;
    }

    .change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-9px, 6px);
        transform: rotate(-45deg) translate(-4px, 13px);
    }

    .change .bar2 {
        opacity: 0;
    }

    .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px);
        transform: rotate(45deg) translate(-8px, -18px);
    }

    .guideWords {
        padding-left: 40%;
        width: 100%;
        top: 100vh;
        position: fixed;
        transform: translateY(-300%);
        font-family: 'Cabin Condensed', sans-serif;
    }

    .guideWords a {
        position: relative;
        display: block;
        color: white;
        line-height: 3rem;
        font-size: 2rem;
    }

    .guidehomebox {
        padding-top: 15px;
    }

    .guideworkbox {
        padding-top: 15px;

    }

    .guideaboutbox {
        padding-top: 15px;

    }

    .maggie {
        font-family: 'Sacramento', cursive;
        color: white;
        font-size: 350%;
        left: 6.2vw;
        top: 3.5vh;
        position: fixed;
        z-index: 1000;
        background-color: #A5DEE4;
        padding-right: 2.5%;
    }

    .typewriter{
        width: 100%;
        overflow: hidden;
    }
    .typewriter h1 {
        color: white;
        font-family: monospace;
        border-right: .15em solid white;
        white-space: nowrap;
        margin: 0 auto;
        letter-spacing: .15em;
        animation: typing 3s steps(30, end),
        blink-caret .5s step-end infinite;
        font-size: 35px;
        display: none;
    }

    /* The typing effect */
    @keyframes typing {
        from {
            width: 0
        }
        to {
            width: 100%
        }
    }

    /* The typewriter cursor effect */
    @keyframes blink-caret {
        from, to {
            border-color: transparent
        }
        50% {
            border-color: white
        }
    }

}