@import url('https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Handlee&family=Nanum+Myeongjo&family=Playpen+Sans:wght@300&family=Silkscreen&family=Tektur&display=swap');


/* Colors
for rare occational text: #ffaff0 //light purple
*/

* {
    box-sizing: border-box;
    font-family: 'tektur','san-serif';
}

header{
    background-color: floralwhite;
    display:grid;
    grid-column:2/4 ;
}

header img{
    border-radius:100px;  /* this changes the shape of the image */
    padding: 15px; /*  gives spacing but shortens image */
    width:100px; /*changes width of image*/
}

.cayleigh img{
    float:left;
   
}

main {
    background-color: floralwhite;
    max-width: 800px; /*sets maximum size not sure what of though*/
    margin: 75px auto; /* controls how big the space between main, header and footter */

} 

nav{

    background-color: #8B008B;
    color: floralwhite;
    grid-column:span; /*check if i need this here. I cant notice a difference when i comment the code out.*/
    text-align: center;
    
}

nav a{
    color: floralwhite;
    text-align: center;
}

nav a:hover{
    color:#f028f0;
}

nav li{
    list-style-type: none; /*this makes the dots besides the link disapear */
    padding:8px 5px 20px 5px;
}

body {
    font-family: 'tektur','san-serif';
    color:black;
    background-color:floralwhite;
}


.card {
    border-style: solid; /*shows that we want a border with this style */
    border-width: 3.8px; /* width of the border*/
    border-radius: .4rem; /*seems to control the curve of the border*/
    padding: 15px;
    margin: 1rem ;

}

.card a:hover{
    color: #f028f0;
}

footer{
    background-color: #8B008B;
    padding: 45px;
    color: floralwhite;
    text-align: center;
    
}

/* w3 schools */

 
/* professors code */
:root{
    --shadow: #8B008B;
    --header-background:  #8B008B;
    --body-background:  floralwhite ;
}

body{
    margin: 0 auto;
    font-family: "Roboto", sans-serif;
    background-color: var(--body-background)
}

header section{
    background-color: var(--header-background);
    color: #8B008B;
    box-shadow: 3px 3px var(--shadow);
    text-align: center;
    padding: 1rem;
}

main section{
    border: 1px #8B008B;
    margin: .5rem;
    box-shadow: 3px 3px var(--shadow);
    text-align: center;

}

main img{
   border: 1px solid #ddd;
   border-radius: 4px;
   padding: 5px;
   width: 100%;
}

main img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
  

main section p{
    padding: 1rem;    
}

main section h3{
    background-color: var(--header-background);
    color: floralwhite;
    padding: 1rem;
    margin-block-start: 0px;
    text-align: center;
}

@media screen and (min-width: 640px){
    nav{
        padding: 8px 5px .3px 5px;
        grid-column:span;
    }
    nav ul{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }

    main{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .section3{
        grid-column: 1/3;
    }

    .section3 img{
        width: 100%;
    }
}

@media screen and (min-width: 1050px){
    main{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .section3{
        grid-column: 3/4;
    }

    .section3 img{
        width: auto;
    }

}