@font-face {
    font-family: 'LemonMilk';
    src: url('fonts/LEMONMILK-Bold.otf');
}
p1 {
    font-family: 'LemonMilk', sans-serif;
    color: #ffffff;
    text-shadow: 0 0 5px #d1d1d1, 0 0 10px #88888880, 0 0 15px #ffffff2a;
}

#larger { font-size: 100px; }

body {
    background: url('shader.gif') no-repeat;
    background-size: cover;
    backdrop-filter: blur(5px);    
    height: 100vh;
    padding: 0;
    margin: 0;
    /* Set initial background position */
    background-position: 50% 50%;
    /* Add transition for smooth movement */
    transition: background-position 0.5s ease;
}

.ytbuttons, .dcbuttons, .twcbuttons, .twtbuttons, .igbuttons, .tkbuttons{
    margin-left: 25%;
    max-width: 10%;
    margin-top: 2%;
    filter: grayscale(100%);
    transition: all 0.2s ease-out;
    transform-origin: center;
}

@media (orientation: portrait) {
    .ytbuttons, .dcbuttons, .twcbuttons, .twtbuttons, .igbuttons, .tkbuttons {
        max-width: 25%; /* Adjust the size as needed */
        margin-top: 15%; /* Adjust the margin as needed */
        margin-left: 17%;
    }
}

.ytbuttons:hover, .ytbuttons:focus{
    filter: grayscale(0%);
    transform: scale(1.1);
    transition: all 0.2s ease-out;
}

.dcbuttons:hover, .dcbuttons:focus{
    filter: grayscale(0%);
    transform: scale(1.1);
    transition: all 0.2s ease-out;
}

.twcbuttons:hover, .twcbuttons:focus{
    filter: grayscale(0%);
    transform: scale(1.1);
    transition: all 0.2s ease-out;
}

.twtbuttons:hover, .twtbuttons:focus{
    filter: grayscale(0%);
    transform: scale(1.1);
    transition: all 0.2s ease-out;
}

.igbuttons:hover, .igbuttons:focus{
    filter: grayscale(0%);
    transform: scale(1.1);
    transition: all 0.2s ease-out;
}

.tkbuttons:hover, .tkbuttons:focus{
    filter: grayscale(0%);
    transform: scale(1.1);
    transition: all 0.2s ease-out;
}

.youtube-tooltip {
    max-width: 10%;
    height: auto;
    position: absolute;
    opacity: 0;
    transition: all 0.2s ease-out;
}

.discord-tooltip {
    max-width: 10%;
    height: auto;
    position: absolute;
    opacity: 0;
    transition: all 0.2s ease-out;
}

.twitch-tooltip {
    max-width: 10%;
    height: auto;
    position: absolute;
    opacity: 0;
    transition: all 0.2s ease-out;
}

.twitter-tooltip {
    max-width: 10%;
    height: auto;
    position: absolute;
    opacity: 0;
    transition: all 0.2s ease-out;
}

.ig-tooltip {
    max-width: 10%;
    height: auto;
    position: absolute;
    opacity: 0;
    transition: all 0.2s ease-out;
}

.tiktok-tooltip {
    max-width: 10%;
    height: auto;
    position: absolute;
    opacity: 0;
    transition: all 0.2s ease-out;
}


@media (orientation: portrait) {
    .youtube-tooltip, .discord-tooltip, .twitch-tooltip, .twitter-tooltip, .ig-tooltip, .tiktok-tooltip {
        max-width: 25%; /* Adjust the size as needed */
    }
}