body {
    background: url("http://joeyblommers.eu/backdrops/backdrop.jpg");
}

h1, h2{
    font-family: 'Noto Sans JP', sans-serif;
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap');

a {
    font-family: 'Chilanka', cursive;
}

.wrapper {
    background-color: white;
}

.logo-nav {
    width: 128px;
    height: 128px;
}

.navbarrow {
    display: flex;
    border-bottom: 2px solid black;
}

.navbarrow a {
    margin: 20px;
    color: black;
    text-decoration: none;
}

.navbarrow a:hover {
    text-decoration: none;
    color: #ac162c;
}

.but-move {
    margin-left: 40%;
}

.project {
    margin-top: 5px;
    width: 30rem;
}

.project-text {
    padding-top: 5px;
}

.skills {
    text-align: center;
}
input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical
}

input[type=submit] {
    background-color: lightgray;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #ac162c;
}
.aaaaa {
    border-radius: 5px;
    background-color: white;
    padding: 20px;
}

.me {
    width: 250px;
    height: 250px;
}

.h1-smaller {
    font-size: 25px;
}

/* Snow Effect */
.snowflakes {
    display: none;
    width: 90%;
    position: absolute; top: -90px; left: 0;
}

i, i:after, i:before { background: white; }
i {
    display: inline-block;
    -webkit-animation: snowflakes 3s linear 2s 20;
    -moz-animation: snowflakes 3s linear 2s 20;
    position: relative;
}
i:after, i:before {
    height: 100%;
    width: 100%;
    content: ".";
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-transform: rotate(120deg);
}
i:before { -webkit-transform: rotate(240deg); }

@-webkit-keyframes snowflakes {
    0% {
        -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(0.6);
    }
    100% {
        -webkit-transform: translate3d(15px, 1200px, 0px) rotate(360deg) scale(0.6);
    }
}

.snowflakes i:nth-child(3n) {
    width: 16px; height: 4px;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 30;
    -webkit-transform-origin: right -45px;
}

.snowflakes i:nth-child(3n+1) {
    width: 24px; height: 6px;
    -webkit-animation-duration: 6s;
    -webkit-animation-iteration-count: 45;
    -webkit-transform-origin: right -30px;
}

.snowflakes i:nth-child(3n+2) {
    width: 32px; height: 8px;
    -webkit-animation-duration: 8s;
    -webkit-animation-iteration-count: 60;
    -webkit-transform-origin: right -15px;
}

/* different delays so they don't all start at the same time */
.snowflakes i:nth-child(7n) {
    opacity:.3;
    -webkit-animation-delay: 0s;
    -webkit-animation-timing-function:ease-in;
}
.snowflakes i:nth-child(7n+1) {
    opacity:.4;
    -webkit-animation-delay: 1s;
    -webkit-animation-timing-function:ease-out;
}
.snowflakes i:nth-child(7n+2) {
    opacity:.5;
    -webkit-animation-delay: 1.5s;
    -webkit-animation-timing-function:linear;
}
.snowflakes i:nth-child(7n+3) {
    opacity:.6;
    -webkit-animation-delay: 2s;
    -webkit-animation-timing-function:ease-in;
}
.snowflakes i:nth-child(7n+4) {
    opacity:.7;
    -webkit-animation-delay: 2.5s;
    -webkit-animation-timing-function:linear;
}
.snowflakes i:nth-child(7n+5) {
    opacity:.8;
    -webkit-animation-delay: 3s;
    -webkit-animation-timing-function:ease-out;
}
.snowflakes i:nth-child(7n+6) {
    opacity:.9;
    -webkit-animation-delay: 3.5s;
    -webkit-animation-timing-function:ease-in;
}