body { background-color: #000000; margin-left: 5vw; margin-right: 5vw; } h1,h2,p{ color: #da74e5; font-family: 'Overpass', sans-serif; font-weight: 50; text-align: center; } h1 { font-size: 3em; margin-bottom: 0px; } hr { color: #da74e5; margin: 2vmax 0px; } .flexrow,.wrapgroup{ display:flex; width: 100%; flex-direction: row; justify-content: center; flex-wrap: wrap; } .wrapgroup { flex-wrap: nowrap; flex: 0 1 0px; } .header > .wrapgroup > .flexitem > img { width: auto; } .header > .wrapgroup > .flexitem > p { font-size: 10pt; } .header > .wrapgroup > .flexitem { min-width: 50px; max-width: 100px; } /*.header > .wrapgroup,.footer > .wrapgroup { flex-grow: 1; justify-content: space-around; }*/ .header { margin: auto 10%; width: 80%; } .footer > .wrapgroup > .flexitem { min-width: 40px; max-width: 70px; padding: 1vmax; } .footer { margin-bottom: 2vmax; } .flexitem { min-width: 75px; max-width: 200px; display: flex; flex-direction: column; justify-content: center; border-style: solid; border-color: #da74e5; border-width: 3px; border-radius: 10px; padding: 2vh; margin: 1vh 1vw; text-decoration: none; transition: 0.5s; } .flexitem:hover { box-shadow: 0px 0px 30px #da75e5dd; transition: 0.25s; } .flexitem > p { margin-bottom: 0px; /* font-size: 10pt;*/ } /* latin-ext */ @font-face { font-family: 'Overpass'; font-style: normal; font-weight: 400; src: url(/style/fonts/overpass/latin-ext.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Overpass'; font-style: normal; font-weight: 400; src: url(/style/fonts/overpass/latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }