@import url('common.css');



body {

    font-family: Arial, sans-serif;

    margin: 0;

    padding: 0;

    background-color: #000000;

    color: white;

    display: flex;

    flex-direction: column;

    min-height: 100vh;

}

main {

    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 1em;

    text-align: center;

}

.about-content {

    display: flex;

    align-items: center;

    max-width: 850px;

    margin: 0 auto;

}

.profile-image-container {

    flex: 0 0 auto;

    margin-right: 40px;

    margin-left: -100px;

}

.profile-image {

    max-width: 100%;

    height: auto;

    max-height: 350px;

    border-radius: 50%;

}

.about-text {

    flex: 1;

    text-align: left;

}

.about-text h2 {

    margin-bottom: 30px;

}

.about-text p {

    font-size: 18px;

    line-height: 1.6;

}

.about-section h1 {

    margin-top: 0.5em;

}

.about-content {

    display: flex;

    align-items: center;

}

.social-media-section h2 {

    margin-bottom: 20px;

}

.social-icons {

    margin-top: 20px;

}

.fa {

    padding: 20px;

    font-size: 30px;

    width: 50px;

    text-align: center;

    text-decoration: none;

}

.fa-twitter {

    background: #55ACEE;

    color: white;

}

.fa-twitch {

    color: white;

}

.fa-youtube {

    color: white;

}

.fa-linkedin {

    color: white;

}

.fa-instagram {

    color: white;

}

.fa-github {

    color: white;

}

h1 {

    font-size: 2.5em;

}

main h1 {

    margin-bottom: 1em;

}

.embeds-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.embed-item {
    flex: 1;
    min-width: 300px;
    max-width: 48%;
}

.responsive-iframe {
    width: 100%;
    border: none;
    max-width: 100%;
}

.pdf-iframe {
    height: 500px;
}

.google-form-iframe {
    height: 500px;
}


button {

    padding: 10px 20px;

    font-size: 1em;

    background-color: #6441a5;

    color: white;

    border: none;

    border-radius: 5px;

    cursor: pointer;

}

button:hover {

    background-color: #563d7c;

}

footer {

    text-align: center;

    padding: 1em;

}


.contact-section {

    text-align: center;

}



.contact-section h2 {

    font-size: 2em;

}


.about-section h1 {

    font-size: 2.5em;

    color: white; 

    margin-top: 0.5em; 

}body {

    font-family: Arial, sans-serif;

    margin: 0;

    padding: 0;

    background-color: #000000;

    color: white;

    display: flex;

    flex-direction: column;

    min-height: 100vh;

}

main {

    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 1em;

    text-align: center;

}

.about-content {

    display: flex;

    align-items: center;

    max-width: 850px;

    margin: 0 auto;

    flex-wrap: wrap;

}

.profile-image-container {

    flex: 0 0 auto;

    margin-right: 40px;

    margin-left: -100px;

    text-align: center;

}

.profile-image {

    max-width: 100%;

    height: auto;

    max-height: 350px;

    border-radius: 50%;

}

.about-text {

    flex: 1;

    text-align: left;

}

.about-text h2 {

    margin-bottom: 30px;

}

.about-text p {

    font-size: 18px;

    line-height: 1.6;

}

.about-section h1 {

    margin-top: 0.5em;

}

.about-content {

    display: flex;

    align-items: center;

}

.social-media-section h2 {

    margin-bottom: 40px; 

}


.social-icons {

    margin-top: 20px; 

}


.fa {

    padding: 20px;

    font-size: 30px;

    width: 50px;

    text-align: center;

    text-decoration: none;

}

.fa-twitter {

    color: white;

}

.fa-twitch {

    color: white;

}

.fa-youtube {

    color: white;

}

.fa-linkedin {

    color: white;

}

.fa-instagram {

    color: white;

}

h1 {

    font-size: 2.5em;

}

main h1 {

    margin-bottom: 1em;

}

button {

    padding: 10px 20px;

    font-size: 1em;

    background-color: #6441a5;

    color: white;

    border: none;

    border-radius: 5px;

    cursor: pointer;

}

button:hover {

    background-color: #563d7c;

}

footer {

    text-align: center;

    padding: 1em;

}

.contact-section {

    text-align: center;

}

.contact-section h2 {

    font-size: 2em; 

}

.about-section h1 {

    font-size: 2.5em; 

    color: white; 

    margin-top: 0.5em;/

}

@media (max-width: 600px) {
    .about-content {
        flex-direction: column; 
        align-items: center;
        text-align: center;
    }

    .profile-image-container {
        margin: 0; 
    }

    .profile-image {
        max-width: 200px; 
        max-height: 200px; 
    }

    .about-text {
        text-align: center; 
        margin-top: 20px; 
        font-size: 16px; 
    }

    .about-text h2 {
        font-size: 20px;
    }

    .about-text p {
        font-size: 16px; 
        line-height: 1.4;
    }
    .social-icons i {
        font-size: 2rem !important;
        margin: 0 5px !important;
    }

    .embeds-container {
        flex-direction: column;
        gap: 10px;
    }

    .responsive-iframe {
        height: 60vh; 
    }

    .pdf-iframe {
        height: 50vh;
    }

    .google-form-iframe {
        height: 107vh; 
    }
}