body {
    margin: 0px;
    padding: 0px;
    font-family: roboto;
}

body {
    font-family: helvetica, arial;
    font-size: 12px
}


.ui-widget-header {
    background: none;

}

.column {
    background-color: #343a40;
    min-height: 96vh;
    font-size: 50px;
    text-align: center;
    color: #00000070;
    border-radius: 4px;
    margin: 18px 0px;
    padding: 16px 0px;
    box-shadow: 0px 3px 6px #0000001b;

}

.portlet {
    font-size: 26px;
    text-align: left;
    margin: 10px 20px;
    border-radius: 4px;
    border: none;
}

.portlet-header {
    background-color: white;
    font-size: 20px;
    color: #00000070;
    text-align: left;
    border-radius: 4px;
    min-height: 40px;
    padding: 4px 10px;
    font-family: sans-serif;
}

.portlet-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -8px;
}

.portlet-content {
    padding: 0.4em;
}

.portlet-placeholder {
    border: 2px dashed #ffffff;
    margin: 0 auto;
    height: 40px;
    width: 80%;
}

.ui {

    background-color: #00B955;
    font-size: 20px;
    color: #ffffff;
    text-align: left;
    border-radius: 4px;
    min-height: 40px;
    padding: 4px 10px;
    font-family: sans-serif;
}
.ui:hover {

    background-color: rgb(0, 148, 69);
    transform: scale(1.1);
    transition: 0.1s;
}

.ux {
    background-color: #5F90FF;
    font-size: 20px;
    color: #ffffff;
    text-align: left;
    border-radius: 4px;
    min-height: 40px;
    padding: 4px 10px;
    font-family: sans-serif;
}
.ux:hover {

    background-color: rgb(49, 100, 218);
    transform: scale(1.1);
    transition: 0.1s;
}
.backend {

    background-color: rgb(70, 125, 252);
    font-size: 20px;
    color: #fff;
    text-align: left;
    border-radius: 4px;
    min-height: 40px;
    padding: 4px 10px;
    font-family: sans-serif;
}
.backend:hover {

    background-color: rgb(49, 100, 218);
    transform: scale(1.1);
    transition: 0.1s;
}
.integration {

    background-color: rgb(222, 82, 82);
    font-size: 20px;
    color: #ffffff;
    text-align: left;
    border-radius: 4px;
    min-height: 40px;
    padding: 4px 10px;
    font-family: sans-serif;
}
.integration:hover {

    background-color: rgb(199, 62, 62);
    transform: scale(1.1);
    transition: 0.1s;
}

.devops {

    background-color: #aaaaaa;
    font-size: 20px;
    color: #ffffff;
    text-align: left;
    border-radius: 4px;
    min-height: 40px;
    padding: 4px 10px;
    font-family: sans-serif;
}
.devops:hover {

    background-color: #969696;
    transform: scale(1.1);
    transition: 0.1s;
}

.imgicon {
    width: 20px;
    float: right;
    padding-top: 5px;
}


.internship {
    background-color: #FFAB57;
    font-size: 20px;
    color: #fff;
    text-align: left;
    border-radius: 4px;
    min-height: 40px;
    padding: 4px 10px;
    font-family: sans-serif;
}
.internship:hover {

    background-color: rgb(245, 148, 51);
    transform: scale(1.1);
    transition: 0.1s;
}

.col-4 {
    background-color: #000;
}

.h1,
h1 {
    color: #fff;
}

.boattab {
    font-size: 26px;
    text-align: left;
    margin: 10px 20px;
    border-radius: 4px;
    border: none;
}

.boat {

    background-color: #343a40;
    min-height: 96vh;
    font-size: 50px;
    text-align: center;
    color: #00000070;
    border-radius: 4px;
    margin: 18px;
    padding: 16px 0px;
    box-shadow: 0px 3px 6px #0000001b;

}

.boaticon {
    width: 200px;
    float: left;
    padding: 15px;
    opacity: 10%
}