body{ background: url(img/wp.gif) no-repeat fixed; background-size:cover; text-align:center; font-family:Cousine; } .frame{ margin-top=10px; margin-bottom=10px; } .language{ text-decoration:none; font-size:1.2em; position: absolute; right:8px; top: 2px; } .links{ display: flex; justify-content: center; flex-wrap: wrap; /*grid-auto-flow: column;*/ } .link{ display: flex; flex-wrap: wrap; flex-direction: column; justify-content:center; align-items:center; width: 265px; height: 215px; margin: 10px; background-color: rgba(220, 237, 200, 0.55); border: 3px solid skyblue; border-radius: 2%; /*animation-name: spin; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear;*/ } a{ text-decoration: none; color: inherit; } .link:hover { opacity: 0.6; } .link span{ font-family:tintin; font-size:1.5em; position: relative; top: 3%; } .content{ margin: auto; margin-top: 2%; margin-bottom: 2%; padding: 1%; width: 75%; background-color: rgba(220, 237, 200, 0.65); border-radius: 5px; border: 5px dotted #b4d545; } .content h1, h2{ font-family: tintin; } .content h1{ text-decoration: underline; } .matos{ display: flex; flex-wrap: wrap; justify-content: space-around; } .matos ul{ text-align: left; } .section-sep{ border: none; border-top: 2px solid skyblue; } .sub-sep{ border: none; border-top: 3px dotted blue; } .footer{ animation-name: foot-anim; animation-duration: 5s; animation-iteration-count: infinite; } @keyframes spin{ from{ transform:rotate(0deg); } to{ transform:rotate(359deg); } } @keyframes foot-anim{ 0%{ color: #84008c; } 12.5%{ color: #3f0098; } 25%{ color: #46bebc; } 37.5%{ color: #2f8a00; } 50%{ color: #fdff00; } 62.5%{ color: #f48a00; } 75%{ color: #f00100; } 87.5%{ color: #f366b1; } 100%{ color: #84008c; } } @font-face{ font-family:Cousine; src:url(./fonts/CousineNerdFont-Regular.ttf); } @font-face{ font-family:tintin; src:url(./fonts/tintin_talking.ttf); }