.container {
    display: flex;
    flex-wrap: wrap;
}
img {
    width: 60%;
    height: 70%;
    border-radius: 50%;
}
.fa {
    padding: 20px;
    font-size: 30px;
    width: 70px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
    background: #3B5998;
    color: white;
}
.fa-github {
    background: black;
    color: white;
}
.box {
    width: 100%;
    height: 400px;
}

.box1 {
    background-color: DarkOrange;

}
.box2 {
    background-color: YellowGreen	;

}
.introbox{
    width: 80%;
    height: 400px;
    margin: 0 auto;
}
.box3 {
    background-color: MediumAquamarine;
    height:320px;

}
.edubox{
    width: 50%;
    height: 320px;
    margin: 0 auto;
}
.box4 {
    background-color: gold;
    height: 220px;

}
.box5 {
    background-color: LightSeaGreen;
    height: 330px;

}
.techbox{
    width: 30%;
    height: 330px;
    margin: 0 auto;
}
.box6 {
    background-color: RosyBrown;
    height: 300px;

}
@media screen and (min-width: 250px) {
    .box2 {
        height: 810px;
    }
    .box3{
        height: 560px ;
    }
    .edubox{
        width: 70%;
        margin: 0 auto;
    }
    .box4 {
        height: 380px;

    }
    .techbox{
        width: 70%;
        margin: 0 auto;
    }
    .box5 {
        height: 350px;

    }
    .box6 {
        height: 660px;

    }
}
@media screen and (min-width: 300px) {
    .box2 {
        height: 720px;
    }
    .box3{
        height: 540px ;
    }
    .box4 {
        height: 340px;

    }
    .box6 {
        height: 600px;

    }
}
@media screen and (min-width: 390px) {
    .box2 {
        height: 600px;
    }
    .box3{
        height: 400px ;
    }
    .box4 {
        height: 320px;

    }
    .box6 {
        height: 460px;

    }
}
@media screen and (min-width: 450px) {
    .box2 {
        height:530px;
    }
    .box3{
        height: 380px ;
    }
    .box4 {
        height: 250px;

    }
    .box5 {
        height: 360px;

    }
    .techbox{
        width: 30%;
        margin: 0 auto;
    }
    .box6 {
        height: 380px;

    }
}
@media screen and (min-width: 650px) {
    .box2 {
        height:450px;
    }
    .box3{
        height: 340px ;
    }
    .box4 {
        height: 220px;

    }
    .box5 {
        height: 330px;

    }
    .techbox{
        width: 30%;
        margin: 0 auto;
    }
    .box6 {
        height: 320px;

    }
}
@media screen and (min-width: 800px) {
    .box1 {
        height: 400px;
    }

    .box2 {
        height:420px;
    }
    .box3{
        height: 330px ;
    }
    .edubox{
        width: 50%;
        margin: 0 auto;
    }
    .box4 {
        height: 200px;

    }
    .box5 {
        height: 330px;

    }
    .techbox{
        width: 30%;
        margin: 0 auto;
    }
    .box6 {
        height: 270px;

    }
}
@media screen and (min-width: 1150px) {
    .box1 {
        width: 30%;
        height: 400px;
    }
    .box2 {
        width: 70%;
        height: 400px
    }

    .box3, .box4, .box5, .box6 {
        width: 100%;
    }
    .edubox{
        width: 50%;
        margin: 0 auto;
    }
    .techbox{
        width: 30%;
        margin: 0 auto;
    }
    .box4 {
        height: 180px;

    }
    .box6 {
        height: 250px;

    }
}