html {
    font-family: 'Century Gothic', sans-serif;
   /* font-family: sofia-pro,sans-serif; */
    display: block;
}

@media (max-width: 769px) {
    html { 
        width: 100%;
        height: 100%;
        margin: auto;}
}

body {
    
 background-image: url("image/background.jpg");
 background-size: cover;
    /* width: 2000px; */
    margin: auto;
    background-repeat:no-repeat;
}




ul {
    margin: 0;
}
#Header {
    display:block;
    color:rgba(164, 241, 255, 0.15);
}

.nav {
    padding-top:20px;
    padding-bottom:20px;
    list-style:none;
    background-color: rgba(164, 241, 255, 0.22);
    display:flex;
    border-bottom: 2px solid rgb(255, 255, 255,0.6);
    color: rgb(255, 255, 255);
    font-size: 16px;
    align-items:flex-end;
}

.nav li a {
    color: rgb(255, 255, 255);
    text-decoration:none;
}
.nav li {
    padding-left:89px;
}

h1 {
    font-family: 'Century Gothic', sans-serif;
    font-weight: 900;
    font-style: normal;
    margin:0;
    font-size: 45px;
    }

    #title{
        font-weight:bold;
        color: rgb(255, 255, 255);
        padding-top:15px;
        font-size:50px;
   
        margin-left:28%;
        margin-right:40%;
        padding-bottom:0px;
    }
        
    
     #subtitle{
            font-weight:Normal;
            color: rgb(255, 255, 255);
            font-size:25px;
            padding-top:0px;
           
         
            margin-left:23%;
            margin-right:50%;
        
            
    }

    h4{ font-family: 'Century Gothic', sans-serif;
        font-weight: 900;
        font-style: normal;
        margin:0;
        font-size: 30px;
        text-align: center;
        color: rgb(194, 212, 229);
        }



    

    
 
    #p-intro{
        font-size:16.5px;
        line-height:1.5em;
        margin-left:23%;
        color: rgb(255, 255, 255);
        margin-right:55%;
        text-indent:1rem; }


        .grid img {
            width: 50%;
            height: 90%;


         
        }
        
        .gridimg_div { border-radius: 10px; display: block; position: relative;
            cursor: pointer;
            transition: all 0.3s;
        
        } 

        .gridimgCSS { height: 100%; width: 100%; border-radius: 10px; display: block; cursor: pointer; } 
        .mask { position: absolute; background: rgba(101, 101, 101, 0.6); 
            color: #ffffff; opacity: 0; top: 0; right: 0; width: 100%; height: 100%; border-radius: 10px; pointer-events:none; } 
            .mask h3 { text-align: center; margin-top: 25%; } .img_div:hover .mask { opacity: 1; }
        .div img:hover{
                transform: scale(1.2);
              }

        .grid {
            padding: 0;
            margin-bottom: 0;
            margin-top: 30px;
            
            margin-left:15%;
            margin-right:20%;
           
        }
        
        #a#btn_types {
            font-size: 40pt;
           
            font-style: normal;
            color: #0f0e58;
            display: inline-block;
            box-sizing: border-box;
            text-decoration: none;
           
            text-align: left;
            margin: auto;
            margin-top: 100px;
            transition: all .4s;
            padding-top: 12px;
            padding-left: 10px;
        }
        
        a#btn_types :hover{
            font-weight: bold;
           font-size: x-large;
           
            color: #d0f9ff;
        }
        


        
        .grid li {
            display: block;
            
            text-align: center;
            color: black;
            font-size: 15pt;
            margin-bottom: 1rem;
            font-style: bold;
        }
        
        .using-grid {
            display: grid;
           /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr; */
           grid-template-columns:20% 20% 20% 20% 20%;

           grid-template-rows: auto auto auto auto auto;
        }
        
        .using-grid li {
            width: 150%;
        }

        .tile footer{
            background-color: rgb(22, 48, 71,0.8)
           
          }
          
        h5{ font-family: 'Century Gothic', sans-serif;
            font-weight: 300;
            font-style: normal;
            margin:0;
            font-size: 14px;
         
            color: aliceblue;
            }

        p{ font-family: 'Century Gothic', sans-serif;
            font-weight: 100;
            font-style: normal;
            margin:0;
            font-size: 10px;
         
            color: aliceblue;
            }

     a{font-family: 'Century Gothic', sans-serif;
        font-weight: 300;
        font-style: normal;
        margin:0;
        font-size: 14px;
     
        color: aliceblue; }