@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@600&display=swap');
body{
  margin: 10px 80px;
  font-family: 'Noto Sans JP', sans-serif;
}

nav {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
nav h1{
  font-family: 'Crimson Text', serif;
  font-size: 30px;
}
nav .onglets{
  margin-top: 35px;
}
nav .onglets a{
  text-decoration: none;
  color:#7f7e7e;
  margin-right: 10px;
}

.articles{
  margin-top: 30px;
}
.articles .article{
  display: flex;
  flex-wrap:wrap;
  margin-bottom: 30px;
}
.articles .article .left img{
  height: 300px;
  width: 500px;
}
.articles .article .right {
  margin-left: 40px;
  max-width: 50%;
}
.articles .article .right p.date{
  color: #7f7e7e;
}
.articles .article .right p.description{
  color: #2d2d2d;
}

footer {
  margin-top: 30px;
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
  color: #494949;
}
footer h2{
  font-size: 20px;
  font-family: 'Crimson Text', serif;
  margin-top: 20px;
}
footer .social-media{
  display:flex;
}
footer .social-media p{
  font-size: 18px;
  margin-right: 20px;
}

@media screen and (max-width: 640px){
  body{
    margin: 10px 20px;
  }
  nav .onglets{
    margin-top: -10px;
  }
  .articles .article .left img{
    height: 100%;
    width:100%;
  }
  .articles .article .right{
    margin: 0px;
    max-width: 100%;
  }
  footer .social-media{
    margin-top: -20px;
  }
  

}

/* Python */

.python {
color: white;
margin-left: 25px;
margin-top: 160px;
padding-top: 3px;
padding-left: 20px;
height: 160px;
width: 400px;
background-color: #262527;
border-radius: 20px;
}

.titrepy{
  color: black;
}

.pyimg {
height: 70px;
padding-left: 270px;
margin-top: -275px;
}

.txtpy {
font-size: 15px;
height: 2px;
width: 240px;

}

/* Html */

.html {
  color: white;
  margin-left: 600px;
  margin-top: -164px;
  padding-top: 3px;
  padding-left: 20px;
  height: 160px;
  width: 400px;
  background-color: #262527;
  border-radius: 20px;
  }
  
  .htmlimg {
  height: 70px;
  padding-left: 270px;
  margin-top: -275px;
  }
  
  .txthtml {
  font-size: 15px;
  height: 2px;
  width: 240px;
  
  }
  
  /* Javascript */
  
  
  .js {
    color: white;
    margin-left: 25px;
    margin-top: 160px;
    padding-top: 3px;
    padding-left: 20px;
    height: 160px;
    width: 400px;
    background-color: #262527;
    border-radius: 20px;
    }
    
    
    .jsimg {
    height: 70px;
    padding-left: 270px;
    margin-top: -275px;
    }
    
    .txtjs {
    font-size: 15px;
    height: 2px;
    width: 240px;
    }
    
    /* css */

    .css {
      color: white;
      margin-left: 600px;
      margin-top: -164px;
      padding-top: 3px;
      padding-left: 20px;
      height: 160px;
      width: 400px;
      background-color: #262527;
      border-radius: 20px;
      }
      
      .cssimg {
      height: 70px;
      padding-left: 270px;
      margin-top: -275px;
      }
      
      .txtcss {
      font-size: 15px;
      height: 2px;
      width: 240px;
      
      }
      
      /* C */

      .c {
        color: white;
        margin-left: 25px;
        margin-top: 160px;
        padding-top: 3px;
        padding-left: 20px;
        height: 160px;
        width: 400px;
        background-color: #262527;
        border-radius: 20px;
        }
        
        
        .cimg {
        height: 70px;
        padding-left: 270px;
        margin-top: -275px;
        }
        
        .txtc {
        font-size: 15px;
        height: 2px;
        width: 240px;
        }

        /* C++ */

      .ca {
      color: white;
      margin-left: 600px;
      margin-top: -164px;
      padding-top: 3px;
      padding-left: 20px;
      height: 160px;
      width: 400px;
      background-color: #262527;
      border-radius: 20px;
      }
      
      .caimg {
      height: 70px;
      padding-left: 270px;
      margin-top: -275px;
      }
      
      .txtca {
      font-size: 15px;
      height: 2px;
      width: 240px;
      
      }
      
      /* c# */
      .cs {
        color: white;
        margin-left: 25px;
        margin-top: 160px;
        padding-top: 3px;
        padding-left: 20px;
        height: 160px;
        width: 400px;
        background-color: #262527;
        border-radius: 20px;
        }
        
        
        .csimg {
        height: 70px;
        padding-left: 270px;
        margin-top: -275px;
        }
        
        .txtcs {
        font-size: 15px;
        height: 2px;
        width: 240px;
        }

        /* Java */
        .java {
          color: white;
          margin-left: 600px;
          margin-top: -164px;
          padding-top: 3px;
          padding-left: 20px;
          height: 160px;
          width: 400px;
          background-color: #262527;
          border-radius: 20px;
          }
          
          .javaimg {
          height: 70px;
          padding-left: 270px;
          margin-top: -275px;
          }
          
          .txtjava {
          font-size: 15px;
          height: 2px;
          width: 240px;
          
          }
          
          button {
              background-color: orange;
              border: black;
              border-radius: 20px;
          }

          a {
            text-decoration: none;
            color: black;
          }