body {
    background: linear-gradient(140deg, #3a494d, #2d413e);
    background-size: 400% 400%;
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;

    -webkit-animation: AnimationName 28s ease infinite;
    -moz-animation: AnimationName 28s ease infinite;
    animation: AnimationName 28s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:15% 0%}
    50%{background-position:86% 100%}
    100%{background-position:15% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:15% 0%}
    50%{background-position:86% 100%}
    100%{background-position:15% 0%}
}
@keyframes AnimationName {
    0%{background-position:15% 0%}
    50%{background-position:86% 100%}
    100%{background-position:15% 0%}
}

@font-face {
    font-family: 'desc';
    src: url('assets/font/desc.ttf');
}

#syphe-devlogs, #website-devlogs, #conna-devlogs{
    margin: 1.1% 1.1% 1.1% 1.1%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border-radius: 15px;
    letter-spacing: .1rem;
    font-size: 15px;
    font-family: 'text';
    width: 30%;
    height: 30%;
    color: rgb(77, 68, 87);
    text-align: start;
    background-color: rgb(234, 231, 255);
    border: white;
}

img {
    margin-top: 7%;
    margin-bottom: 7%;
    width: 90%;
    height: 100%;
    border-radius: 10px;
}

#selector{
    display: flex;
    justify-content: center;
    justify-content: space-evenly;
    margin: 3% 3% 3% 3%;
}

#option-selected{
    background: linear-gradient(to right, #051394, #320049);
    color: white;
    padding: 18px;
    border: black;
    border-radius: 8px;
    width: 120px;
}

#option{
    background-color: rgb(0, 0, 0);
    color: white;
    padding: 18px;
    border: black;
    width: 120px;
    border-radius: 8px;
}

#devlogs{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
}

#blog-threads-title{
    font-family: 'desc';
    color: rgb(235, 233, 255);
}

button:hover{
    cursor: pointer;
}

.hover-underline-animation {
    display: inline-block;
    position: relative;
    color: #0087ca;
  }
  
  .hover-underline-animation::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #0087ca;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
  }
  
  .hover-underline-animation:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }

#textHolder{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}