@font-face { 

    font-family: Handjet; /*this is where we give our font a name so we can use it!*/
    
    src: url("Handjet/Handjet-ExtraLight.ttf"); /*remember this is how we link to files in CSS!*/
    
    }

body{ background-color: #fbf4db;min-width: 540px}

header{display:inline;
vertical-align: center;}

h1{color:hsl(203, 23%, 65%);text-align: center;background-color: #f9e79f;
    border: 3px dotted indianred;border-radius: 90px;
    font-family:handjet; font-size: xx-large;letter-spacing: 8px;}


p{border: 3px dotted indianred;text-align: center;
    padding: 80px;border-radius: 50%;background-color: #f8e9aee2;}

blockquote{font-family:handjet;font-size: xx-large;letter-spacing: 3px;}
 
.navbar{padding-left: 30px;}

p{text-indent: 0px;}

div header h1{font-size: xx-large;font-weight: 9;letter-spacing: 15px;line-height:normal;
    min-width: 60px;align-items: center;align-content: center;}

h2{text-align: center;font-style: italic;font-weight: 1;letter-spacing: 3px;}


div header{text-align:center; position:relative;height: 90px;display:grid; ;
}

.wrapper{min-width: 100%;}

main div{padding: 15px;}

div p {word-spacing: 1px;letter-spacing: 1px;padding:105px}

main {padding: 15px 15px 15px 15px}

form label {text-align: center;block-size: 8px;
padding-top: 50px;align-content: center;margin-bottom: 35px;}

main a{color: indianred;align-items: center;align-content: center;text-align: center;
    border: 3px dotted indianred;padding:30px 50px;
border-radius: 90px;background-color: hsla(48, 82%, 89%, 0.78);letter-spacing: 2px;}




footer p{display: flex;justify-content: center;border: indianred 3px dotted; border-radius: 80px;
    position: relative;;font-size: large;letter-spacing: 3px;background-color: #f9e79f;
    padding:15px;margin: 15px;align-content: center;align-items: center;flex-wrap: wrap;}



.pic1 {        /*footer icons*/
    width: 25px;
    height: 25px;
}

.picbig1 {                                  
    position: absolute;
    width: 0px;
    -webkit-transition: width 0.3s linear 0s;
    transition: width 0.3s linear 0s; 
    z-index: 10;
}

.pic1:hover + .picbig1 {
    width: 40px;position:absolute; left:10px;
}

.pic2 {        /*footer icons*/
    width: 25px;
    height: 25px;
}

.picbig2 {                                  
    position: absolute;
    width: 0px;
    -webkit-transition: width 0.3s linear 0s;
    transition: width 0.3s linear 0s; 
    z-index: 10;
}
.pic2:hover + .picbig2 {
    width: 40px;position:absolute; right:10px;
}

    .picture{border:3px dotted rgba(161, 57, 57, 0.552);}

    main form{text-align:center;padding:40px;border:3px dashed indianred}
    

.contact{position: relative;margin:10px;color: indianred;padding:5px}

.name{font-size: large;padding-right:25px ;text-align: center;position: relative;color: indianred;}


h1{margin-top: 60px;}


.about{color:indianred;border: 3px dotted indianred;text-align: center;
    padding: 20px;word-spacing: 3px;margin:10px;;background-color: #f9e79fb4;}

 


    @media screen and (min-width: 760px) {
        h2{color:indianred}
        .grid {
        display: grid;
        grid-gap: 2em;
        grid-template-columns: 25% 75%;
        grid-template-rows:auto;
        grid-template-areas: 
            "video video"
            "picture about"
            "CV CV" ;
       
        }

        p{color:indianred}

    .blockquote {
        padding-top: 20px;
    justify-self:center;
      }

      blockquote{color:indianred;margin:35px;padding:35px;text-align: center;border-radius: 100%;
        border:3px dashed indianred;background-color: #a4bfc760;}

    .picture {
        grid-area: picture;margin-top: 0px;
        padding-top: 20px;
        align-self: flex-start;
        position: relative;text-align: center;
        }
        img{width:90%;}
    .about {
            grid-area: about;
           justify-self:left;
           padding-left: 10px;
            }

            .video {
                grid-area: video;
                align-self: center;margin-left: -15px;
                width: 100%;text-align:center ;
              }
              
     .CV {
        grid-area: CV;
        justify-self:center;
                }
            
     footer{color:indianred;}     

   
    }
            
   
    /* Grid layout in mobile view*/
    @media screen and (max-width: 759px) {
        .grid {
            display: grid;
            grid-gap: 4em;
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            grid-template-areas: 
                "video"
                "picture"
                "about"
                "CV";
               }
               h2{color:indianred}
          
               blockquote{color:indianred;margin:35px;padding:35px;text-align: center;border-radius: 100%;
                border:3px dashed indianred;background-color: #a4bfc760;}

  p{color:indianred}
        .video {
            grid-area: video;
            align-self: center;text-align: center;
            margin-left: -15px;
            width: 100%;
          }
        
        
        .picture{

           justify-self: center;
            grid-area: picture;
            padding-left: 15px;text-align: center; 
            align-self: flex-start; ;
            }

            img{width:100%;position: static;}

     .about {
        grid-area: about;
        padding-left: 10px;
                   }
                   
  .CV {
    grid-area: CV;
      justify-self: center;}

     
    }

    .Vitae{display:none;}
    
    
    /*print query*/


     @media print {
        
        .Vitae{ display: block;word-spacing: 2px;}

        .grid {
            background: transparent !important;
            box-shadow: none !important;
            text-shadow: none !important;
               }

             .navbar{display: none!important;}
              
            .h2{color: black;}
    .header{color: black;margin-bottom: 0;border:none;text-align: center;}
.blockquote{color: black;border: none !important;margin-left: 190px;}
    .video {
            display: none;
          }

          .wrapper{border:none}

 .picture{ display:none}
          img{display: none}

  .about {color: black;
        grid-area: about;margin-bottom:-50px;padding:20px
                   }
.copyright{display: none}

.pic1{display: none;}

footer{color:black}

  .CV a {display: none !important;
    }

strong{font-size: large;padding-right: 20px;}
.list{margin-left: 50px;margin-top:-40px}
}

input {margin: 12px;}
textarea{margin:10px}

table{width: 100%;border-spacing: 30px;color: indianred;text-align:center;}
th{text-align: center;}

thead{text-align: center;}

tr:nth-child(odd){background-color:rgba(92, 179, 205, 0.278);}

.sample{justify-content: center;}