@font-face {
    font-family: "Fredoka";
    src: url("../fonts/fredoka.ttf") format("truetype");
}

body {
    color: purple; 
    background-color: mediumpurple;
    background-image: url("../images/lilstar-bg.png");
    font-family: Fredoka;
}

.wrapper {
    display: flex;
    align-content: center;
    padding:2%
}

/* visuals to see what im doing */

.homegrid {
    justify-self: center;
    height: 90vh
}

.homegrid > * {
    border-radius: 5px;
    padding: 1em;
   /* background: rgba(186, 170, 239, 0.7); */
        background: rgb(255, 240, 226, 90%);
    /* trialling */
    /* border: solid 5px rgb(126, 76, 230); */
    border: dashed 5px rgb(225, 191, 73)
}

/* MAINBOX */


.mainbox {
    overflow-y: auto;
    min-height: 50ch;
}


/* to restrict image size until i remember to use smaller files */
img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 5px;
    align-self: center;
    justify-self: center
}

.headshot {
    display: flex;
    margin: auto;
    
    
}

.icon {
    max-width: 2em;
    margin: 0.5em;
}

/* NAV BOX */
a:link, a:visited {
    color: purple
}
a:hover, a:active {
    color: rgb(85, 26, 139)
}


.navbuttons {
    display: flex;
    gap: 0.3em;
    padding: 0.2em;
    flex-wrap: wrap;
    text-align: center;
    font-size: 1.2em;
    align-items: center;
}

.navbuttons > * {
    flex: 1 1 5em;
    align-self: stretch;
    align-content: center;
    padding: 0.5ch;
    border-radius: 10px;
    margin:0.1em
}

.navbuttons > * > * {
    text-decoration: none 
}
.button {
    font-family:Fredoka;
    font-size: 1.2em;
    font-weight: 500;
   /* background: rgb(255, 240, 226); */
    background: rgba(186, 170, 239, 0.7);
    border: solid 2px rgb(126, 76, 230); }

.socmed {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    justify-items: center;
}

.socbut {
    border-radius:20px;
    height: 90%;
    align-content: center
}




/*------------------------------------------------------------*/

/* GRID - MOBILE STACK */
.homegrid {
    display: grid;
    gap: 0.5em;
}



/* GRID - BIGGER */

@media (min-width: 1000px) {
    .homegrid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1em;
        margin: auto 3em;
    }
    .grid-span-2xtall {
        grid-column: span 2;
        grid-row: span 4;
    }
    
} 

/* GRID - FULL SCREEN SIZE */

@media (min-width: 1400px) {
    .homegrid {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        gap: 1em;
        margin: auto 8em;
    }

    .grid-span-2xtall {
        grid-column: span 3;
        grid-row: span 2;
    }
}