@font-face {
    font-family: pixel;
    src: url("fonts/pixel.ttf"), local("pix M 8pt");
}
@font-face {
    font-family: 8bitoperator;
    src: url("fonts/8bitoperator.ttf"), local("8bitoperator JVE");
}
@font-face {
    font-family: dotumche;
    src: url("fonts/dotumche.ttf"), local("DotumCheUT");
}

@keyframes smallsquish {
    from { transform: scale(110%, 92%); }
    to { transform: scale(93%, 112%); }
}
@keyframes background-scroll {
    from { background-position: 0px 0px; }
    to { background-position: 80px 80px; }
}

img {
  image-rendering: optimizeSpeed;
}

.background {
    image-rendering: optimizeSpeed;
    background-image: url("images/bg_pattern.png");
    background-repeat: repeat;
    background-attachment: local;
    animation-name: background-scroll;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    background-color: black;
    font-family: pixel;
    color: white;
}
.projectlink {
    transform: scale(100%);
    animation-name: scale;
    animation-duration: 50s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transition-duration: 0.1s;
    transition-timing-function: ease-out;
}
.projectlink:hover {
    transform: scale(110%);
    filter: hue-rotate(0.1turn);
}
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.friendimg {
    width: 80px;
    height: 80px;
    transition-duration: 0.1s;
    transition-timing-function: ease-in;
}
.friendimg:hover {
    transform: scale(110%);
}
friendlink {
    display: flex;
    flex-direction: row;
    gap: 20px;
}
tab-column {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 40px;
    max-width: 98%;
}
tab {
    display: flex;
    flex-direction: column;
    background-color: #d4d0c8;
    color: black;
    width: 25%;
    height: fit-content;
    border-width: 30px;
    border-style: solid;
    border-image: url("images/WINDOW.png");
    border-image-slice: 30;
    border-radius: 0px;
    gap: 10px;
}
.tab-black {
    border-image: url("images/WINDOW_black.png");
    border-image-slice: 30;
    background-color: black;
}
.tab-title {
    position: absolute;
    transform: translate(0px, -40px);
    color: white;
    font-family: dotumche;
    font-size: 16px;
}