body{
    background-color: #F5F8FF;
    font-family: lexend;
}

.character-container {
    display: flex;
    flex-wrap: wrap;
    height: fit-content;
    justify-content: center;
    align-items: center;
    margin-left: 280px;
}

.links-container {
    display: flex;
    background-color: #fff;
    max-width: fit-content;    
    flex-direction: column;
    align-items: center;
    margin: auto;
    gap: 24px;
    border: #60A2EF 2px solid;
    padding: 32px 36px;
    box-shadow: 6px 6px 0 0 #5DA1EA;
    border-radius: 32px;    
}

.links{
    display: flex;
    align-items: center;
    gap: 32px;
}

button{
    cursor: pointer;
    transition: scale 0.3s ease;
}

button:hover{
    scale: 1.05;
}
#box-title{
    font-size: 24px;
}

.block-1{
    display: flex;
    gap: 32px;
    align-items: center;
}

.block-2{
    display: flex;
    gap: 32px;
    align-items: center;
}

#behance{
    font-family: lexend;
    background-color: #fff;
    color: #0073F7;
    width: 259px;
    font-size: 36px;
    padding: 24px 0;
    border: #0073F7 2px solid;
    box-shadow: 6px 6px 0 0 #0073F7;
    border-radius: 16px;  
}

#instagram{
    font-family: lexend;
    background-color: #fff;
    color: #F77E3E;
    width: 259px;
    font-size: 36px;
    padding: 24px 0;
    border: #F77E3E 2px solid;
    box-shadow: 6px 6px 0 0 #F77E3E;
    border-radius: 16px;  
}

#dribbble{
    font-family: lexend;
    background-color: #fff;
    color: #EC5D94;
    width: 259px;
    font-size: 36px;
    padding: 24px 0;
    border: #EC5D94 2px solid;
    box-shadow: 6px 6px 0 0 #EC5D94;
    border-radius: 16px;  
}

#motion{
    font-family: lexend;
    background-color: #fff;
    color: #179d39;
    width: 259px;
    font-size: 36px;
    padding: 24px 0;
    border: #179d39 2px solid;
    box-shadow: 6px 6px 0 0 #179d39;
    border-radius: 16px;  
}


@media screen and (max-width: 1280px) {
    .character-container {
        margin-left: 64px;
    }
    img{
        width: 600px;
    }
    .links-container {

    }
    .links {
        flex-direction: column;
        align-items: center;
    }
    button {
        width: 100%;
        font-size: 24px;
    }
    #box-title{
    font-size: 18px;
    }
    #behance, #instagram, #dribbble, #motion {
        font-size: 28px;
        padding: 16px 0;
    }
    
}

@media screen and (max-width: 670px) {
    .character-container {
        margin-top: 64px;
        margin-left: 44px;
    }
    img{
        width: 450px;
    }
    .links-container {
        margin-top: 24px;
        padding: 28px 32px;
        gap: 12px;
    }
    .links {
        flex-direction: column;
        align-items: center;
    }
    button {
        font-size: 18px;
    }
    #box-title{
        font-size: 12px;
    }
    .block-1, .block-2{
        flex-direction: column;
        align-items: center;
    }
    #behance, #instagram, #dribbble, #motion {
        font-size: 20px;
        padding: 16px 0;
    }
    
}

@media screen and (max-width: 400px) {
    .character-container {
        margin-top: 64px;
        margin-left: 28px;
    }
    img{
        width: 450px;
    }
    .links-container {
        margin-top: 24px;
        padding: 28px 32px;
        gap: 12px;
    }
    .links {
        flex-direction: column;
        align-items: center;
    }
    button {
        font-size: 18px;
    }
    #box-title{
    font-size: 12px;
    }

    .block-1, .block-2{
        flex-direction: column;
        align-items: center;
    }
    #behance, #instagram, #dribbbl, #motion {
        font-size: 20px;
        padding: 16px 0;
    }
    
}