body{
    margin: 0;
    background: linear-gradient(#999, #333);
    box-sizing: border-box;
}
#container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    max-width: 1024px;
    min-width: 750px;
    min-height: 100vh;
    margin:0 auto;
    background-color: #f5f5f5;

    #head {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        align-items: flex-end;
        background: linear-gradient(#333, #999);

        #photo {
            position: relative;
            top: 20px;
            left: -30px;
            width: 210px;
            height: 210px;
            border: solid 6px #999;
            border-radius: 50%;
            background-image: url(img/photo/myphoto.jpg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .salute {
            align-self: flex-start;
        }
    }

    #mainMenu:popover-open {
        top: 215px;
        left: calc(50% - 300px);
        margin: 0;
        min-width: 300px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    
    .mmButton, .cButton, #mainMenu:popover-open > li {
            position: relative;
            left: -100px;
            top: -50px;
            display: block;
            width: 80px;
            height: 40px;
            border-radius: 80px;
            border: 3px solid #666;
            background-color: #f5f5f5;
            font-size: 10pt;
        }
    
    #mainMenu:popover-open > li {
            position: static;
            width: 80%;
            padding-top: 10px;
            text-shadow: none;
            height: 30px;
            margin-top: 20px;
        }
        
        .cButton{
            left: auto;
            right: -100px;
            top: -90px;
         }
        
        #mainMenu:popover-open > li > a {
            text-decoration: none;
            color: #333;
            font-size: 12pt;
            display: block;
            width: 100%;
            height: 100%;
        }

        #contacts:popover-open {
                box-sizing: border-box;
                position: absolute;
                background-color: #666;
                border-radius: 50px;
                border: 3px solid #ccc;
                left: auto;
                right: calc(50% - 300px);
                top: -310px;
                height: 200px;
                width: 300px;
                color: #f5f5f5;
                text-shadow: none;
                padding-top: 30px;
            }
    
    

    .content{
        width: 80%;
    }

    .footer{ 
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        align-items: center;
        height: 150px;
        background: linear-gradient(#999, #333);  
        position: relative;
        top: 60px;
    }
}

.zag, #mainMenu, .text {
    background-color:#666;
    text-align: center;
    border: 3px solid #ccc;
    border-radius: 10px;
}

#head, .zag, .footer, .text {
    color: #ccc;
    text-shadow: 3px 3px #333;
}

.mainText {
    color: #333;
    font-size: 15pt;
    text-shadow: 1px 1px 5px #666;
}

ul {
    list-style: none ;
}

ul > li {
    margin-bottom: 10px;
}

.skillsTab {
    display: flex;
    justify-content: space-around;
    flex-flow: row wrap;
}

.iconSkill {    
    height: 70px;
    display: block;
    min-width: 80px;
}

.css, .js, .gulp, .sas { 
    width: 63px;
    height: 61px;
}

.css, .sas, .js {
    margin-top: 6px;
}

.icon {
    max-width: 30px;
    max-height: 30px;
    margin-right: 10px;
}

.skillBox {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    height: 70px;
    width: 80%;
    margin: 0 auto;
    font-size: 22pt;
    text-align: center;
    color: #faf8f8;
    text-shadow: 0 0 5px #333;
}

.red, .blue, .yellow {
    flex-grow: 1;
    padding-top: 20px;
    margin-left: 3px;
    border-radius: 4px;
}

.yellow {
    flex-grow: 3;
    background-color: rgb(189, 189, 8);    
}

.red {
    background-color: rgb(183, 13, 13);
}

.blue {
    background-color: rgb(7, 7, 176);
}

.showcase {
    width: 70%;
    height: 300px;
    border: 3px solid #333;
    border-radius: 6px;
    margin: 0 auto;
    padding: 0;
  }
  
 .showcase input, .showcase a {
   position: relative;
   top: 200px;
   left: 20%;
   font-size: 16pt;
   background-color: #999;
   border: 1px solid #333;
   border-radius: 5px;
   z-index: 5;
 }
 
 .showcase a {
   left: 40%;
   text-decoration: none;
   color: red;
   display: inline-block;
   padding: 1px 6px;
 }
 
 .showcase div {
     width: 90%;
 }
  
 .curtain {
   position: relative;
   top: -21px;
   right: -5%;
   width: 100%;
   height: 295px;
   background-color: white;
   opacity: 0.7;
   filter: blur(14px);
   margin: 0;
 }
   
 .text {    
   position: absolute;
   display: none;
   max-width: 360px;
   max-height: 200px;
   z-index: 15;
   font-size: 16pt;
 }

 .displayOn {
   display: block;
 }
   
 .one {
   background-image: url(img/showcase/Two-skulls.jpg);
   background-position: center;
   background-repeat: no-repeat;
   background-size: 100%;
 }

.myGit, .logo {
    background-color: #999;
    width: 120px;
    height: 60px;
    border: 4px solid #333;
    border-radius: 50px;
}

.myGit > a, .logo > a {
    display: block;
    margin: 10% auto auto 10%;
    width: 100%;
    height: 100%;
    font-size: 20pt;
    color: #333;
    text-shadow: none;
}

.logo {
    background-image: url(img/image/rs_school_js.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80%;
}

.date {
    font-size: 13pt;
}

@media(max-width: 420px ) and (min-width:320px) {
    
    #container {
        max-width: 420px;
        min-width: 320px;

        #head { 
            height: 320px;
            flex-flow: column;
            align-items: center;

            #photo {
              margin-left: 50px;  
              width: 150px;
              height: 150px;
            }
        }

        
        
        .mmButton, .cButton {
            left: -20%;
        }
        
        .cButton{
            left: auto;
            right: -20%;
        }

        #mainMenu:popover-open {
            top: 5px;
            left: 0;
            margin: 0;
            min-width: 80%;
            min-height: 400px;
        }

        #contacts:popover-open {
            right: calc(50% - 150px);
        }
        
        .myGit, .logo {
          width: 60px;
          height: 30px;
        }
        
        .myGit > a, .logo > a {
          font-size: 10pt;
        }   
    }   
    
    .salute {
        align-self: flex-start;
        margin-left: 30%;
    }    
   
   .salute > h1 {
     font-size: 12pt;
   }
   
   .salute > h3 {
     font-size: 10pt;
   }

   .skillBox {
    display: flex;
    flex-flow: column nowrap;
    height: 170px;
    width: 40%;
    margin: 0 auto;
    font-size: 13pt;
    }

    .red, .blue, .yellow {
        margin-top: 2px;
    }    

    .showcase {
        width: 280px;
        height: 300px;
        
      }
      
     .showcase input, .showcase a {
       top: 250px;
       left: 14px;
       font-size: 14pt;
       
     }
     
     .showcase a {
       left: 40px;
     }
     
     .showcase div {
         width: 90%;
     }
       
     .text {      
       max-width: 260px;
       max-height: 250px;
     }
   
     .displayOn {
       display: block;
     }
       
     .one {
       background-image: url(img/showcase/Two-skulls.jpg);
       background-position: center;
       background-repeat: no-repeat;
       background-size: 100%;
     }

   .footer {
   height: 70px;
   }
}