@media only screen and (max-width: 1280px) {
    :root {
        --width: 80vw;
    }

    body {
        background: linear-gradient(180deg,black, darkslategray 20%, slategray 100%);
    }
    
    #main {
        flex-direction: column !important;
        margin: 0 0;
        width: 100vw;
    }

        header {
        text-align: center;
    }

    main h1:first-of-type {
        margin-top: revert;
    }
    
    header .emoji {
        display: none;
    }
    
    header h1 {
        margin-bottom: 1rem;
    }
    
    header ul {
        display: flex;
        justify-content: center;
        margin: 0 2em 1em 2em;
    }
    
    nav ul {
        justify-content: space-evenly;
        padding-bottom: 2rem;
    }
    
    nav ul li::after {
        content: "";
    }
    
    nav ul li a {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    
    .link-title {
        width: unset;
        justify-content: center;
    }
    
    .link-title span:first-of-type {
        display: none;
    }
    
    .link-title span:last-of-type {
        font-weight: normal;
    }
    
    nav ul li a .link-title span:last-of-type {
        font-weight: bold;
    }
    
    #menu {
        margin-top: 20px;
        padding-bottom: 0;
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    #menu a {
        flex-direction: row;
        column-gap: 1em;
    }
    
    main {
        border-radius: unset;
        margin: 0 auto;
        padding: 0 10%;
        min-width: -webkit-fill-available;
        max-width: -webkit-fill-available;
    }
}