/*@media only screen and (max-width: 400px) and (orientation: portrait){*/
body{
    overflow-x: hidden;
}
.card{
    background: white;
    box-sizing: border-box;
    padding: 10px;
    border-radius:  1em;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.09);
    position: relative;
    transform: translateX(0px);
    opacity: 1;
    transition: all 1s cubic-bezier(.17,.67,.29,1.35);
    display: grid;
}

.card > .content > h1{
    font-family: 'PlayfairDisplay', sans-serif;
    font-weight: 500;
}

.card > .content > p{
    font-family: Lato;
}


.links{
    text-align: center;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em;
    align-self: end;
}

.links > a{
    background: #2A83FE;
    border-radius: 1em;
    padding: 1em;
    box-sizing: border-box;
    margin-bottom: 5px;
    box-shadow: 0 8px 1px 0 lightblue;
    color: white;
    cursor: pointer;
    opacity: 0.9;
    font-family: 'Lato', sans-serif;
}

.links > a:hover, .links > a:active{
    opacity: 1;
}

.dark{
    /* background: rgba(0, 0, 0, 0.3); */
    transform: translateX(50px);
    opacity: 0;
    /* transition: all 1s ease-in-out; */
}
/*}*/