diff --git a/res/css/main.css b/res/css/main.css index 1b7360b..7e9dcef 100644 --- a/res/css/main.css +++ b/res/css/main.css @@ -82,19 +82,55 @@ font-display: swap; } -body { - background-color: #0074D9; +@keyframes appear { + from { + opacity: 0.05; + } + + to { + opacity: 1.0; + } +} + +@keyframes appear-from-right { + from { + margin-left: 100%; + width: 300%; + opacity: 0.05; + } + + to { + margin-left: 0%; + width: 100%; + opacity: 1.0; + } +} + +* { + color: #001F3F; +} + +body .section:first-child { + animation-name: appear; + animation-duration: 1s; +} + +body .section:not(:first-child) { + animation-name: appear-from-right; + animation-duration: 3s; + animation-timing-function: cubic-bezier(0.05, 0.05, 1.0, 1.0); } .section { + display: flex; flex-wrap: wrap; font-family: "Exo2"; box-sizing: border-box; - border: 5px solid #7FDBFF; + border: 5px solid #000; border-radius: 5px; margin-bottom: 2em; - box-shadow: 5px 10px 5px 5px #001f3f; + box-shadow: 5px 10px 5px 5px #001f3f, inset 2px 2px 5px 5px #3A2A1A; } .section > div { @@ -105,11 +141,11 @@ body { } .section > *:nth-child(odd){ - background-color: #F0F0F0; + background-color: hsla(120,100%,70%,0.7); } .section > *:nth-child(even){ - background-color: #FFF00F; + background-color: rgba(100, 200, 200, 0.7); } .section > * { @@ -128,12 +164,7 @@ body { text-align: center; } -.container * { - color: #0f0f0f; -} - .container ul { text-align: left; padding-left: 5em; - color: #0f0f0f; }