head {
  cursor: none;
}

body {
    background-color: #111111;
    color: #ffffff;
    cursor: none;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 10px;
}

h2 {
    border-bottom: 1px solid #222222;
    padding-bottom: 10px;
}

ul {
    list-style-type: none;
    padding-left: 0;
}

li strong {
  display: inline-block;
  margin-bottom: 5px;
}

li span {
    opacity: 0.5;
    display: inline-block;
    margin-bottom: 0px;
}

li span:last-of-type {
    margin-bottom: 20px;
}

a {
    color: #ffffff;
    cursor: none;
    text-decoration: none;
}

a:hover {
    cursor: none;
    text-decoration: none;
}

nav a {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

nav a:hover {
  opacity: 1;
  transition: opacity 0.3s ease;
}

header {
  margin-bottom: 40px;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 {
    margin: 0;
}

header nav {
    margin-top: 0;
}

nav {
    display: flex;
    align-items: center;
}

nav div {
    transform: translateY(-3px);
}

nav a {
    margin-right: 10px;
    font-size: 16px;
}

nav a:last-child {
    margin-right: 0;
}

section {
    margin-bottom: 45px;
}

section:last-child {
    margin-bottom: 0;
}

@font-face {
    font-family: 'Innovator Grotesk';
    src: url('InnovatorGrotesk-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Innovator Grotesk';
    src: url('InnovatorGrotesk-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Innovator Grotesk';
    src: url('InnovatorGrotesk-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Dakota Rough';
    src: url('Dakota Rough.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Dakota Outline';
    src: url('Dakota Outline.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Innovator Grotesk', sans-serif;   
    font-weight: 400;
}

h1 {
    font-family: 'Dakota Outline', sans-serif;
    font-weight: normal;
    font-size: 26px;
}

h2 {
    font-family: 'Dakota Rough', sans-serif;
    font-weight: normal;
    font-size: 20px;
}

.masonry-layout {
    column-count: 2;
    column-gap: 20px;
}

.masonry-item {
    display: inline-block;
    width: 100%;
}

@media (max-width: 768px) {
    .masonry-layout {
        column-count: 1;
    }
}

.twitter-tweet p {
    font-size: 14px !important;
}

.twitter-tweet {
  cursor: none !important;
}

.custom-cursor {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    background-color: rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transform: translate(-20px, -20px);
    transition: opacity 0.1s, backdrop-filter 0.6s, -webkit-backdrop-filter 0.6s, background-color 0.3s, border 0.3s;
}

.custom-cursor.cursor-small {
    width: 15px;
    height: 15px;
    transform: translate(-7.5px, -7.5px);
    background-color: rgba(255, 255, 255, 0.0);
    border: 1px solid rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(0px) brightness(1.6);
    backdrop-filter: blur(0px) brightness(1.6);
}

.chrome .custom-cursor.cursor-small {
    background-color: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px); 
}

.custom-cursor.cursor-hide {
    opacity: 0.0;
    transition: width 0.3s, height 0.3s, transform 0.3s, opacity 0.1s;
}

li {
    position: relative;
    overflow: hidden;
}

:root {
    --cubic-bezier: cubic-bezier(0.65, 0, 0.35, 1);
}

li img {
    position: absolute;
    left: -10px;
    top: 2px;
    opacity: 0;
    transition: left 0.3s var(--cubic-bezier), opacity 0.3s var(--cubic-bezier), transform 0.3s var(--cubic-bezier);
    border-radius: 4px;
    transform: scale(0);
}

li strong a {
    display: inline-block;
    transition: padding-left 0.3s var(--cubic-bezier);
}

.cursor-hover {
    display: inline-block;
}

.cursor-hover:hover img {
    left: 0;
    opacity: 1;
    transform: scale(1);
}

.cursor-hover:hover strong a {
    padding-left: 22px;
    transition: padding-left 0.3s var(--cubic-bezier);
}

.cursor-hover h1 {
	transform: translateY(4px);
}

li .cursor-hover {
    padding-bottom: -12px;
}

li {
    overflow: visible;
}


@media (pointer: coarse) and (hover: none) {
    .custom-cursor {
        display: none;
    }

    a {
        text-decoration: none;
    }

    a:hover {
        text-decoration: none;
    }

    .cursor-hover:hover strong a {
        padding-left: 0px;
    }

    .cursor-hover:hover img {
        opacity: 0;
        display: none;
    }

    li .cursor-hover {
        padding-bottom: -30px;
    }
}

.tweet-placeholder {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    height: 200px;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}