html, body {
    margin: 0;
    height: 100%;
    width: 100%;
}

#index {
    height: 100%;
}

section[role="region"] {
    background: #fff;
    height: 100%;
}

/* Decrease the font size */
html {
    font-size: 62.5%;
}


/* animations that control the sections */
[data-position="right"] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    z-index: 15;
    z-index: 100; /* -> drawer */
}
section[role="region"][data-position="right"] {
    position: absolute;
}
[data-position="right"].current {
    animation: rightToCurrent 0.4s forwards;
    -webkit-animation: rightToCurrent 0.4s forwards;
}
[data-position="right"].right {
    animation: currentToRight 0.4s forwards;
    -webkit-animation: currentToRight 0.4s forwards;
}
[data-position="current"].left {
    animation: currentToLeft 0.4s forwards;
    -webkit-animation: currentToLeft 0.4s forwards;
}
[data-position="current"].current {
    animation: leftToCurrent 0.4s forwards;
    -webkit-animation: leftToCurrent 0.4s forwards;
}