@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');

*{margin:0; padding:0;}

body {
    text-align:center;
    font-family: 'Shadows Into Light', cursive;
    color: #0073e6;
    background-image: url(dark_exa.webp);
}

div {
    width:100px;
    height:100px;
    display:inline-block;
    margin:10px;
}

table {
    align-self: center;
    width: 800px;
}

td {
    vertical-align:middle;
    padding: 10px;
    width: 25%;
    height: 25%;
}

.center {
    align-self: center;
    margin-left: auto;
    margin-right: auto;
}

@keyframes headlineDrop {
    0%{font-size:6ea;filter:blur(40px);}
    100%{font-size:2em;filter:blur(0px);}
}

@keyframes subheadSlide {
    0%{opacity: 0;transform:translateX(-300px);}
    100%{opacity:1;transform:translateX(0px);}
}

@keyframes fadeIn {
    0%{opacity: 0;}
    100%{opacity: 100;}
}

h1{padding: 10px; font-size: 2em; color: #0073e6; animation: headlineDrop 1s ease-in;}

h2{padding: 10px; font-size: 1.5em; color: #0073e6; animation: subheadSlide 1s ease-in 1s;animation-fill-mode: both;}

h3{padding: 10px; font-size: 1em;}

#div1{background: linear-gradient(to bottom, #41bfc4, #3163b4); animation:fadeIn .5s linear 2s;animation-fill-mode: forwards;}
#div2{background: linear-gradient(to bottom, #3163b4, #388967); animation:fadeIn .5s linear 2.25s;animation-fill-mode:forwards;}
#div3{background: linear-gradient(to bottom, #009973, #41bfc4); animation:fadeIn .5s linear 2.5s;animation-fill-mode: forwards;}
#div4{background: linear-gradient(to bottom, #e6e6ff, #009999); animation:fadeIn .5s linear 2.75s;animation-fill-mode:forwards;}
#div5{background: linear-gradient(to bottom, #41bfc4, #41bfc4); animation:fadeIn .5s linear 2.25s;animation-fill-mode: forwards;}
#div6{background: linear-gradient(to bottom, #009973, #00ccff); animation:fadeIn .5s linear 2.5s;animation-fill-mode: forwards;}
#div7{background: linear-gradient(to bottom, #e6e6ff, #009999); animation:fadeIn .5s linear 2.75s;animation-fill-mode: forwards;}
#div8{background: linear-gradient(to bottom, #41bfc4, #3163b4); animation:fadeIn .5s linear 2s;animation-fill-mode: forwards;}
#div9{background: linear-gradient(to bottom, #e6e6ff, #388967); animation:fadeIn .5s linear 2.5s;animation-fill-mode: forwards;}
#div10{background: linear-gradient(to bottom, #3163b4, #41bfc4); animation:fadeIn .5s linear 2.75s;animation-fill-mode: forwards;}
#div11{background: linear-gradient(to bottom, #41bfc4, #3163b4); animation:fadeIn .5s linear 2s;animation-fill-mode: forwards;}
#div12{background: linear-gradient(to bottom, #009973, #00ccff); animation:fadeIn .5s linear 2.25s;animation-fill-mode: forwards;}
#div13{background: linear-gradient(to bottom, #41bfc4, #3163b4); animation:fadeIn .5s linear 2.75s;animation-fill-mode: forwards;}
#div14{background: linear-gradient(to bottom, #e6e6ff, #00ccff); animation:fadeIn .5s linear 2s;animation-fill-mode: forwards;}
#div15{background: linear-gradient(to bottom, #009973, #41bfc4); animation:fadeIn .5s linear 2.25s;animation-fill-mode: forwards;}
#div16{background: linear-gradient(to bottom, #3163b4, #388967); animation:fadeIn .5s linear 2.5s;animation-fill-mode: forwards;}

div{opacity: 0;}

a:link {
    color: #000066;
}

a:visited {
    color: #003300;
}

a:hover {
    color: #6600cc;
}

footer {
    background: linear-gradient(to right, #000000, #3163b4);
    align-self:center;
    position: inherit;
    bottom: 0;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    border-collapse: collapse;
    font-size: 1em;
    font-weight: bold;
}