@import url("./styles.css");


/* 
desktop formatting
*/
.essay-format{
    text-indent: 2em;
    /*this has to be adjusted for sm. tablets <- */
    margin:1em;
    padding: 1.75em;
    max-width:60vw;
    min-width:30vw;
    overflow: auto;
    box-shadow:var(--overlayBoxShadow), inset var(--overlayBoxShadow);
    border-radius: 0.66em;
}

#opening-statement{
    color:var(--primaryLight);
    display: flex;
    justify-content:end;
    align-items: center;
    font: italic small-caps bold 2em cursive;
    margin: 2em 0px 2em 0px;
    padding-left: 1em;
    overflow: hidden;
}

h1{
    margin:0px 0px 1.5em 0.5em;
    color:var(--primaryLight);
}
h2{
    margin-bottom:1em !important;
}
#about{
    padding:1.5em;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:1em;
}

img{
    width:25em;
    border-radius: 1em;
    margin-bottom:0.8em;
}


/*****************
    Animations
******************/
.banner{
    width: 750px;
    margin:0 auto;
    display:block;

    opacity: 0;
    transform: translateY(300px);
    animation: slideFadeIn 1.5s ease-out forwards, slideFadeOut 1s ease-in backwards;
    
}

@keyframes slideFadeIn {
    from{
        opacity: 0;
        transform:translateY(300px);
    }
    to{
        opacity: 1;
        transform:translateY(0);
    }
}
@keyframes slideFadeOut {
    from{
        opacity: 1;
        transform:translateY(0);
    }
    to{
        opacity: 0;
        transform:translateY(300px);
    }
}


/* 
lg phones and smaller tablets
*/
@media (max-width: 768px){
    .hiddenForSmallerScreens{
        display:none;
    }
    .essay-format{
    text-indent: 2em;
    /*this has to be adjusted for sm. tablets <- */
    margin:0 0.5em;
    padding: 1em;
    max-width:80vw;
    min-width:30vw;
}
#opening-statement{
    margin: 1em 0 0.5em 0;
}
h1{
    margin:0px 0px 0.5em 0.5em;
    font-size: 2.2em;
    /* color:var(--primaryLight); */
}
}