@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

* {
    color: white;
    box-sizing: border-box;
      font-family: "Ubuntu", sans-serif;
      user-select: none;
      -webkit-user-drag: none;
      margin: 0;
}

.container {
    background-image: linear-gradient(0deg, rgb(90, 78, 69), rgb(59, 44, 40));
    padding: 24px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body {
    background-color: rgb(39, 29, 26);
    max-width: 900px;
    margin: 30px auto;
    padding: 0 12px;
    display: flex;
    gap: 24px;
}

#side {
    height: fit-content;
}

body::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(./images/checkerPattern.png);
        background-position: 100%;
        opacity: 0.02;
        z-index: -1;
        animation-name: checkerAnimate;
        animation-duration: 60s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        overflow: hidden;
}

@media screen and (max-width: 800px) {
  body {
    flex-direction: column;
  }

  .container {
    max-width: 500px;
    margin: auto;
  }
}


.pfp {
    width: 70px;
    border-radius: 10px;
}

.eContainer {
    display: flex;
    gap: 16px;
    background-color: rgb(37, 32, 26);
    padding: 12px;
    border-radius: 10px;
    border: 2px dashed rgb(146, 117, 94)
}

.eContainer * {
    margin: 0;
}

.eContainer p {
    color: rgb(207, 173, 158);
}

#pfpText {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

@keyframes checkerAnimate {
    0% {
        background-position: 0%;
    }

    100% {
        background-position: 200% 200%;
    }
}

#deviantart *, #reddit *, #spotify *, #github *, #discord * {
    transition: all 300ms;
}

#deviantart:hover * {
    color: rgb(80, 243, 153);
}

#reddit:hover * {
        color: rgb(255, 99, 71);
}

#spotify:hover * {
        color: rgb(36, 243, 88);
}

#github:hover * {
        color: rgb(170, 170, 170);
}

#discord * {
    color: rgb(106, 103, 255);
}

::selection {
    background: #a55f31;
    color: rgb(255, 255, 255);
    text-shadow: none;
}

::-moz-selection {
    background: #a55f31;
    color: #EEE;
    text-shadow: none;
}