@import url('https://fonts.googleapis.com/css2?family=VT323&family=Space+Mono&display=swap');


/* -------------------------
   GENERAL
-------------------------- */

* {
    box-sizing: border-box;
}

body {

    margin: 0;

    font-family: "Space Mono", monospace;

    background-color: #74e4ff;

    

    background-size: 25px 25px;

}


.page {

    width: 900px;

    max-width: 95%;

    margin: 40px auto;

}


/* -------------------------
   HEADER
-------------------------- */

.header {

    text-align: center;

    background: white;

    border: 3px solid black;

    box-shadow: 8px 8px 0px black;

}


.top-bar {

    display: flex;

    justify-content: space-between;

    padding: 8px 15px;

    background: #1f4fbf;

    color: white;

}


h1 {

    font-family: "VT323", monospace;

    font-size: 55px;

    margin: 25px 10px 5px;

}


.subtitle {

    font-style: italic;

    margin-bottom: 25px;

}


/* -------------------------
   NAVIGATION
-------------------------- */

nav {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

    margin: 25px 0;

}


nav a {

    background: white;

    color: black;

    padding: 10px 15px;

    border: 2px solid black;

    text-decoration: none;

    font-weight: bold;

    box-shadow: 4px 4px 0px black;

}


nav a:hover {

    background: black;

    color: white;

    transform: translate(2px, 2px);

    box-shadow: 2px 2px 0px black;

}


/* -------------------------
   WINDOWS
-------------------------- */

.window {

    background: white;

    border: 3px solid black;

    margin-bottom: 30px;

    box-shadow: 8px 8px 0px black;

}


.window-title {

    background: #1f4fbf;

    color: white;

    padding: 8px 10px;

    display: flex;

    justify-content: space-between;

    font-weight: bold;

}


.buttons span {

    display: inline-block;

    background: white;

    color: black;

    width: 20px;

    text-align: center;

    margin-left: 4px;

}


.window-content {

    padding: 25px;

}


/* -------------------------
   PROFILE
-------------------------- */

.profile-content {

    display: grid;

    grid-template-columns: 250px 1fr;

    gap: 30px;

    padding: 30px;

}


.profile-image img {

    width: 100%;

    border: 3px solid black;

}


.profile-info {

    padding: 10px;

}


.profile-info h2 {

    font-family: "VT323", monospace;

    font-size: 45px;

    margin-top: 0;

}


.about {

    margin: 0 30px 30px;

    border-top: 2px dashed black;

    padding-top: 20px;

}


.about h3 {

    font-family: "VT323", monospace;

    font-size: 35px;

}


/* -------------------------
   BLOG
-------------------------- */

.blog h2 {

    font-family: "VT323", monospace;

    font-size: 40px;

}


.date {

    color: #555;

    font-size: 13px;

}


.read-more {

    display: inline-block;

    margin-top: 15px;

    color: black;

    font-weight: bold;

}


/* -------------------------
   ERROR
-------------------------- */

.error {

    transform: rotate(-1deg);

}


.error-title {

    background: black;

    color: white;

}


.progress-bar {

    width: 100%;

    background: #ddd;

    border: 2px solid black;

    height: 35px;

}


.progress {

    width: 72%;

    height: 100%;

    background: #4a8f3c;

    color: white;

    padding: 5px;

    text-align: center;

    font-size: 13px;

}


.small-text {

    font-family: "VT323", monospace;

    font-size: 22px;

}


/* -------------------------
   GLITCH
-------------------------- */

.glitch-text {

    font-family: "VT323", monospace;

    font-size: 28px;

    animation: glitch 2s infinite;

}


@keyframes glitch {

    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-2px, 1px);
    }

    40% {
        transform: translate(2px, -1px);
    }

    60% {
        transform: translate(-1px, 2px);
    }

    80% {
        transform: translate(1px, -2px);
    }

    100% {
        transform: translate(0);
    }

}


/* -------------------------
   FOOTER
-------------------------- */

footer {

    text-align: center;

    font-family: "VT323", monospace;

    font-size: 22px;

    padding: 20px;

}


.visitor-counter {

    display: inline-block;

    background: black;

    color: #00ff00;

    padding: 5px 10px;

}


/* -------------------------
   MOBILE
-------------------------- */

@media (max-width: 600px) {

    .profile-content {

        grid-template-columns: 1fr;

    }


    h1 {

        font-size: 40px;

    }


    .top-bar {

        flex-direction: column;

        gap: 5px;

    }

}