/*File: style.css ==============================================================
  Author: sutaschramm.com
  Date Last Modified: 12/31/2022
===============================================================================

/* put your reset styles here */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thread, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
    }

ol {
    padding-left: 1.4em;
    list-style: decimal;
    }

ul {
    padding-left: 1.4em;
    list-style: square;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
    }


/******** put styles for desktop and basic styles for all devices here ************/

html {
    background: url('../images/astronomy-dolomites-evening-1624496.jpg') 0% 35% / 100% no-repeat fixed ;  
}


#suta { 
    font-family: Agenda-Light, Agenda, sans-serif;
    font-weight: 100; 
    background: rgba(0,0,0,0.3);
    color: #eee1dd;
    
    padding: 2rem;
    width: 33%;
    margin:2rem;
    float: left;
    font-size: 1.2rem;
    padding-top: .7rem;
}

#suta a:hover {
    background-color: rgba(255,255,255,0.5) ;
    color: rgba(255,255,255,1) ;
}

#suta a:active {
    background-color: deeppink;
    color: pink;
}

#suta a {
    background: rgba(255,255,255,0.23);
    color: #eee1dd;
    
    transition-property: background-color, color;
    transition-duration: .5s;
       
    text-decoration: none;
    padding: .2em;
    border-radius: 5px;
}

#suta a:first-child {
    margin: 5px;
    
}

#suta header {
    text-align: center;
    font-size: 2rem;
    margin-bottom: .5rem;
}

#suta header h1 {
    display: inline;
}

#suta nav {
    font-size: 1rem; 
    border: 1px solid #eee1dd;
    border-radius: 5px;
    padding: .5em 0;
}

#suta article {
    margin-top: .7rem;
}

#suta article h3 {
    margin-bottom: .1rem;
}

/******** put styles for larger display devices here ************************** */
/*  from CSS book pg.466  */

@media (min-width: 572px) and (max-width: 768px) {
    
    html {
      background: url('../images/astronomy-dolomites-evening-1624496.jpg') 25% 30% / 200% no-repeat fixed ;
  
        
    }

    #suta {
        width: auto;
    }
    
    #suta a {
        font-size: 1.05rem;
    }
    
    a:first-child {
        margin-left: 5px;
    }
    
}


/* ***** put styles for medium displays here ********************************* */

@media (min-width: 320px) and (max-width: 571px) { 
    
    html {
      background: url('../images/astronomy-dolomites-evening-1624496.jpg') 25% 10% / 200% no-repeat fixed ;
        
   
    }
 
    #suta {
        width: auto;
        margin: 0;
    }
    
    #suta a {
        font-size: 1.2rem;
    }
    
    
}



/* ***** put styles for small displays here ********************************* */

@media (min-width: 289px) and (max-width: 319px) {
    
    html {
       background: url('../images/astronomy-dolomites-evening-1624496.jpg') 25% 10% / 200% no-repeat fixed ;

    }

    #suta {
        width: auto;
        margin: 0;
    }
    
    #suta a {
        font-size: 1.5rem;
        margin: 5px;
        display: block;
        text-align: center;
    }
    
    
}




/* ***** put styles for smallest displays here ********************************* */

@media (min-width: 230px) and (max-width: 288px) {
    
     html {
       background: url('../images/astronomy-dolomites-evening-1624496.jpg') 40% 20% / 300% no-repeat fixed ;
       
    }

     #suta {
        width: auto;
        margin: 0;
    }
    
    .last-name {
       visibility: hidden;
       
    }
    
    #suta nav {
        margin-top: -37px;
    }
    
    #suta a {
        font-size: 1.5rem;
        margin: 5px;
        display: block;
        text-align: center;
    }
    
    #suta nav {
        padding: 0;
    }
}



@media (min-width: 50px) and (max-width: 229px) {
    
    html {
        background: url('../images/astronomy-dolomites-evening-1624496.jpg') 15% 10% / 500% no-repeat fixed ;
     
    }

    
    #suta {
        width: auto;
        margin: 0;
    }
    
    .last-name {
       visibility: hidden;
       
    }
    
    #suta nav {
        margin-top: -37px;
    }
    
    #suta a {
        font-size: 1.5rem;
        margin: 5px;
        display: block;
        text-align: center;
    }
    
    #suta nav {
        padding: 0;
    }
}