* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

header {
    width: 100%;

    position: fixed;
    top: 20px;

}

body {
    background-image: linear-gradient(180deg, #23343F 16%, #101318 26%, #05080B 66%, #21313B 91%);
}


#fundo {
    width: 100%;
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;


    align-items: center;

   
}

#topo {
    width: 100%;
    max-width: 1192px;
    margin-left: auto;
    margin-right: auto;

    display: flex;
    justify-content: space-between;
    align-items: center;

    background-color: #23343f98;
    z-index: 10000;

    border-radius: 28px;
}


nav {
    width: 100%;
    max-width: 418px;


    display: flex;
    justify-content: space-between;
    align-items: center;
}

#contentor {
    width: 100%;
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    height: 954px;


    background-image: url(imagens/fundo_ithaca.jpg);

}

#logomain {
    margin-left: auto;
    margin-right: auto;

    width: 100%;
    max-width: 586px;
    height: 225px;

    padding-top: 222px;

}


#intro {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    max-width: 586px;

    height: 100%;
    max-height: 573px;

    margin-left: auto;
    margin-right: auto;
    margin-top: 222px;

    border-top-left-radius: 107px;
    border-top-right-radius: 107px;

    background: #0E222F;
    background: -webkit-linear-gradient(180deg, rgba(14, 34, 47, 1) 0%, rgba(16, 37, 52, 1) 50%, rgba(36, 55, 66, 1) 100%);
    background: -moz-linear-gradient(180deg, rgba(14, 34, 47, 1) 0%, rgba(16, 37, 52, 1) 50%, rgba(36, 55, 66, 1) 100%);
    background: linear-gradient(180deg, rgba(14, 34, 47, 1) 0%, rgba(16, 37, 52, 1) 50%, rgba(36, 55, 66, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0E222F", endColorstr="#243742", GradientType=0);


}

#introtext {
    width: 100%;
    max-width: 384px;
    font-size: medium;
    color: #f4f4f4;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 18px;
    font-weight: 500;


}

a {
    text-decoration: none;
    color: #f4f4f4;
}

h3 {
    text-align: left;
    color: #f4f4f4;

    font-weight: 900;
    margin-left: 17px;
    font-size: 50px;
    margin-top: 131px;
    font-family: Lora;


}

#cast {
    display: flex;
    justify-content: space-between;
    margin-top: 52px;

    width: 100%;
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 341px;


}

.jorge {
    width: 384px;
    text-align: center;
    color: #F9EBA0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 25px;
}

#ody {

    width: 384px;
    text-align: center;
    color: #f4f4f4;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 25px;
    font-weight: bold;

}

#allmembers {
    width: 788px;

    display: flex;
    flex-wrap: wrap;
    gap: 20px;


}

#castmembers {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
}

.amarelo {
    color: #F9EBA0;
    font-size: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
}

.branco {
    color: #f4f4f4;
    font-size: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
    font-weight: bold;
}

#troy {

    background-image: url(imagens/troy_fundo.jpg);

    width: 100%;
    max-width: 1220px;

    background-repeat: no-repeat;

}

#troysaga {

    padding-bottom: 167px;
    padding-top: 82px;
    padding-left: 15px;
}


#odysseus {

    margin-left: 224px;
    margin-bottom: 27px;

}

#cyclop {

    background-image: url(imagens/cyclops_fundo.jpg);
    background-repeat: no-repeat;
    height: 653px;
}

#cyclopsaga {
    margin-left: 122px;
    margin-top: 89px;
}

#ovelhas {
    margin-left: 115px;
    margin-bottom: 15px;
}

#ocean {
    background-image: url(imagens/ocean_fundo.jpg);
    height: 635px;
}

#oceansaga {
    margin-left: 15px;
    margin-top: 76px;
}

#saco {
    margin-left: 321px;

}

#troia {

    width: 100%;
    max-width: 259px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 16px;
   
    font-weight: 800;
    text-decoration: none;

    margin-left: 15px;
    padding-top: 26px;



}

#ciclope {
    width: 100%;
    max-width: 259px;

    display: flex;
    justify-content: space-evenly;
    align-items: center;

    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 16px;
    
    font-weight: 800;
    text-decoration: none;
    text-align: center;

    margin-left: 827px;
    padding-top: 26px;

}

#oceano {

    width: 100%;
    max-width: 259px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 16px;
    
    font-weight: 800;
    text-decoration: none;

    margin-left: 15px;
    padding-top: 26px;

}

#vermais {

    width: 100%;
    max-width: 259px;

    display: flex;
    justify-content: space-evenly;
    align-items: center;

    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 16px;
   
    font-weight: 800;
    text-decoration: none;
    text-align: center;

    margin-left: 1027px;
    padding-top: 26px;

}


#loja {
    text-align: center;
    color: #f4f4f4;

    font-weight: 900;
    font-size: 50px;
    margin-top: 306px;
    font-family: Lora;
}

#lojamain {

    padding-left: 115px;
    padding-right: 115px;
    padding-top: 63px;
    padding-bottom: 63px;
    display: flex;
    justify-content: space-between;
}

#vinil {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-right: 121px;


}

#viniltroia {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 160px;

}

#vinildois {

    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

#caixa {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-top: 152px;
}

#cd {

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-left: 121px;

}

#cdseries {

    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

#vinilcyclops {

    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}


#epicfooter {

    margin-left: 519px;
    margin-bottom: 55px;
    margin-top: 242px;
}

#social {

    width: 100%;
    max-width: 259px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-left: 481px;
    margin-bottom: 31px;

}

#linha {

    width: 100%;
    max-width: 182px;

    margin-left: 519px;
    margin-bottom: 35px;

    align-items: center;

}

#copy {
    text-align: center;

    margin-bottom: 35px;
}

#design {
    text-align: center;

    margin-bottom: 35px;
}

.ctaum {

    width: 182px;
    height: 46px;


    color: #EE3823;
    background-color: #F9EBA0;

    border-radius: 17px;
    font-size: 18px;

    padding-left: 61px;
    padding-right: 61px;
    padding-bottom: 8px;
    padding-top: 9px;

}

.ctadois {
    width: 182px;
    height: 46px;


    color: #f4f4f4;
    background-color: #770101;

    border-radius: 17px;
    font-size: 18px;

    padding-left: 61px;
    padding-right: 61px;
    padding-bottom: 8px;
    padding-top: 9px;
}

.ctatres {

    width: 182px;
    height: 46px;


    color: #f4f4f4;
    background-color: #332C24;

    border-radius: 17px;
    font-size: 18px;

    padding-left: 61px;
    padding-right: 61px;
    padding-bottom: 8px;
    padding-top: 9px;

}

p {
    color: #f4f4f4;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

a {
    color: #f4f4f4;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-decoration: none;
    font-size: 20px;
}

.amareloloja {

    color: #F9EBA0;
    font-size: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
    margin-top: 17px;


}

.brancoloja {

    color: #f4f4f4;
    font-size: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
    font-weight: bold;
    margin-top: 40px;
    margin-bottom: 38px;
}

#comprar {
    width: 182px;
    height: 46px;


    color: #f4f4f4;
    background-color: #770101;

    border-radius: 17px;
    font-size: 18px;

    padding-left: 61px;
    padding-right: 61px;
    padding-bottom: 8px;
    padding-top: 9px;

    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: bold;
    text-align: center;

    margin-bottom: 5px;

}