* {

    box-sizing: border-box;
    font-family: sans-serif;
    font-size: medium;

}

.body {

    background-color: #62a0f0;
    font-family: sans-serif;

}

.header1 {

    position: relative;
    text-align: center;
    margin-bottom: 5px;

}

.title {

    position: absolute;
    font-size: 3em;
    margin-left: 20px;
    margin-right: 20px;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-decoration: underline overline #e5a2f2;

}

.profile {

    display: grid;
    border: 2px solid black;
    grid-template-areas:
        'pfp jerid jerid jerid'
        'pfp bio bio bio'
        'facebook instagram twitter youtube';
    grid-template-columns: 161px 200px 1fr 1fr;
    grid-template-rows: 60px 101px 1fr;
    background-color: #e5a2f2;
    padding: 10px;
    border-radius: 8px;

}

.profile div {

    margin: 5px
}

.instagram {

    border-radius: 8px;
    width: 40px;
    height: 40px;
}

.facebook {

    border-radius: 8px;
    width: 40px;
    height: 40px;
}

.twitter {

    border-radius: 8px;
    width: 40px;
    height: 40px;
}

.youtube {

    border-radius: 8px;
    width: 40px;
    height: 40px;
}

.pfp {

    border-radius: 8px;
    width: 150px;
    height: 150px;
}

.pfp1 {

    grid-area: pfp;
    grid-row: 1 / span 2;
}

.jerid1 {

    grid-area: jerid;
    grid-column: 2 / span 1;

}

.bio1 {

    grid-area: bio;
    grid-column: 2 / span 3;
}

.facebook1 {

    grid-area: facebook;
}

.instagram1 {

    grid-area: instagram;
}

.twitter1 {

    grid-area: twitter;
}

.youtube1 {

    grid-area: youtube;
}

.more {

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 5em;
    margin-top: 10em;
    margin-left: 10em;
    margin-bottom: 10em;
}

.pets {

    border: 2px solid black;
    background-color: #e5a2f2;
    display: flex;
    flex-direction: column;
    width: 300px;
    height: 300px;
    padding: 5px;
    border-radius: 8px;
}

.pokemon {

    border: 2px solid black;
    background-color: #e5a2f2;
    display: flex;
    flex-direction: column;
    width: 300px;
    height: 300px;
    padding: 5px;
    border-radius: 8px;
}

.portfolio {

    border: 2px solid black;
    background-color: #e5a2f2;
    display: flex;
    flex-direction: column;
    width: 300px;
    height: 300px;
    padding: 5px;
    border-radius: 8px;
}

.dump {

    border: 2px solid black;
    background-color: #e5a2f2;
    display: flex;
    flex-direction: column;
    width: 300px;
    height: 300px;
    padding: 5px;
    border-radius: 8px;
}

.petcard {

    border: 2px solid black;
    background-color: #e5a2f2;
    display: flex;
    flex-direction: column;
    width: 320px;
    height: auto;
    padding: 10px;
    margin: 5em;
    border-radius: 8px;
}

.petprofiles {

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.moretitle {

    text-align: center;
    background-color: #e5a2f2;
    border: 2px solid black;
    border-radius: 8px;
}

.top-button {

    text-align: right;
}

.petimage {

    border-radius: 8px;
}

.banner-image {

    border-radius: 8px;
}

.pokemoncard {

    border: 2px solid black;
    background-color: #e5a2f2;
    display: flex;
    flex-direction: column;
    width: 320px;
    height: auto;
    padding: 10px;
    margin: 5em;
    border-radius: 8px;
}

.pokemonprofiles {

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.portfoliocard {

    border: 2px solid black;
    background-color: #e5a2f2;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: auto;
    height: auto;
    padding: 10px;
    margin: 5em;
    border-radius: 8px;
}

.portfolioimage {

    width: 400px;
    height: auto;
}

.navelement {

    list-style-type: none;
    margin-bottom: 2em;
    padding: 0;
    overflow: hidden;
    background-color: #e5a2f2;
    border-radius: 8px;

}

.navelement .navli {

    float: left;

}

.navelement .navli .navlink {

    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;

}

.navelement .navli .navlink:hover {

    background-color: #d359eb;

}

.navelement .navli .navlink:active {

    background-color: #62a0f0;
}