@font-face {
    font-family: FuturaCondensedPT;
    src: url("./../futura-condensed-pt.otf");
}
@font-face {
    font-family: FuturaPTBoldOblique;
    src: url(./../futura-pt-bold-oblique.otf);
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: FuturaCondensedPTBold;
    src: url(./../futura-condensed-pt-bold.otf);
    font-weight: bold;
}

::-moz-selection {
  background: rgba(255,170,255,0.5);
}

html {
    image-rendering: pixelated;
    background-color: black;
    background-image: url("./../images/page-background.png");
    scrollbar-color: rgb(255,170,255) black;
    scrollbar-width: thin;
    
}
body {
    display: grid;
    grid-template-columns: 1fr 800px 1fr;
    color:white;
    margin:0;
    min-height: 100dvh;
    font-family: FuturaCondensedPT, Arial, Helvetica, sans-serif;
    overflow-x: hidden;
}
.main {
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}
.left-space {
    background: linear-gradient(to right, rgba(255, 170, 255, 0.3), rgba(0, 0, 0, 0));
}
.right-space {
    background: linear-gradient(to left, rgba(255, 170, 255, 0.3), rgba(0, 0, 0, 0));
}

h1, h2, h3 {
    font-family: FuturaPTBoldOblique, Arial, Helvetica, sans-serif;
    margin: 0 0 5px 0;
    font-style: italic;
    display: flex;
    gap:5px
}
h1::after {
    content:"";
    margin: 5px 0;
    flex: 1;
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(255,170,255,0.25) 50px);
}

p, ul {
    font-size: x-large;
    margin: 0 0 10px 0;
}
b {
    font-family: FuturaCondensedPTBold, Arial, Helvetica, sans-serif;
}
ul {
    padding-left: 25px;
}
li ul {
    margin: 0;
}


a {
    color: unset
}
a:hover {
    color:rgb(255,170,255)
}

.nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:10px;
    margin:10px 10px 0 10px;
    height:120px
}
.nav a {
    background-color: rgb(255,170,255);
}

.nav-home {
    background-image: url("./../images/nav/home.png");
}
.nav-home:hover {
    background-image: url("./../images/nav/home-hover.png");
}
.nav-works {
    background-image: url("./../images/nav/works.png");
}
.nav-works:hover {
    background-image: url("./../images/nav/works-hover.png");
}
.nav-links {
    background-image: url(./../images/nav/socials.png);
}
.nav-links:hover {
    background-image: url(./../images/nav/socials-hover.png);
}

.nav-guestbook {
    background-image: url(./../images/nav/guestbook.png);
}
.nav-guestbook:hover {
    background-image: url(./../images/nav/guestbook-hover.png);
}
.nav-blog {
    background-image: url(./../images/nav/blog.png);
}
.nav-blog:hover {
    background-image: url(./../images/nav/blog-hover.png);
}


.nav-more {
    background-image: url(./../images/nav/more.png);
}
.nav-more:hover {
    background-image: url(./../images/nav/more-hover.png);
}

.main-content {
    flex:1;
    margin:10px
}

.footer {
    background-color: black;
    padding: 10px;
}

.big-menu-item {
    background-color: rgba(0, 0, 0, 0.4);
    padding: 10px;
    display: flex;
    gap:10px;
    align-items: center;
    margin-bottom: 10px;
    text-decoration: none;
}
.big-menu-item h1::after {
    background: none;
}
.big-menu-item img {
    display: block;
    width:64px;
    height:64px
}

.short_menu_item {
    display: block;
    font-family: FuturaPTBoldOblique, Arial, Helvetica, sans-serif;
    font-size: x-large;
    background-color: rgba(0, 0, 0, 0.4);
    margin-bottom: 10px;
    padding: 5px;
    text-align: center;
    text-decoration: none;
}