@font-face {
    font-family: '5by7';
    src: url('5by7.ttf') format('truetype');
}

@font-face {
    font-family: '5by7';
    font-weight: bold;
    src: url('5by7_b.ttf') format('truetype');
}

/* color pallet

standardised for logo and parts
#f6559e magenta
#d8ec73 chartreuse
#4bd66a lightgreen
#5e9be1 bluegrey
#bf5ef6 lightpurple
#ffffff white text

additional from postcard
#291e66 darkviolet background
#52447c violet grid lineart
 */
.magenta {
    background: #f6559e;
}

.chartreuse {
    background: #d8ec73;
}

.lightgreen {
    background: #4bd66a;
}

.bluegrey {
    background: #5e9be1;
}

.lightpurple {
    background: #bf5ef6;
}

.darkviolet {
    background: #10135b;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: space-between;
    margin: 0 auto 0;
    padding: 0;
    text-align: center;
    background: #291e66;
    color: white;
    font-family: '5by7', sans-serif;
    background-image: url('grid.svg');
    background-size: 8210px 4740px;
}

body>div {
    margin: 0;
    padding: 0;
    overflow-x: clip;
}

#footer {
    padding: 6rem 0 0;
    background: linear-gradient(to bottom, #00000000, #291e667f 20%, #291e66bf 50%, #291e66 75%);
    width: 100%;
}

#contact {
    margin: 0 auto;
    max-width: 1000px;
}

#links {
    margin: 1rem auto 4rem;
}

a {
    color: #5f95c7;
}

h1 {
    margin: 0;
    padding: 2em 0 1em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

@media (width <=34rem) {

    h1 .d,
    h1 .a,
    h1 .t,
    h1 .e1,
    h1 .n1,
    h1 .s,
    h1 .p,
    h1 .u,
    h1 .r,
    h1 .e2,
    h1 .n2 {
        display: inline-block;
        max-width: 16vw;
    }
}

@media (width > 34rem) {

    h1 .d,
    h1 .a,
    h1 .t,
    h1 .e1,
    h1 .n1,
    h1 .s,
    h1 .p,
    h1 .u,
    h1 .r,
    h1 .e2,
    h1 .n2 {
        display: inline-block;
        max-width: 5.5rem;
    }
}

h1>span {
    position: relative;
    z-index: 2;
}

h1>span:first-child {
    z-index: 3;
}

h1 .d {
    content: url('d.png');
    animation: 3s ease 0.1s infinite alternate bobble;
}

h1 .a {
    content: url('a.png');
    animation: 2s ease 0.3s infinite alternate bobble;
}

h1 .t {
    content: url('t.png');
    animation: 4s ease 0.2s infinite alternate bobble;
}

h1 .e1 {
    content: url('e1.png');
    animation: 1.5s ease 0.1s infinite alternate bobble;
}

h1 .n1 {
    content: url('n1.png');
    animation: 2.3s ease 0.3s infinite alternate bobble;
}

h1 .s {
    content: url('s.png');
    animation: 2.7s ease 0.1s infinite alternate bobble;
}

h1 .p {
    content: url('p.png');
    animation: 4s ease 0.2s infinite alternate bobble;
}

h1 .u {
    content: url('u.png');
    animation: 3.2s ease 0.3s infinite alternate bobble;
}

h1 .r {
    content: url('r.png');
    animation: 2.8s ease 0.1s infinite alternate bobble;
}

h1 .e2 {
    content: url('e2.png');
    animation: 2.4s ease 0.3s infinite alternate bobble;
}

h1 .n2 {
    content: url('n2.png');
    animation: 3.6s ease 0.2s infinite alternate bobble;
}

#header {
    text-align: center;
    position: relative;
    z-index: 1;
    transform: rotateX(57deg) rotateZ(47deg) translateY(-2em);
    transform-origin: top center;
    transition: transform 1s ease-in-out;
    margin: 4rem 0 1rem;
    padding: 0;
    font-size: 250%;
    line-height: 1em;
}

#header:hover {
    transform: rotateX(57deg) rotateZ(47deg) rotateX(-90deg) translateY(-0.5em);
    transition: transform 0.3s ease-in-out;
}

#header a {
    text-decoration: none;
}

#header p {
    margin: 0.2em 0;
}

#motto {
    font-weight: bold;
    animation: 2s linear infinite alternate blink;
}

#header:hover #motto {
    animation: none;
}

@keyframes blink {
    0% {
        opacity: 1;
        text-shadow: rgba(255, 255, 255, 0.1) 0 0 3px;
    }

    25% {
        opacity: 1;
        text-shadow: rgba(255, 255, 255, 0.7) 0 0 3px;
    }

    26% {
        opacity: 0.2;
        text-shadow: none;
    }

    75% {
        opacity: 0.2;
        text-shadow: none;
    }

    76% {
        opacity: 1;
        text-shadow: rgba(255, 255, 255, 0.7) 0 0 3px;
    }

    100% {
        opacity: 1;
        text-shadow: rgba(255, 255, 255, 0.1) 0 0 3px;
    }
}

@keyframes bobble {
    0% {
        transform: none;
    }

    100% {
        transform: translateY(-35%);
    }
}

.box {
    display: inline-block;
    border: 2px solid #52447c;
    margin: 1rem auto;
    padding: 16px;
    background-image: url('stripes.svg');
    background-origin: padding-box;
    animation: 2s linear infinite stripes;
    box-shadow: rgba(0, 0, 0, 0.4) 0 0 8px;
}

.box>div {
    padding: 0.5rem;
    border: 2px solid #52447c;
    background-color: #10135b;
}

@keyframes stripes {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: 64px 0px;
    }
}

div#alte-ds {
    margin: 0 auto;
}

#alte-ds ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    text-align: center;
}

#alte-ds li {
    padding: .5ex;
    margin: .5ex;
    display: inline-block;
}

.ico {
    font-family: serif;
    vertical-align: bottom;
    margin: .1ex .1ex -.2ex .1ex;
    padding: .1ex .1ex .2ex .1ex;
    width: 1.2em;
    height: 1.2em;
    border-radius: 100%;
}

.ico.bluegrey,
.ico.chartreuse,
.ico.lightgreen {
    box-shadow: rgba(0, 0, 0, 0.8) 0 2px 8px;
}

.ico.bluegrey:hover {
    box-shadow: #5e9be1 0 0 16px;
}

.ico.chartreuse:hover {
    box-shadow: #d8ec73 0 0 16px;
}

.ico.lightgreen:hover {
    box-shadow: #4bd66a 0 0 16px;
}

#links .ico {
    margin: 0 1rem;
    width: 3rem;
    height: 3rem;
    transition: transform 1s ease-out, box-shadow 0.3s;
}

#links .ico:hover {
    transform: scale(150%);
    transition: transform 0.3s ease-out, box-shadow 0.1s;
}

#cfp-box {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

#cfp-box:hover {
    transform: scale(1.02);
}

.cfp-title {
    font-size: 2.0em;
    font-weight: bold;
    margin-bottom: 0.5em;
    color: #ff9900;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.cfp-content {
    perspective: 1000px;
    font-size: 1em;
}

.cfp-wobble {
    font-size: 1em;
    display: inline-block;
    animation: wobble 5s ease-in-out infinite;
    transform-style: preserve-3d;
    color: #ff5500;
    font-weight: bold;
}

.cfp-content .red {
    color: #ff0000;
}

.cfp-content .blue {
    color: #4b99fe;
}

.cfp-content .green {
    color: #39d439;
}

.cfp-content .yellow {
    color: #929200;
}

@keyframes wobble {

    0%,
    100% {
        transform: translateZ(0) rotateX(0) rotateY(0);
    }

    25% {
        transform: translateZ(50px) rotateX(5deg) rotateY(-3deg);
    }

    50% {
        transform: translateZ(0) rotateX(0) rotateY(0);
    }

    75% {
        transform: translateZ(50px) rotateX(-5deg) rotateY(3deg);
    }
}

.cfp-button {
    display: inline-block;
    margin-top: 1em;
    padding: 0.5em 1em;
    background: linear-gradient(45deg, #ff9900, #ff5500);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.cfp-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}

.shake-animation {
    animation: shake 5s ease-in-out infinite;
    display: inline-block;
}

.shake-animation:hover {
    animation: none;
}

@keyframes shake {
    0%, 100% {
        transform: translate(0, 0);
    }
    2% {
        transform: translate(-5px, 0);
    }
    4% {
        transform: translate(5px, 0);
    }
    6% {
        transform: translate(-5px, 0);
    }
    8% {
        transform: translate(5px, 0);
    }
    10% {
        transform: translate(0, 0);
    }
    30% {
        transform: translate(0, 0);
    }
    32% {
        transform: translate(0, -5px);
    }
    34% {
        transform: translate(0, 5px);
    }
    36% {
        transform: translate(0, -5px);
    }
    38% {
        transform: translate(0, 5px);
    }
    40% {
        transform: translate(0, 0);
    }
    60% {
        transform: translate(0, 0);
    }
    62% {
        transform: translate(5px, 5px);
    }
    64% {
        transform: translate(-5px, -5px);
    }
    66% {
        transform: translate(5px, 5px);
    }
    68% {
        transform: translate(-5px, -5px);
    }
    70% {
        transform: translate(0, 0);
    }
}