@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Satisfy&display=swap');
*{
    box-sizing: border-box;
    margin:0;
    padding:0;
}

:root{
 --primary-color : #a4dfd673;
}
ul{
    list-style:none;
}
a{
    text-decoration:none;
}
body{
    max-width: 90%;
    margin:auto;
    background:linear-gradient(60deg, #f3eff0, #d5e8e4, #78abf7);
    font-family: 'Noto Sans JP', sans-serif;
}
/*link***/
.link {
    color: var(--button-text-color);
    
}
.link-primary {
    background-color:#141615d3 ;
    border-radius: 25px;
    color: white;
    display:block;
    max-width: 140px;
    margin: 1rem 0rem ;
    padding: 1rem;
}

.link-secondary {
    color:#000;
    border-radius: 25px;
    border: 1px solid #141615d3 ;
    display:block;
    max-width: 140px;
    margin: 1rem 0.5rem;
    padding: 1rem;
}
/***nav***/

.navbar{
    background-color: var(--primary-color);
    box-shadow: 1px 0px 0 1px;
    padding: 1rem 1rem;
    border-bottom-left-radius:1rem;
}
.navbar .nav-brand{
    font-weight: bolder;
}
.active{
    font-weight: bold;
    color:#000 !important;
}
.navbar li{
    display: inline;
    margin: 0 1rem;
}
.navbar ul{
    text-align: right;
}
.navbar a{
    color:#0f436b;;
    font-size:16px !important;
}
/****header***/
.hero-content{
    display: flex;
    margin: auto;
    max-width:90%;
    margin: 4rem 0rem;
}
.main-text{
    flex:50%;
    margin: 4rem 0;
    padding: 3rem;
}
.main-text h1{
    font-size:4rem;
    color:#0f436b;
    margin: 0px 0px 11px 0px;
    line-height: 76px;
    text-align: left;
}
.main-text p{
    color:#052438d2;
    font-size:2rem;
    line-height: 50px;
}
.hero-img{
    flex:50%;
    margin: 2rem 0;
}
.hero-img img{
    width: 100%;
    height: auto;
    max-width: 620px;
}

/***About**/
.about{
    display: flex;
    margin: auto;
    max-width:90%;
    margin: 4rem 0rem;
}
.about-img{
    flex:40%;
    margin:1rem 0;
}
.about-img img{
    width: 100%;
    height: auto;
    max-width: 420px;
}
.about-text{
    padding: 20px;
    margin: 0px;
}
.about-text h2{
    font-size:2.5rem;
    color:#0f436b;
    margin: 6px 0px 6px 0px;
}
.about-text p{
    color:#052438d2;
    font-size:1.3rem;
    margin:0.5rem 0rem;
}
.about-text q{
    padding: 1rem;
    letter-spacing: 0.5px;
}

/**container**/
.container {
    padding: 0rem 0.6rem;
}
.container-center {
    max-width: 850px;
    margin: auto;
}
/****section***/
.section{
    margin: 1rem;
}
/***project***/
.project h2{
    font-size:2.5rem;
    color:#0f436b;
    margin: 0px 0px 6px 0px;
}
.project p{
    color:#052438d2;
    font-size:1rem;
    line-height: 40px;
    word-spacing: 2px;
}
/***Blog***/

.blog h2{
    font-size:2.5rem;
    color:#0f436b;
    margin: 0px 0px 6px 0px;
}
.blog p{
    color:#052438d2;
    font-size:1rem;
    line-height: 40px;
}
/**footer**/
.footer {
    background-color: var(--primary-color);
    padding: 1.3rem;
    text-align: center;
    border-top-right-radius: 1rem;
    box-shadow: 1px 0 3px 0px
}
.footer h3 {
    color: #000;
}
.footer-list li {
    display: inline;
    margin: 0 0.5rem;
}
footer i {
    color: #000;
    font-size: 30px;
    margin: 1rem;
}
footer p {
    color: #000;
}
footer span {
    font-weight: bolder;
}
/***Project section***/
.linkp{
    display: flex;
}
.projects{
  margin-bottom: 2rem;
  margin-top: 0.8rem;
  box-shadow:1px 1px 6px 3px rgba(0,0,0,0.7);
  padding: 15px;
}
.projects:hover{
    background:linear-gradient(60deg, #f3eff0, #bbe2f5, #dfe6e3);
}
.projects h2{
    font-size:1.5rem;
    color:#0f436b;
    margin: 10px 0px 6px 0px;
}
.projects p{
    color:#052438d2;
    font-size:1rem;
    line-height: 40px;
    word-spacing: 2px;
}

.ow{
    background: #c7d4da;
    padding: 10px;
    box-shadow:10px 2px 10px 3px rgba(0,0,0,0.5);
}
.head img{
    width: 100%;
    height: auto;
    max-width: 620px;
    margin: 1.5rem 0rem;
}
/** media query **/
@media screen and (max-width:320px){
    .hero-content{
        margin: 1.3rem 0rem;
        display: block;
    }
    .about{
        margin: 1.3rem 0rem;
    }
    .main-text{
        padding:1rem;
        margin:1rem 0rem;
    }
    .main-text h1{
       font-size:1.5rem;
       margin-bottom:5px;
    }
    .main-text p{
        font-size:1.3rem;
        line-height:30px;
    }
    footer i {
        color: #000;
        font-size: 30px;
        margin: 0.3rem;
    }
}
@media screen and (max-width:425px)
{
    .hero-content{
        margin: 1.3rem 0rem;
        display: block;
    }
    .about{
        margin: 1.3rem 0rem;
        display: block;
    }
    .main-text{
        padding:1rem;
        margin:1rem 0rem;
    }
    .main-text h1{
        font-size:1.8rem;
        margin-bottom:5px;
     }
     .main-text p{
         font-size:1.4rem;
         line-height:30px;
     }
}
@media screen and (max-width:768px)
{
    .hero-content{
        margin: 1.3rem 0rem;
    }
    .about{
        margin: 1.3rem 0rem;
    }
    .main-text{
        padding:1rem;
        margin:1rem 0rem;
    }
    .main-text h1{
        font-size:1.8rem;
        margin-bottom:6px;
     }
     .main-text p{
         font-size:1.4rem;
         line-height:30px;
     }
     .footer-list li {
        margin: 0.3rem;
    }
    footer i {
        color: #000;
        font-size: 20px;
        margin: 0.3rem;
    }
    footer h3{
        font-size: 16px;
        margin-bottom: 5px;
    }
    footer span {
        font-weight: bolder;
        font-size:10px;
    }
    .about-text h2{
        font-size:1.6rem;
    }
    .about-text p{
        font-size:1rem;
    }

    .project p{
    line-height:25px;
    }
    .project h2{
        font-size:1.5rem;
    }
    .blog p{
        line-height:25px;
    }
    .blog h2{
        font-size:1.5rem;
    }
    .projects p{
        line-height:25px;
    }
    .link-primary{
        margin:0.5rem;
        padding: 7px;
        max-width: 90px;
        font-size:12px;
    }
    .link-secondary{
        margin:0.5rem;
        padding: 7px;
        max-width: 90px;
        font-size:12px;
    }
}