:root {
  --bg:rgb(126, 124, 124);
}

*{
    margin:0;
}

body{
    background-color:var(--bg)
}
/*Flex for the About Me,Work and the Contact me*/
header {
    position: relative;
    width: 100%;
    padding: 0%;
    margin: 0;
    background-color:black;
}

#Horiseon{
    overflow:hidden;
    width:auto;
}
#header {
    display: flex;
    position: relative;
}

header h1 {
    position: relative;
    font-size: 300%;
    color:red;
    padding-left: 6%;
    width:auto;
}

#htmll img{
    position:relative;
    left:-1.8%;
    width:60%;
}

#java img{
    position:relative;
    left:-1.8%;
    width:60%;
}

.bar {
    position:absolute;
    display: flex;
    font-size: 150%;
    text-align: right;
    right: 10%;
    top: 25%
}

.bar a {
    text-decoration: none;
    color: red; 
}

#Picofme {
    display: block;
    width: 10%;
    height: 20%;
}

.content {
    display: flex;
    flex-direction: column;
    margin-left: 5%;
    margin-right: 5%;
    font-size:120%;
}

article {
    text-align: center;
    padding-top: 5%;
}

article h2 {
    color:black;
    font-size: 250%;
    padding: 10px;
}

article p {
    color:black;
    font-size: 140%;
    margin-right: 15%;
    margin-left: 15%;
}

#Work  {
    position: relative;
    background-color:var(--bg);
    bottom: 12%;
}

article h1{
    position:relative;
    font-size:200%;
}

#Contact {
    padding: 20%;
    text-align:left;
}

#Contact nav h2{
    background:black;
    color:red;
    font-size:220%;
}

#Contact a {
    font-size: 150%;
    text-decoration: none;
    color:black; 
}

@media screen and (max-width: 768px) {
    header {
        width: 110%;
    }
    header h1 {
        font-size: 210%;
    }
    .bar {
        font-size: 110%;
    }
    #Picofme {
        width: 110%;
        height: 20%;
        border-bottom: 21px solid var(--bg1);
    }
    article p {
        font-size: 115%;
    }


    #htmll img {
        width: 60%;
        height: 60%;
      }
    .java img {
        flex: 1;
        width: 60%;
        height: 60%;
      }
  }
@media screen and (max-width: 768px) {
    header {
        width: 110%;
    }
    header h1 {
        font-size: 210%;
    }
    .bar{
        font-size: 110%;
    }
    #PicofMe {
        width: 40%;
        height: 20%;
    }
    article p {
        font-size: 110%;
    }

    #Work{
    width:60%;
    height:60%;
      }
  }