@font-face {
    font-family: homevideo;
    src: url(fonts/HomeVideo-Regular.woff);
    font-style: normal;
}

@font-face {
    font-family: minecraft;
    src: url(fonts/Minecraftia-Regular.woff);
}

body {
    background-image: url(imgs/webpage\ bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    /* Add padding instead of margin */
    padding-left: 20%; /* Add left padding */
    padding-right: 20%; /* Add right padding */
}

.main-window {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    flex-direction: column; 
}

.enclosed_together {
    width: 960px; 
    height: 720px; 
    background-image: url(imgs/window_profile.png); 
    max-width: 960vh; 
    max-height: 720vh; 
    position: relative;
}

.title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 44.5%;
    margin-top: 10%;
  }

.title h1 {
    font-family: homevideo;
    font-size: 190%;
}

.title img {
    width: 5%;
    height: 5%;
    margin-inline: 8px;
}

.wattpad, .aff, .x, .kofi {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.wattpad img {
    margin-top: 3%;
    margin-left: 50%;
    height: 90px;
    width: auto;
    position: absolute;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.aff img {
    margin-top: 3%;
    margin-left: 67.5%;
    height: 90px;
    width: auto;
    position: absolute;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.x img {
    margin-top: 3%;
    margin-left: 85%;
    height: 90px;
    width: auto;
    position: absolute;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.kofi img {
    margin-top: 16%;
    margin-left: 50%;
    height: 90px;
    width: auto;
    position: absolute;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.reminder h3 {
    font-family: minecraft;
    font-size: 120%;
    margin-top: 19.1%;
    margin-left: 66%;
    color: blue;
    position: absolute;
}

.song h3 {
    font-family: minecraft;
    font-size: 120%;
    margin-top: 33%;
    margin-left: 63%;
    position: absolute;
}

.info h3 {
    font-family: minecraft;
    font-size: 120%;
    margin-top: 33%;
    margin-left: 5%;
    text-align: center;
    position: absolute;
    line-height: 2;
}

.song iframe {
    margin-top: 37%;
    margin-left: 48.4%;
    height: 180px;
    width: 450px;
    position: absolute;
}

@media (max-width: 768px) { /* Adjust the breakpoint as needed */
    body {
        /* Adjust padding for smaller screens */
        padding-left: 5%; 
        padding-right: 5%; 
    }

    .info h3 { 
        line-height: 2.5; 
        font-size: 100%;   
    }
}