@font-face{
    font-family: IntegralCF;
    src: url(fonts/IntegralCF-Bold.otf);
}

section{margin:0px;}

    .content {
        padding: 0 20px 200px 20px;
/*        max-height: 0;*/
        overflow:visible;
        display: flex;
        flex-wrap:wrap;
/*        flex-direction: column;*/
        transition: max-height 0.3s ease-out;
        background-color: black;
        color:white;
        margin-bottom: 40;
        margin-top: 50px;
    }    

    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    h2.job-title{
        font-size: 16pt;
        font-weight: 600;
        margin-left: 0px;
        margin-bottom: 0px;
        margin-top: 0;
        line-height: 1;
        text-align: left;
    }
    
    h3.job-meta{
        font-size: 14pt;
        margin-top: 0px;
        margin-left: 0px;
        margin-bottom: 0px;
        line-height: 2;
        font-weight: 400;
        font-style: normal;
    }
    
    .intro{ margin: 0;
        padding-top: 0px;
        padding-left: 0px;
        width:100%;
        height:auto;
        line-height: 1.25;
        flex-wrap: wrap;
        }

    .experience fieldset > ul.pluslist:not(:last-child) {
        margin-bottom: 2em;
    }
    
    
    .pluslist{
        list-style-type: "+   ";
        color:#ffffff;
        font-size: 1em;
        flex-wrap: wrap;
        line-height: 1.5;
        padding-left: 1.5em;
        padding-top: 0px;
        padding-bottom: 0px;
        margin: 0px;
    }
    
    .minuslist{
        list-style-type: "—   ";
        color:#ffffff;
        font-size: 1em;
        flex-wrap: wrap;
        line-height: 1.5;
        padding-left: 1.5em;
        padding-top: 0px;
        padding-bottom: 0px;
        column-count: 1;
        margin: 0px;
    }
    
    .pluslist li::marker {
        color:#62072E;
        font-weight: 900;
    }
    
    span{
        font-size: 10pt;
        font-weight: 400;
        
    }
    
    fieldset{
        width: 100%;
        margin-top:40px;
        margin-right: 20px;
        margin-left: 20px;
        font-family: acumin-pro, sans-serif;
        font-weight: 400;
        font-style: normal;
        line-height: 14pt;
        text-align: left;
        
        border: 2px solid #62072E;
        border-radius:30px;
        padding:40px;
        padding-top: 30px;
        padding-bottom: 30px;
/*
        margin-left: 50px;
        margin-right:50px;
*/
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    /*    ---------------------------*/
    
    legend{
        font-family: IntegralCF;
        color:#62072E;
        font-size: 16px;
        text-align: left;
        background-color: white;
        transform: scale(3, 2.3);
        position: relative;
        padding-left: 5px;
        padding-right:8px;
        padding-bottom:10px;
        margin-bottom:10px;
        top:20px;
        
    }
    
    .me legend{ 
        margin-left:-20px;
    }
    
    .experience legend{ 
        margin-left:70px;
    }

    
    .skills legend{ 
        margin-left:20px;
    }
    
    .education legend{ 
        margin-left:60px;
    }
    
    
    
    .me{
        display:flex;
        width:100%;
        order:1;
        margin-bottom: 0px;
    }
    
    .experience{
        display:flex;
        width:50%;
        order:2;
        height:auto;
        margin-bottom: 0px;
    }
    
    /*    +++++++++++++++++++++++++++++*/
    
    .skills{
        display:flex;
        flex-wrap: wrap;
        width:50%;
        height:0px;
        order:1;
    }
    
    .skills ul{
        display: block;
        column-count: 2;
    line-height: 1.5}
    
    .skills .minuslist{
        column-count: 1;
    }
    
    .skills a{
        color:white;
/*        font-style: italic;*/
        text-decoration: none;
    }
    
    .skills a:hover{
        text-decoration-line: underline;
    }
    
/*    +++++++++++++++++++++++++++++*/
    
    
    .education{
        display:flex;
        flex-direction: column;
        align-items: stretch;
        width:100%;
        order:2;
    }

    .education .pluslist{column-count: 1;}

    .skills .education ul.pluslist{
        column-count: 1;
    }
    
/*    ---------------------------*/
    .contact2{
        display:flex;
        flex-direction: column;
        align-items: stretch;
        width:100%;
        height:auto;
        order:2;
    }
    
    .contact2 ul{
        column-count: 1;
        align-self: stretch;
        width: 100%;
        box-sizing: border-box;
    }

    /* Beat .skills ul multi-column + UA list padding; keep same indent as other .pluslist */
    .skills .contact2 ul.pluslist{
        column-count: 1;
        padding: 0;
        padding-left: 1.5em;
        margin-left: 0;
    }
    
    .contact2 legend{
        margin-left: 45px;
    }

    
    
    .highlightCircle{
        display:none;
        background: #62072E;
        border-radius: 50%;
        width: 200px;
        height: 200px;
        position: flex;
        filter: blur(50px);
        }

    .nameCircle:hover + .highlightCircle {
        display: block;
        color: #62072E;
    }
    
    
    
    
    
    
    
/*                SCREEN SIZE CHANGES              */
    @media only screen and (min-width: 850px) 
    {
        .skills .contact2{
        display: inline-block;
    }
    }
    
    
    
/*===================================================================================    */
    @media only screen and (max-width: 850px) 
    {  
    fieldset{
        display:inline-block;
        width: 100%;
/*
        margin-left:5px;
        margin-right:5px;
        justify-content: center;
        align-items: center;
*/
        }
        
    .me{
        display:flex;
        width:100%;}
    
    .experience{
        display:flex;
        width:100%;
        order: 2;
        }
    
    .skills{
        display:flex;
        width:100%;
        order:2;
        height:auto;
        }
        
    .education{
        display:flex;
        flex-direction: column;
        align-items: stretch;
        width:100%;
        height:auto;
        }

    .skills .contact2{
        display: flex;
        flex-direction: column;
        column-count: 1;
    }
    
    }
    
    
    
    
/*    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    @media only screen and (max-width: 420px) 
    {
        .content{padding:0 0 300px 0}
        
        .skills ul {column-count: 1;}
        
        fieldset{margin:15px;
            align-items: center;
            justify-content: center;
            padding: 25px;
            width:100%;
        }
        
        .me fieldset
        {
        display: flex;
        width: 100%;
        }
        
        legend
        {
        transform: scale(2, 1.6);
        padding-right:8px;
        padding-bottom:8px;
        top:12px;
        }
        
        .me legend{margin-left:-12px;}
    
        .experience legend{margin-left:32px;}

        .skills legend{margin-left:6px;}

        .education legend{margin-left:28px;}
        
        .contact2 legend{margin-left: 20px;}
    }

    @media only screen and (min-width: 421px) and (max-width: 600px) {
        .content {
            padding-bottom: 250px;
        }
    }
    
    
    
    
/* ////////////     LIGHT AND DARK MODE//////////////////////////  */  
@media (prefers-color-scheme: light)
{
    body{background-color: white;}
    .content{background-color: white;}
    h2.job-title{color:black;}
    h3.job-meta{color:black;}
    .intro{color:black;}
    .skills a{color: black;}
    .pluslist{color:black;}
    .minuslist{color:black;}
    .nameCircle {filter:invert(1);}
    .menu{filter:invert(1);}
    .plus{filter:invert(1);}
}

@media (prefers-color-scheme: dark)
{
    body{background-color: black;}
    legend{background-color: black;}
    h2.job-title{color:white;}
    h3.job-meta{color:white;}
    .intro{color:white;}
    .pluslist{color:white;}
}

html{
    scroll-behavior: smooth;
}

body{margin:0;}


.menu{
    bottom: 0;
    left: 200px;
    position: fixed;
    padding: 30px;
    height: auto;
    z-index: 5;
}


.menu a{
    width: 30px;
    height:auto;
    float: right;
    font-family: 'Nunito Sans ', sans-serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    text-decoration: none;
    color: white;
    display: block;
}

.menu a:hover{
    font-size: 22px;
/*    text-decoration:underline;*/
    transition: .1s;  
}

.plus{
    color:#62072E;
    font-size: 28px;
    font-weight:300;
}

.nameCircle{
    position:fixed;
    background-repeat: no-repeat;
    bottom: 40px;
    left:43px;
    pointer-events: none;
    height: 100px;
    width: 100px;
    padding:30px;
    background-image: url(assets/spencereeves-circle.svg);
    animation: rotation 25s infinite linear;
    z-index: 1;
}

@media only screen and (max-width: 420px) {
    .nameCircle{
        margin: 0;
        left: 20px;
    }
}

.bg-img{
    position:relative;
    background-image: url(assets/spencereeves-repeated.svg);
    background-repeat: no-repeat;
    background-position:center,center;
    width: 100%;
    height: 100vh;
}


@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}


@media only screen and (min-width: 1200px)
{ 
    .bg-img{background-size: 150%;}
    .content{
        margin:10%;
        padding-bottom: 200px;
    }
/*    .nameCircle{left:12%;}*/
}

@media only screen and (min-width: 600px) and (max-width: 1200px)
{
    .bg-img{background-size: 250%;}
}

@media only screen and (max-width: 600px) 
{
    .bg-img{background-size: 350%; }
}