body {
    margin: auto;
    width: 70%;
}

.pfp {
    border-radius: 50%;
    border-style: solid;
    border-width: 3px;
    border-color: #5aae9a;
    width: 250px;
    height: 250px;
    object-fit: cover;
    order: 1;
}

.intro-index {
    order: 2;
}

.intro {
    display: flex;
    gap: 50px;
    justify-content: center;
    align-items: center;
}

.construction {
    background-image: url(/assets/images/caution.svg);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}

header {
    padding-top: 180px;
}

.construction-text {
    width: 70%;
    margin: auto;
    backdrop-filter: brightness(70%);
    padding: 10px;
}

@keyframes elle-spin {
  0%   {transform: scale(-1, 1);left:0px; top:0px;}
  10%  {transform: scale(-1.1, 1.1);left:100px; top:50px;}
  20%  {transform: scale(-1.2, 1.2);left:200px; top:0px;}
  30%  {transform: scale(-1.1, 1.1);left:300px; top:60px;}
  40%  {transform: scale(-1.05, 1.05);left:400px; top:-10px;}
  50%  {transform: scale(1, 1);left: 450px; top: 60px;}
  60%  {transform: scale(.9, .9);left:400px; top:15px;}
  70%  {transform: scale(.8, .8);left:300px; top:60px;}
  80%  {transform: scale(.8, .8);left:200px; top:-5px;}
  90%  {transform: scale(.9, .9);left:100px; top:55px;}
  100% {transform: scale(-1, 1);left:0px; top:0px; z-index: -1;}
}

.elle-move {
    position: relative;
    animation-name: elle-spin;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.cloudflare-pages {
    border-radius: 10%;
}