:root {
    --main-width:  60%;
    --general-border: 5px ridge white;
}


@font-face {
  font-family: 'PressStart2P'; /* Define a name for your font */
  src: url('/fonts/PressStart2P-Regular.ttf') format('truetype'); /* Path to your .ttf file */
  font-weight: normal;
  font-style: normal;
}

* {
    box-sizing: border-box;
    font-family: "PressStart2P", sans-serif;
}

body {
    background-image: url("img/urban_japan.jpg");

    display: flex;
    flex-direction: column;
    align-items: center;
}

body > * {
    border: var(--general-border);
    background-color: #fdcbff;
    width: var(--main-width);
}

header > img {
    margin-top: 15px;
}

#middle_part {
    height: 800px;

    display: flex;
    flex-direction: column;
    align-items: center;
}

nav {
    /* width: 100%; */
    display: flex;
    justify-content: center;
    border: none;
}

nav > div {
    width: 100%;

    font-size: 15px;

    border: var(--general-border);;
    border-bottom: none;

    list-style-type: none;
    padding: 3px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.cur_page > a {
   color: #e100ff;
}

main {
    width: 100%;

    display: grid;
    grid-template-columns: 4fr 1fr;
}

.naming {
    font-size: 13px;
    padding: 3px;
    display: inline-block;

    border: var(--general-border);;
    border-bottom: none;
}


#home_feed {
    margin: 20px;
    margin-right: none;

    flex-grow: 1;
    display: inline-block;
}

#side_menu {
    margin: 20px;
    margin-left: none;

    width: 200px;
    display: inline-block;
}


#links {
    list-style-type: square;
    display: flex;
    flex-direction: column; /* Stack vertically */
    gap: 15px; /* Space between each li */
}


.side_content {
    font-size: 13px;
    width: 100%;
    border: var(--general-border);;
}



.main_content {
    padding: 5px;
    font-size: 14px;
    width: 100%;
    border: var(--general-border);;
    
}

a {
  color: #ac31f3;
  text-decoration: none;    /* Remove underline */
  font-weight: 500;
  transition: all 0.3s ease; /* Smooth animation */
}

/* Hover state */
a:hover {
  color: #ff00ff;           /* Darker blue */
  text-decoration: underline;
}





footer {
    /* padding: 10px; */
    border-top: none;
    /* height: 50px; */

    display: flex;
    flex-direction: column;
    align-items: center;
}

#banners {
    margin: 10px;
    margin-bottom: 5px;
}

#blinkies {
    margin: 10px;
    margin-top: none;
}