@font-face {
    font-family: SpaceMono-Regular;
    src: url(./assets/font/spacemono/SpaceMonoNerdFontMono-Regular.ttf);
}

@font-face {
    font-family: SpaceMono-Bold;
    src: url(./assets/font/spacemono/SpaceMonoNerdFont-Bold.ttf);
}

@font-face {
    font-family: Future Earth;
    src: url(./assets/font/future_earth/future-earth.ttf);
}

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

@keyframes title_color {
    0% {
        color:rgb(255, 204, 0);
    }
    100% {
        color: rgb(215, 165, 0)
    }
}

@keyframes button_hover_color {
    0% {
        color:rgb(59, 214, 95);
    }
    100% {
        color:rgb(150, 255, 175);
    }
}

html {
    background: linear-gradient(rgb(73, 73, 73), black);
    background-image: url("./assets/image/ammar-khan.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    height: 100%;
}

body {
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background: transparent;
}

.box {
    border: 2px solid rgb(45, 45, 45);
    box-shadow: 4px 16px 32px rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.80);
    border-radius: 24px;
    color:rgb(83, 218, 76);
    margin-top: 12px; margin-right: 12px; margin-left: 12px;
    padding: 16px;
}

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

.button {
    font-family: "SpaceMono-Bold";
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px;
    border: 2px solid rgb(50, 50, 50);
    border-radius: 24px;
    background: linear-gradient(rgb(73, 73, 73), black);
    text-align: center;
    width: 150px;
    height: 50px;
    color:rgb(76, 218, 109);
    cursor: pointer;
    transition: width 0.5s, border-radius 0.25s, border 1s, margin-top;
    a {
        text-decoration: none;
        color:rgb(76, 218, 109);
    }
}

.button:hover {
    a {
        text-decoration: none;
        animation: button_hover_color 0.2s infinite;
        animation-direction: alternate;
        text-shadow: 0 0 10px #bfbfbf;
    }
    border-color: rgb(178, 178, 178);
    width: 175px;
    border-radius: 8px;
    background: linear-gradient(rgb(89, 89, 89), rgb(26, 26, 26));
}

.header_text {
    font-family: "Future Earth";
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header_text_2 {
    font-family: "Silkscreen";
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.literally_text {
    font-family: "SpaceMono-Bold";
    font-size: 24px;
    padding: 12px;
    white-space: pre-line;
}

.title {
    margin-top: 6px;
    border: 2px solid rgb(45, 45, 45);
    animation: title_color 0.5s infinite;
    animation-direction: alternate;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Future Earth";
    font-size: clamp(1px, 1.5vw, 64px);
    background-image: url(./assets/image/matrix.gif);
    box-shadow: 4px 16px 32px rgb(0, 0, 0);
}