@font-face {
    font-family: 'Dotte1';
    src: url(../fonts/Dottee-Regular.ttf);
}
@font-face {
    font-family: 'Dotte2';
    src: url(../fonts/Dottee-Condensed-Regular.ttf);
}
html,
body{
    min-height:100%;
    font-family: 'Dotte2';
}

.main-section{
    width:100%;
    min-height:100vh;
    background:#008080;
    padding:30px 0;
}

.content-box{
    min-height:100vh;
    background:#ffff00;
    padding:40px 20px;
}

.dot-btn:hover{
    transform: translateY(-7px);
}
.dot-btn{
    transition: ease-in 0.3s;
}
.profile-image{
    width:150px;
    height:150px;
    border-radius:50%;
}
.header-title p:first-child{
    font-family:'Dotte1';
    font-size:3.5rem;
}

.header-title p:last-child{
    font-family:'Dotte2';
    font-size:2rem;
}
.dot-btn-link{
    font-size:2rem;
    border-radius:15px;
    padding:15px;
}

.dot-btn-text{
    font-family:'Dotte1';
}
.dot-rounded{
    border-radius: 20px;
}
@media (max-width:992px){

    .profile-image{
        width:110px;
        height:110px;
    }

    .header-title p:first-child{
        font-size:3rem;
    }

    .header-title p:last-child{
        font-size:1.8rem;
    }

    .dot-btn-link{
        font-size:1.7rem;
    }

}
@media (max-width:768px){

    .profile-image{
        width:90px;
        height:90px;
    }

    .header-title p:first-child{
        font-size:2.5rem;
    }

    .header-title p:last-child{
        font-size:1.5rem;
    }

    .dot-btn-link{
        font-size:1.3rem;
        padding:12px;
    }

}
@media (max-width:480px){

    .profile-image{
        width:75px;
        height:75px;
    }

    .header-title p:first-child{
        font-size:2rem;
    }

    .header-title p:last-child{
        font-size:1.2rem;
    }

    .dot-btn-link{
        font-size:1rem;
        padding:10px;
    }

}