body{
    margin:0;
    height:100%;
    display: flex;
    flex-direction: column;
}
#portofolioPhoto{
    border: inset;
    border-radius: 25px;
    height: 190px;
    width: 140px;
    margin-top: 1rem;
}

#card{
    background-image: url(images/sw-bg.jpg);
    background-size: contain;
}

h1{
    font-family: "Merienda",Helvetica !important;
    font-size: 5em;
}

#header{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 10px;

}
#header p{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}
#header h1{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.container3{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    align-content: center;
    gap: 2rem;
    background-image: url(images/orangebg.jpg);
    background-size: auto;
    padding: 2rem;
    
}

.card-link {
    margin-right: 20px;
    margin-left: 20px;
    line-height: 1.8;
    text-align: justify;
}
#column2 {
    margin-left: 43px;
}
#box1{
    height: 350px;
}

.column1{
    border-radius: 30px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    padding: 2rem;
    background-color: #ffbd59;
    border: inset;
}
.column2{
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
    padding: 2rem;
    background-color: #ef9308c0;
    border: inset;
    margin-left: 1rem;
}

#box2,#box3{
    height: 350px;
    border-radius: 30px;
    border: inset;
    width: 100%;
    padding: 2rem;
    padding-top: 2rem;
    background-color: #ffbd59;
    align-items: center !important;
    justify-content: center;
    align-content: center;
}
p{
    font-size: 1em;
    font-family: Helvetica, sans-serif;
    color: #0a0a0a;
}

h2{
    font-family: "Merienda",Helvetica;
}

label{
    font-family: "Merienda",Helvetica;
    width: 100px;
    font-size: 1em;
}

form{
    margin-top: 2rem;
}

.required:after{
    content:"*";
    color: red;
}

@media screen and (max-width:2037px){
    #box2{
        margin-bottom: 150px;
    }
}

@media screen and (max-width: 836px){
    #box1{
        margin-top: 600px;
    }
}

@media screen and (max-width: 526px){
    .container3{
        margin-top: 550px;

    }
}