body {
    background-color: beige;
    margin: 0;
}


header, footer {
height: 15vh;
background-color: #8395a7;

}

main {
    height: 70vh;
}

.home {
    background-color: #feca57;
}

.page2 {
    background-color: #c8d6e5;
}

.page3 {
    background-color: #0abde3;
}

h1 {
    margin: 0;
}





.fade-leave  {
    opacity: 1;
}
.fade-leave-active {
    transition: opacity 0.3s linear;
}

.fade-leave-to {
    opacity: 0;
}


.fade-enter  {
    opacity: 0;
}

.fade-enter-active {
    transition: opacity 0.3s linear;
}

.fade-enter-to  {
    opacity: 1;
}



.clip-leave  {
    opacity: 1;
}
.clip-leave-active {
    transition: opacity .75s linear;
}

.clip-leave-to {
    opacity: 0;
}


.clip-enter  {
    clip-path: circle(0%);


}

.clip-enter-active {
    transition: all 0.75s linear;
    position: absolute;
    top: 15vh;
    z-index: 2;
}

.clip-enter-to  {
    clip-path: circle(75%);

}