main {
    grid-area:main;
    display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  text-align:center;
    padding:15px;
}

article {
    border-radius:10px 10px 10px 10px;
    border: 3px solid var(--white);
    height:60vh;
    width:100%;
    flex: 40%;
    max-width:40vw;
    margin:10px;
    transition:all .5s;
    text-align:left;
    padding:15px;
    display:flex;
    align-items:center;
    font-size:0.75em;
    background-image: url(/media/images/tomodachilife/patternbg.png);
    background-size:25%;
}

article:hover {
    transform: translate(0, -10px);
    box-shadow: 5px 5px var(--white);
    animation: barberpole 20s linear infinite;
}

.profilecard {
    height:53vh;
    background-image:url(/media/images/tomodachilife/profilecardbg_CHARMER.png);
    background-repeat:no-repeat;
    background-size:cover;
    padding:10px;
    border-radius:20px 20px 20px 20px;
    border: 4px solid var(--white);
    box-shadow: -6px 6px var(--white);
    width:100%;
}

.miipic {
    max-width:20em;
    max-height:30em;
    margin-left:10px;
    filter: drop-shadow(-5px 4px var(--white));
}

.profilename {
    color:var(--white);
    font-family:var(--namefont);
    font-size:2em;
    margin-bottom:50px;
    text-shadow: -2px 3px var(--fontcolor);
}

.relationshipbox{
    background-color:var(--white);
    padding:2px 10px 10px;
    border-radius:10px 10px 10px 10px;
}
.relationships {
    display:flex;
    border-radius:10px 10px 10px 10px;
    align-items:center;
}
.spouse {
    background-color:var(--spouse);
}

.spousetext {
    color:var(--spousetext);
    text-shadow: -2px -2px var(--white);
}

.friend {
    background-color:var(--friend);
}

.friendtext {
    color:var(--friendtext);
    text-shadow: -2px -2px var(--white);
}

.sibling {
    background-color:var(--sibling);
}

.siblingtext {
    color:var(--siblingtext);
    text-shadow: -2px -2px var(--white);
}

.acquaintance {
    background-color:var(--acquaintance);
}

.acquaintancetext {
    color:var(--acquaintancetext);
    text-shadow: -2px -2px var(--white);
}

.relationicon {
    height:4em;
    border-radius: 10px 10px 10px 10px;
    margin:10px;
}
.relationtext p {
    background-color:var(--white);
    padding:4px 40px 4px;
    border-radius:40px 40px 40px 40px;
    margin-top:-20px;
    font-family:var(--personalityfont);
}

.relationtext hr {
    margin-top:-12px;
}

.loves ul {
    list-style-position: inside;
    padding-left:0;
}

.loves li {
    background-color:var(--lovesred);
    padding:5px;
    border-radius:10px 10px 10px 10px;
    color:var(--fontcolor);
    list-style-type: none;
}

.loves {
    color:var(--lovesred);
}

.loves li:first-child {
    color:var(--lovesredtext);
}

.loves li:nth-child(2){
    background-color:var(--white);
}

.personality {
    color:var(--white);
    width:fit-content;
    border-radius:40px 40px 40px 40px;
    padding:4px 10px 4px 0px;
    font-family: var(--personalityfont);
}

.personality span {
    border-radius:40px 40px 40px 40px;
    padding:4px 10px 4px 6px;
}

.personalityambitious {
    background-color:var(--ambitious);
}

.personalityoutgoing{
    background-color:var(--outgoing);
}

.personalityreserved {
    background-color:var(--reserved);
}

.personalityconsiderate{
    background-color:var(--considerate);
}

.personalitysweetie {
    background-color:var(--sweetie);
}

.personalitybuddy {
    background-color:var(--buddy);
}

.personalitycheerleader {
    background-color:var(--cheerleader);
}

.personalitydaydreamer {
    background-color:var(--daydreamer);
}

.personalitycharmer {
    background-color:var(--charmer);
}

.personalitygo-getter {
    background-color:var(--go-getter);
}

.personalitymerrymaker {
    background-color:var(--merrymaker);
}

.personalitydynamo {
    background-color:var(--dynamo);
}

.personalitystrategist {
    background-color:var(--strategist);
}

.personalityperfectionist {
    background-color:var(--perfectionist);
}

.personalityobserver {
    background-color:var(--observer);
}

.personalitythinker {
    background-color: var(--thinker);
}

.personalityachiever {
    background-color:var(--achiever);
}

.personalityvisionary {
    background-color:var(--visionary);
}

.personalityrogue {
    background-color:var(--rogue);
}

.personalitymaverick {
    background-color:var(--maverick);
}

.ambitious {
    background-image:url(/media/images/tomodachilife/articlebg_AMBITIOUS.png);
}

.considerate {
    background-image:url(/media/images/tomodachilife/articlebg_CONSIDERATE.png);
}

.outgoing {
    background-image:url(/media/images/tomodachilife/articlebg_OUTGOING.png);
}

.reserved {
    background-image:url(/media/images/tomodachilife/articlebg_RESERVED.png);
}

.sweetie {
    background-image:url(/media/images/tomodachilife/profilecardbg_SWEETIE.png);
}

.buddy {
    background-image:url(/media/images/tomodachilife/profilecardbg_BUDDY.png);
}

.cheerleader {
    background-image:url(/media/images/tomodachilife/profilecardbg_CHEERLEADER.png);
}

.daydreamer {
    background-image:url(/media/images/tomodachilife/profilecardbg_DAYDREAMER.png);
}

.charmer {
    background-image:url(/media/images/tomodachilife/profilecardbg_CHARMER.png);
}

.go-getter {
    background-image:url(/media/images/tomodachilife/profilecardbg_GO-GETTER.png);
}

.merrymaker {
    background-image:url(/media/images/tomodachilife/profilecardbg_MERRYMAKER.png);
}

.dynamo {
    background-image:url(/media/images/tomodachilife/profilecardbg_DYNAMO.png);
}

.strategist {
    background-image:url(/media/images/tomodachilife/profilecardbg_STRATEGIST.png);
}

.perfectionist {
    background-image:url(/media/images/tomodachilife/profilecardbg_PERFECTIONIST.png);
}

.observer {
    background-image:url(/media/images/tomodachilife/profilecardbg_OBSERVER.png);
}

.thinker {
    background-image:url(/media/images/tomodachilife/profilecardbg_THINKER.png);
}

.achiever {
    background-image:url(/media/images/tomodachilife/profilecardbg_ACHIEVER.png);
}
.visionary {
    background-image:url(/media/images/tomodachilife/profilecardbg_VISIONARY.png);
}

.rogue {
    background-image:url(/media/images/tomodachilife/profilecardbg_ROGUE.png);
}

.maverick {
    background-image:url(/media/images/tomodachilife/profilecardbg_MAVERICK.png);
}

@media only screen and (max-width: 900px) {
    .grid-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        " header "  
        " nav " 
        " main "
        " footer " ;
}

body {
    width:100%;
    background: url(/media/images/tomodachilife/patternbg.png);
    animation:none;
}
main {
    display:block;
}

article {
    width:95%;
    max-width:initial;
    display:inline-block;
    flex:none;
    height:fit-content;
}
article:hover {
    transform:none;
    box-shadow:none;
    animation:none;
}
.profilecard {
    width:100%;
}

.miipic {
    margin-left:initial;
    margin-top:10px;
}

.islandinfo {
    display:none;
}

.navlink {
    font-size:1em;
    display:block;
}

}