/**
 * Table of Contents
 * 0. Global
 * 1. Mobile
 * 2. Tablet
 * 3. Desktop
**/
body {
    background-color: white;
    margin: 0;
    padding: 0;
    justify-content: center;
}
.pnf {
    color:#006699;
    text-align: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bold;
    /* font-style: italic; */
    font-size: 40px;
    text-shadow: 1px 1px 3px #c1cad0;
}


.animation {
    display: block;
    margin-top: 1000px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}
p{
    text-align: center;
}

/** ---- 0. Global ---- **/
/** Desktops and laptops **/
@media only screen 
and (min-width : 1224px) {
}

/** Large screens **/
@media only screen 
and (min-width : 1824px) {
}

/** ---- 1. Mobile ---- **/
/* 5. Smartphones (landscape) */
@media only screen 
and (min-width : 321px) {
}

/** 6. Smartphones (portrait) **/
@media only screen 
and (max-width : 320px) {
}

/** 7. iPads (portrait and landscape) **/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
}

/** 8. iPads (landscape) **/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
}

/** 9. iPads (portrait) **/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
}

/** 4. Smartphones (portrait and landscape) **/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
}

/** 2. Tablet **/
@media (min-width: 768px) {
   
}

/** 3. Desktop **/
@media (min-width: 992px) {

}