@import url('https://fonts.googleapis.com/css2?family=Amiri&family=Roboto:wght@300;400&display=swap');
/*
@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 300;
    src: local('Roboto Light'), local('Roboto-Light'), url('../fonts/robotolight.woff2') format('woff2');
    unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F
}
@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url('../fonts/sTdaA6j0Psb920Vjv-mrzH-_kf6ByYO6CLYdB4HQE-Y.woff2') format('woff2');
    unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F
}
@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 900;
    src: local('Roboto Black'), local('Roboto-Black'), url('../fonts/robotoblack.woff2') format('woff2');
    unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F
}
*/
/*
.container
{
    max-width: 600px;
    position: relative;
    width: 100vw;
    height: 100vh;
    margin: auto;
    border: 1px solid black;    
}

.header
{
    position: absolute;
}

.content
{
    margin-top: 52px;
    height: 90%;
}

*/

@-webkit-keyframes moveFromRightFade {
	from { opacity: 0.3; -webkit-transform: translateX(100%); }
}
@keyframes moveFromRightFade {
	from { opacity: 0.3; -webkit-transform: translateX(100%); transform: translateX(100%); }
}
  
.content 
{  
	-webkit-animation: moveFromRightFade .7s ease both;
	animation: moveFromRightFade .7s ease both;    
    height: 90%;
}
  
.tab button 
{
    padding-bottom: 10px;
}