.hyper_links {
    /* background: blue; */
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    Padding: 1rem;
}

.button_style {
    background: black;
    color: white;
    border-radius: 10px;
    border: none;
    padding: 8px 16px;
    width: 80px;
    height: 80px;
    border-bottom: 5px solid rgb(19, 40, 54);
    border-right: 5px solid rgb(19, 40, 54) ;
    outline: 0;
    }
    .button_style:hover {
        background: rgb(76, 83, 87);
    }

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}    

.Github_style {
    background-image: url("GH.png");
    background-size: cover;
    color: white;
    border-radius: 10px;
    border: none;
    padding: 8px 16px;
    width: 80px;
    height: 80px;
    border-bottom: 5px solid rgb(19, 40, 54);
    border-right: 5px solid rgb(19, 40, 54) ;
    outline: 0;
    -webkit-appearance: none;
    }
    .Github_style:hover {
        background: rgb(76, 83, 87);
    }    

.header{
    display: flex;
    width: 100%;
    justify-content: space-around;
    color: white;
    font-size: 150%; 
}
.subheader{
    display: flex;
    width: 100%;
    justify-content: space-around;
    color: white;
}

img {
    border-radius: 10px;
    width: 500px;
    height: 100%;
    padding:3px;
    border:3px solid #021a40;
    background-color:white;
}

body {
background-image:     linear-gradient(
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0.5)
  ), url("brick.jpg");
background-size: cover;
padding: 2rem;
font-family: Courier;

}

.main {
    padding: 2rem;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-around; 
    align-items: center;
    color: white;
    font-weight:bold;
}

.first {
   width: 75%;
   padding: 1rem;
  background: linear-gradient(
    rgba(0, 0, 0, 0.6),
    rgba(0, 0, 0, 0.6)
  ),
}
.second {
    width: 75%;
    padding: 1rem;
    background: linear-gradient(
        rgba(0, 0, 0, 0.6),
        rgba(0, 0, 0, 0.6)
      ),
}
.third {
    width: 75%;
    padding: 1rem;
    background: linear-gradient(
        rgba(0, 0, 0, 0.6),
        rgba(0, 0, 0, 0.6)
      ),
} 
.social-media {
    display: flex;
    width: 100%;
    justify-content: space-around;
    Padding: 1rem;
    margin: 3rem;
}
.bottom_button {
    background: #0E76A8;
    color: white;
    border-radius: 10px;
    border: none;
    padding: 8px 16px;
    width: 80px;
    height: 80px;
    font-size : 55px;
    font-weight: bold;
    border-bottom: 5px solid rgb(17, 36, 49);
    border-right: 5px solid rgb(17, 36, 49) ;
    outline: 0;
    -webkit-appearance: none;
}
.bottom_button:hover {
    background: rgb(112, 182, 230);
}


@media screen and (min-width: 768px) {
    .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        flex-direction: column;
        justify-content: space-around; 
        align-items: center;
       
    }}