@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Merienda:wght@500;800&display=swap');

body {
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    margin: 0;
  }
  
.topnav {
    background-color: #333;
    overflow: hidden;
  }
  
.topnav a {
    color: #f2f2f2;
    font-size: 18px;
    float: left;
    padding: 14px 16px;
    text-align: center;
    text-decoration: none;
}
  
.topnav a:hover {
    background-color: #ddd;
    color: black;
}
  
.topnav a.active {
    color: white;
    font-family: 'Dancing Script', cursive;

}

.navright {
    float: right;
}
  
.topnav .icon {
    display: none;
}

a.anchor {
    display: block;
    position: relative;
    top: -50px;
    visibility: hidden;
}

hr {
    width: 60%;
}

#name {
    background-color: rgb(1, 52, 88);
    background-size: cover;
    background-position: center;
    color: #ffffff;
    font-size: 35px;
    height: 100%;
    padding: 20px;
    text-align: center;
}
  
#name h1 {
    font-size: 70px;
}
  
#name a {
    color: #fff;
    font-size: 25px;
}
  
#name a:hover {
    color: #e7e7e7;
}


/*portfolio*/
#projects {
    background-color: rgb(1, 52, 88);
    background-size: cover;
    background-position: center;
    color: #ffffff;
    font-size: 20px;
    height: 100%;
    padding: 20px;
    text-align: center;
}
  
#projects h1 {
    font-size: 70px;
}

.column {
    background-color:#bbb;
    border-radius: 25px;
    color:#fff;
    margin: 1%;
    float: left;
    width: 48%;
    min-height: 350px;
    display: block;
    text-decoration: none;
}

.column a {
    color: #fff;
    font-size: 25px;
    padding: 12px;
    text-align: center;
}
  
.column a:hover {
    color: #e7e7e7;
}

.column p {
    font-size: 20px;
    padding: 10px;
}

.row h2 {
    font-size: 35px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}


/*About me*/
#personal {
    background-color: rgb(1, 52, 88);
    background-size: cover;
    background-position: center;
    color: #ffffff;
    font-size: 20px;
    height: 100%;
    padding: 20px;
    text-align: center;
}
  
#personal h1 {
    font-size: 70px;
}

.about-me {
    font-size: 23px;
    margin: auto;
    max-width: 80%;
}

/*contact*/
#contact {
    background-color: rgb(1, 52, 88);
    background-size: cover;
    background-position: center;
    color: #ffffff;
    font-size: 35px;
    height: 100%;
    padding: 20px;
    text-align: center;
}
  
#contact h1 {
    font-size: 70px;
}




/* Mobile Screen*/
@media screen and (max-width: 844px) {
    .navright a:not(:nth-child(5n)) {display: none;}
    .topnav a.icon {
        display: block;
        float: right;
    }
}
  
@media screen and (max-width: 844px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    .topnav.responsive a {
        display: block;
        float: none;
        text-align: left;
    }
}

@media screen and (max-width: 710px) {
    .column {
      width: 97%;
      float: none;
    }
}