html {
/* selects the html element */
    background-color: white;
    color: black;
    font-family: "San Francisco"
    , sans-serif;
    /* sans is fallback */
    font-size: 13px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    line-height: 1.3;
    min-height: 100vh;
    min-width: 300px;
    overflow-x: hidden;
    /* no horizontal scrolling */
}

.name{
    display:flex;
    justify-content: center;
    margin-bottom: 7.77px;
    max-width:333px;
    font-size: xx-large;

}

.intro{
    max-width:333px;
}

/* Base styling */
a {
    color:blue;
    cursor: pointer;
    text-decoration: none;
}

a:hover {
    color:orange;
}


summary::marker {
  cursor: pointer;
}
/* cursor over triangle in summary */

span.summary-text{
    cursor:pointer;
    font-weight: bold;
}
/* cursor over text in span */

/*
Source - https://stackoverflow.com/a/36412339
Posted by Ilias Karim, modified by community. See post 'Timeline' for change history
Retrieved 2026-08-22, License - CC BY-SA 3.0
*/

@font-face {
  font-family: "San Francisco";
  /* defines San Francisco for the font */
  font-weight: 333;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}

.picture {
    float: right;
    width: 33%;
    max-width: 333px;
    margin: 0px 77px 13px 13px;
}

.picture-image {
    display: block;
    width: 100%;
    height: auto;
    /* max-width:100%; */
    border-radius: 33%;
    /* round edges of image */
    max-width: 333px;        /* target size */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    /* crop not stretch image */

}
 /*4. Responsiveness */
/* @media screen and (max-width: 777px) {
    .content {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 5rem 3rem;
    }
    .picture-image {
        max-width:144px;
    }
} */

/* @media screen and (min-width: 777px){*/
.content {
    align-items: center;
    justify-content: space-around;
    justify-content: space-evenly;
    padding: 4rem;
    display: flex;
    position: relative;
    min-height: 100vh;
    max-width: 777px;
    margin: 0 auto;

} 
.about {
    flex-grow: 1;
    flex-shrink: 1;
    max-width:777px;
    min-width:0px;
    width:100%;
    flex: 1 1 777px;
    align-self:center;
} 
/* } */

.contact{
    display:flex;
    margin-top: 7.77px;
    margin-bottom: 33.3px;
    vertical-align:top;
    justify-content: center;
    max-width:333px;
    
} 

.credits{
    display:block;
    margin-top:7.77px;
    
}

.projects{
    display:block;
    margin-top:7.77px;
}

/* margins to help people read */

.project{
    display:flex;
    align-items: flex-start;
    gap: 0 13px;
    margin-bottom:33px;
}

.project-image{
    max-width:144px;
    max-height:144px;
    object-fit: contain;
    flex-shrink: 0;
}

details{
    margin-bottom:3px;
}

h1.projects-title{
    font-size: 13px;
    font-weight: bold;
}