body{
    background: url(imgs/xpwp.jpg) no-repeat center center;
    background-attachment: fixed;
    background-size: cover;

    font-family: 'Courier New', Courier, monospace;
    color: aliceblue;

    cursor: auto;

    margin: 0%;
    min-width: 90vw;
    min-height: 100vh;    

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

header{
    margin-top: 30px;
    margin-bottom: 0%;
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.wip{    
    background-color: rgba(240, 248, 255, 0.233) ;
    background-image: url(imgs/noise.png);
    border-color: aliceblue;
    border-style: dashed;
    
    padding: 30px;
}

#container{
    max-width: 900px;
    margin: auto;
    padding: 7vh;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 25px;    
}

#placeholder{
    grid-column: 1/3;

    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

#barriere{
    margin-top: 20px;
}

#upright{
    transform: rotate(-3deg);
}

#onepiece{
    grid-column: 1/4;

    display: flex;
    flex-flow: row nowrap;
    align-items: flex-end;
    justify-content: space-around;
}

#photo{
    grid-column: 2/4;
}

#notes{
    background-color: #eed604;
    color: black;
    border-style: solid;
    border-width: 2px;
    padding: 25px;
    transform: rotate(2deg);
}

footer{
    display: flex;
    flex-direction: row;
    justify-content: center;

    margin-top: 20px;    
    padding: 8px 5px 5px 5px;
    background-color: rgba(255, 255, 255, 0.29);
}

#blinkies{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    width: fit-content; 
}

a{
    display: inline-flex;
}

.blinky{
    margin: 3px;
}

.spin {
    background-image: repeating-linear-gradient(0deg, #f0f8ff, #f0f8ff 11px, transparent 11px, transparent 21px, #f0f8ff 21px), repeating-linear-gradient(90deg, #f0f8ff, #f0f8ff 11px, transparent 11px, transparent 21px, #f0f8ff 21px), repeating-linear-gradient(180deg, #f0f8ff, #f0f8ff 11px, transparent 11px, transparent 21px, #f0f8ff 21px), repeating-linear-gradient(270deg, #f0f8ff, #f0f8ff 11px, transparent 11px, transparent 21px, #f0f8ff 21px);
    background-size: 3px calc(100% + 21px), calc(100% + 21px) 3px, 3px calc(100% + 21px) , calc(100% + 21px) 3px;
    background-position: 0 0, 0 0, 100% 0, 0 100%;
    background-repeat: no-repeat;
    animation: borderAnimation 1s infinite linear; 
}

@keyframes borderAnimation {
    from { background-position: 0 0, -21px 0, 100% -21px, 0 100%; } 
    to { background-position: 0 -21px, 0 0, 100% 0, -21px 100%; } 
}