@import url("resets.css");
@import url("utilities.css");
@import url("typography.css");
@import url("colors.css");
@import url("navbar.css");
@import url("icomoon.css");
@import url("system-grid.css");


:root {
    color-scheme: dark;
    --bg-blue: #026ba9;
    --bg-purple: #392a5b;
    --bg-black: #000000;
    --bg-white: #ffffff;
    --text-on-black: #ffffff;
    --txt-white: #ffffff; 
    --txt-light-gray: #9a9a9a;
    --portfolio-icon: #9a9a9a;
    --portfolio-icon-active: #ffffff;
    --link-text: #2d8ac0;
    --link-text-active: #5aaddd;
    --connect-link-text: #014379;
    --connect-link-text-active: #ffffff;
    --nav-bg: #392a5b;
    --nav-button-background: #ffffff;
    --nav-button-text: #392a5b;
    --nav-button-background-active: #cccccc;
    --nav-button-text-active: #026ba9;
    --nav-link: #ffffff;
    --nav-link-active: #cdcdcd;
    --copyright-text: #ffffff;
    --border-portfolio-image: none;
}
@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
        --bg-black: #ffffff;
        --text-on-black: #222222;
        --portfolio-icon: #026ba9;
        --portfolio-icon-active: #5aaddd;
        --link-text: #026ba9;
        --nav-bg: #ffffff;
        --nav-button-background: #392a5b;
        --nav-button-text: #ffffff;
        --nav-button-background-active: #026ba9;
        --nav-button-text-active: #ffffff;
        --nav-link: #026ba9;
        --nav-link-active: #5aaddd;
        --copyright-text: #666666;
        --border-portfolio-image: #000000;
    }
}
    
      html {
        font-size: 10px; /* Root font size*/
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        background-image: linear-gradient(var(--bg-purple), var(--bg-black));
      }
      
      body {
        font-size: 1.6rem;
        line-height: 1.42857143;
        background-color: var(--bg-white);
        color: var(--txt-white);
        font-style: normal;
        font-family: "proxima-nova", Helvetica, Arial, sans-serif;
        font-weight: 400;
        overscroll-behavior: none;   
    }
      
      button {
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
      }
      
      a {
        color: var(--link-text);
        text-decoration: none;
        font-weight: 600;
      }
      
      a:hover,
      a:focus {
        color: var(--link-text-active);
        text-decoration: underline;
      }
      
      a:focus {
        outline: thin dotted;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
      }
      
      img {
        vertical-align: middle;
      }

      
    /*  Template */


        .page-container {
            margin-top: 65px; /* height of the header */
        }

        footer {
            background-color: var(--bg-black);
            padding: 15px 0 10px;
        }
        .copyright-text {
            color: var(--copyright-text);
        }
    
    /*    Anchor    */
    
        .anchor {
            display: block;
            position: relative;
            top: -65px; /* height of the header */
            visibility: hidden;
        }
        .methods h2,
        .portfolio h2,
        .portfolio h3,
        .portfolio p{
            color: var(--text-on-black);
        }

    /*      ABOUT SECTION     */
    
        .about {
            margin: 0;
            background-image: url(../images/flowers.svg);
            background-position: center top;
            background-repeat: no-repeat;
            background-size: 1500px;
            height: 100%;
            background-attachment: fixed;
        }
    
    
    /*     SKILLS SECTION      */
    
        .skills-list {
            padding: 0;
        }
        
        .skills-list-item {
            list-style: none;
            font-size: 1.8rem;
            margin: 0 auto 10px auto;
            width: 268px;
            text-align: center;
        }
        
        @media screen and (min-width: 768px) {
            .skills-list-item {
                text-align: left;
            }
        }


    /* PORTFOLIO  SECTION */
  
        .thumbnail {
            background-color: var(--bg-black);
            border: none;
            padding: 0;
            margin: 0 auto;
            width: 268px;
            height: 450px;
        }
        
        .thumbnail-images-list {
            position: relative;
            display: block;
            height: 350px;
            padding: 0px;
        }
        
        .thumbnail .desktop,
        .thumbnail .tablet,
        .thumbnail .mobile {
            width: 268px;
            height: 350px;
            margin: 0 auto;
            display: block;
            position: absolute;
            overflow: hidden;
            
        }
        
        .thumbnail .desktop-img,
        .thumbnail .tablet-img,
        .thumbnail .mobile-img
         {
            display: block;
            margin: 0 auto;
            height: auto;
            border: 1px solid var(--border-portfolio-image)

        }

        .thumbnail .desktop-img{
            width: 268px;
        }
        
        .thumbnail .tablet-img {
            width: 225px;
        }
        
        .thumbnail .mobile-img {
            width: 175px;
        }
        
        a.tablet-icon,
        a.desktop-icon,
        a.mobile-icon {
            color: var(--portfolio-icon);
            text-decoration: none;
        }

        a.tablet-icon:hover,
        a.tablet-icon:active,
        a.desktop-icon:hover,        
        a.desktop-icon:active,
        a.mobile-icon:hover,
        a.mobile-icon:active {
            color: var(--portfolio-icon-active);
            transition: all .2s ease-in-out;
        }
          
        .device-list {
            text-align: right;
            padding: 0px;
        }
        
        .device-list_item {
            display: inline-block;
            margin: 8px 1px;
            vertical-align: middle;
        }
        
        .icon-screen {
            font-size: 2.2rem;
        }
        
        .icon-tablet {
            font-size: 2.0rem;
        }
        
        .icon-mobile {
            font-size: 2.1rem;
            margin: 0 -5px;
        }

    /*     CONNECT SECTION     */
    
        .connect {
            padding-bottom: 30px;
        }
        
        .connect-list {
            text-align: center;
            padding-left: 0;
        }
        
        .connect-list_item {
            display: inline-block;
        }
        
        a.connect-list_item_link {
            color: var(--connect-link-text);
        }
        
        a.connect-list_item_link:hover,
        a.connect-list_item_link:focus {
            color: var(--connect-link-text-active);
            text-decoration: none;
            -webkit-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
        }
        
        .social-icon {
            padding: 5px;
            font-size: 4.0rem;
        }