styles.css

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: #94c1f5;
    text-align: center;

}
body{
    font-size: 150%;
}
.top{
    background: #153e90;
    margin: 0;
  
}
.first-container{
    background-color: aliceblue;
    opacity: 0.9;
    margin:0 100px;
    padding: 30px;
    position: relative;
    
}
.firstbird {
    width: auto;
    position: absolute;
    top:30px;
    left:20px;
}
#firstparagraph{
display:inline-block;
}
.sea{
    width:50%;
}

.firsttext{
    font-size: 150%;
    font-weight: bold;
    font-family: 'Segoe Script', Tahoma, 'Geneva', Verdana, sans-serif;
}

h1{
    font-family: 'Segoe Script', Tahoma, 'Geneva', Verdana, sans-serif;
}

.profile-picture{
    height: 5%;
    border-radius: 10%;
    margin:10px;
}
.btn{
    border:solid 2px black;
    margin: 10px;
    padding: 10px;
    background: #153e90;
    border-radius: 3px;
    color: white;
    transition: all 0.3s ease;
}
.btn:hover{
    background: white;
    color: #153e90;
}

hr{
    
    border: 1px dotted #94c1f5;
    border-bottom: none;
    width: 6%;
    border-width: 4px;
    margin:10px auto;

}
.profile > p{
    padding: 10px;
}

@media screen and (max-width: 800px){
    .firstbird{
        width:10%;
        height: 8%;
       
    }
    .head{
        width:40%;
        height: 40%;
    }
    .phone{
        width:20%;
    }
    
    }

@media screen and (max-width: 500px){

.firsttext{
    font-size: 80%;
}
h1{
    font-size: 100%;
}
.first-container{
    margin: 0 20px;
}
.sea{
    width: 50%;
}
.firstbird{ 
    width:10%;
    height: 8%;
    position: absolute;
    top:10px;
    left: 5px;
}

body{
    font-size: 80%;
}


}