html{
  height:100%;
}

body{
  
  background-color:#00adef;
  height:100%;
}

.header{
    padding:30px;
    text-align:center;
    background:#00adef;
    font-size:18px;
    color:white;
}

.wrapper{
  
  width:100%;
  height:50%;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
  

.wrapper  .file-upload{
    height:200px;
    width:200px;
    border-radius: 100px;
    position:relative;
    
    display:none;
    justify-content:center;
    align-items: center;  

    border:4px solid #FFFFFF;
    overflow:hidden;
    background-image: linear-gradient(to bottom, #00adef 50%, #FFFFFF 50%);
    background-size: 100% 200%;
    transition: all 1s;
    color: #FFFFFF;
    font-size:100px;

}

    input[type='file']{

      height:400px;
      width:200px;
      position:absolute;
      top:0;
      left:0px;
      opacity:0;
      cursor:pointer;

    }


    &:hover{

      background-position: 0 -100%;

      color:#00adef;

    }