* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* Formatação da responsividade */
@media (max-width: 600px) {
    .photograph-guilherme, .photograph-daniel {
        width: 50% !important;
        display: flexbox !important;
        margin-left: 30px !important;
    }

    #paragraph-one {
        display: flex !important;
        padding-top: 500px !important;
        padding-left: 10px !important;
        width: auto !important;
    }

    #paragraph-two {
        display: flex !important;
        padding-top: 730px !important;
        padding-left: 10px !important;
        width: auto !important;
    }

    .Guilherme-s-social-networks-instagram, .Guilherme-s-social-networks-whatsapp, .Daniel-s-social-media-instagram, .Daniel-s-social-media-whatsapp {
        position: absolute !important;
        display: flexbox !important;
        max-width: 6% !important;
        margin-left: -30px !important;
    }

    .Guilherme-s-social-networks-github, .Daniel-s-social-media-github {
        position: absolute !important;
        display: flexbox !important;
        max-width: 6% !important;
        margin-left: -50px !important;
    }

    .Guilherme-s-social-networks-linkedin, .Daniel-s-social-media-linkedin {
        position: absolute !important;
        display: flexbox !important;
        max-width: 8% !important;
        margin-left: -45px !important;
    }

    iframe {
        width: 90% !important;
        display: flexbox !important;
    }

    .description {
        display: flex !important;
        margin-top: 600px !important;
        margin-bottom: -400px !important;
        padding-left: 10px !important;
        width: auto !important;
        position: flexbox !important;
    }

    .header {
        display: flex !important;
        flex-direction: column;
        margin-left: -80px;
    }

    #layer {
        display: flex !important;
        margin-left: 90px !important;
    }
}

/* Barra de rolagem */
body::-webkit-scrollbar {
    width: 12px;
    /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
    background: #4903F5;
    /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
    background-color: #4F4F4F;
    /* color of the scroll thumb */
    border-radius: 20px;
    /* roundness of the scroll thumb */
}

/* Conteúdo pagina */
html {
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
    color: #4F4F4F;
}

body {
    background-image: linear-gradient(to right, #FFEE1C, #4801F6);
}

/* Formatação do cabeçalho */
nav {
    margin-left: 40px;
}

.links {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    color: #000000;
    cursor: pointer;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    transition: background-color 1s;
    display: inline-block;
    margin-left: 100px;
    margin-top: 15px;
}

.links:hover {
    background-color: #606060;
    color: #FFFFFF;
    border-radius: 5px;
}

#layer {
    width: 45px;
    margin-top: 10px;
}

/* Formatação do section */
.photograph-guilherme {
    width: 200px;
    display: flex;
    flex-direction: column;
    position: absolute;
    margin-left: 100px;
    margin-top: 45px;
    border-radius: 10px;
    filter: drop-shadow(2px 4px 8px #000000);
}

.photograph-daniel {
    width: 200px;
    display: flex;
    flex-direction: column;
    position: absolute;
    margin-left: 100px;
    margin-top: 300px;
    padding-bottom: 15px;
    border-radius: 10px;
    filter: drop-shadow(2px 4px 8px #000000);
}

#paragraph-one {
    display: flex;
    flex-direction: row;
    text-align: center;
    color: #000000;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    padding-top: 200px;
    padding-left: 320px;
}

#paragraph-two {
    display: block;
    text-align: center;
    color: #000000;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    padding-top: 470px;
    padding-left: 330px;
}

/* Formatação das redes sociais do Guilherme */
.Guilherme {
    display: block;
    text-align: center;
    margin-top: 100px;
    color: #000000;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
}

.Guilherme-s-social-networks-linkedin {
    position: absolute;
    display: flexbox;
    max-width: 2.7%;
    margin-left: -55px;
}

.Guilherme-s-social-networks-instagram {
    position: absolute;
    display: flexbox;
    max-width: 2%;
    margin-left: -35px;
}

.Guilherme-s-social-networks-github {
    position: absolute;
    display: flexbox;
    max-width: 2%;
    margin-left: -55px;
}

.Guilherme-s-social-networks-whatsapp {
    position: absolute;
    display: flexbox;
    max-width: 2%;
    margin-left: -35px;
}

/* Formatação redes sociais do Daniel */
.Daniel {
    display: block;
    text-align: center;
    margin-top: 40px;
    color: #000000;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
}

.Daniel-s-social-media-linkedin {
    position: absolute;
    display: flexbox;
    max-width: 2.7%;
    margin-left: -55px;
}

.Daniel-s-social-media-instagram {
    position: absolute;
    display: flexbox;
    max-width: 2%;
    margin-left: -35px;
}

.Daniel-s-social-media-github {
    position: absolute;
    display: flexbox;
    max-width: 2%;
    margin-left: -55px;
}

.Daniel-s-social-media-whatsapp {
    position: absolute;
    display: flexbox;
    max-width: 2%;
    margin-left: -35px;
}

/* Formatação dos Projetos*/
.logo {
    width: 35px;
    display: inline-block;
    margin: 5px 0 5px 25px;
}

#header {
    display: block;
    margin-top: 20px;
    margin-left: 20px;
}

.Iframe-Guilherme, .Iframe-Daniel {
    display: block;
    margin-top: 40px;
    margin-left: 20px;
    width: 35%;
    height: 950px;
    border: none;
    border-radius: 10px;
    filter: drop-shadow(2px 4px 8px #000000);
}

.Iframe_Larger {
    display: block;
    margin-top: 40px;
    margin-left: 20px;
    width: 98%;
    height: 500px;
    border: none;
    border-radius: 10px;
    filter: drop-shadow(2px 4px 8px #000000);
}
.Iframe_Daniel {
    display: block;
    margin-top: 40px;
    margin-left: 20px;
    width: 98%;
    height: 350px;
    border: none;
    border-radius: 10px;
    filter: drop-shadow(2px 4px 8px #000000);
}

.description {
    position: relative;
    text-align: center;
    color: #000000;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    padding-left: 330px;
    top: -550px;
}

.description2 {
    position: relative;
    text-align: center;
    color: #000000;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    margin-top: 15px;
}