:root {
    --desktop-padding: 80px;
    --primary-color: #512886;
    --hover-color: #287486;
  }
  

html {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 17px;
color: #202020;
background-color: #000000;
}

body {
background-color: #ffffff;
display: flex;
flex-direction: column;
min-height: 90vh;
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(240,242,246,1) 40%); 
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}

/* Undo UiKit Styles */
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, .uk-heading-2xlarge, .uk-heading-large, .uk-heading-medium, .uk-heading-small, .uk-heading-xlarge, h1, h2, h3, h4, h5, h6 {
font-family: inherit;
}

.hero {
margin-left: 0;
margin-right: 0;
padding: 50px 30px;
position: relative;
margin-top: 40px;
min-height: calc(60vh - 152px);
border-radius: 20px;
overflow: hidden;
/*clip-path: inset(76px 30px 0 30px round 20px);*/
background-color: #000000;
color: #ffffff;
position: relative;
display: flex;
align-content: flex-start;
}

    .gradient-background {
    background: linear-gradient(to bottom right, #000000 35%, var(--primary-color) 51%, var(--primary-color) 61%, #000000 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + 300px);
    }
    .gradient-background + * {
    position: relative;
    }

    .hero h1 {
    font-size: max(5vw, 3rem);
    margin: 0;
    font-weight: 600;
    color: inherit;
    }

.large {font-size: 1.4em;}
.small {font-size: 0.8em;}
.rotated-text {
writing-mode: vertical-lr;
transform: rotate(180deg);
}

.row {
display: flex;
justify-content: space-between;
}
    .row.center-vertically {
    align-items: center;
    }



.wrap {
max-width: 1300px;
width: 100%;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}

.block {
margin-top: 100px;
}

.card {
padding: 20px;
border-radius: 20px;
box-shadow: rgba(0,0,0,.04) 0 1px 0,rgba(0,0,0,.05) 0 2px 7px,rgba(0,0,0,.06) 0 12px 22px;
box-sizing: border-box;
background-color: #ffffff;
}
    .card + .card {
    margin-top: 25px;
    }
    a.card {display: block;}
    a.card:hover {
    background-color: #512886;
    color: #ffffff;
    box-shadow: none;
    }
    a.card:hover h1,
    a.card:hover h2,
    a.card:hover h3,
    a.card:hover h4,
    a.card:hover h5 {
    color: #ffffff;
    }

a {
color: inherit;
text-decoration: none;
transition: all 0.3s ease;
}
    a:hover {
    color: var(--hover-color);
    }


h1 {}

h2 {
font-weight: 500;
}

/*ul {
list-style-type: none;
}

ul:not(.card) > li {
margin-top: 20px;
position: relative;
padding-left: 0;
}

    ul:not(.card) > li::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 2px;
    background-color: var(--primary-color);
    left: -10px;
    }*/

#hidden-content {
position: relative;
min-height: 210px;
}
    #hidden-content form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

.skills-grid {
font-family: monospace;
}

.dark-background {
background-color: #512886;
}

.blur {
color: transparent;
text-shadow: 0 0 12px rgba(0,0,0,0.5);
}

.uk-slider-items li  {
padding-top: 10px;
padding-bottom: 30px;
}
.uk-slider-items li > .card {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}

.uk-modal-dialog {
width: 850px;
border-radius: 20px;
}

footer {
margin-top: 50px;
padding: 20px 10px;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}

@media only screen and (min-width: 1401px) {
    .column {
    margin-left: var(--desktop-padding);
    }
    .column .row {
    margin-left: calc(0px - var(--desktop-padding));
    }
}


.button-anon-pen {
    width: 200px;
    background-image: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
    text-align: center;
    margin: 0 auto;
    position: relative;
    color: #fff;
    text-decoration: none;
    display: block;
    font-weight: normal;
    border-radius: 6px;
    overflow: hidden;
}

.button-anon-pen:hover {
    -webkit-animation: play 1.6s ease-in infinite;
}

.button-anon-pen span {
    padding: 14px 0;
    font-size: 22px;
    display: block;
    margin: 3px;
    background: #000;
    border-radius: 3px;
}

@-webkit-keyframes play {
    0% {
        background-position: 0px;
    }
    20% {
        background-position: -110px;
    }
    35% {
        background-position: -180px;
    }
    50% {
        background-position: -210px;
    }
    80% {
        background-position: -350px;
    }
    100% {
        background-position: -390px;
    }
}

@media only screen and (min-width: 960px) {
    html {
    font-size: 21px;
    }
    .wrap {
    padding-left: 20px;
    padding-right: 20px;
    }
    .hero {
    margin: 76px 30px 0 30px;
    align-content: center;
    padding: var(--desktop-padding);
    }
    .hero .row {
    align-items: center;
    }
    .card {
    padding: 50px;
    }
}

@media (min-width: 1200px) {
    .uk-grid > .uk-grid-margin.block {
    margin-top: 100px;
    }
}

@media (min-width: 1300px) {
    .overflow-right {
    width: calc((100vw - 1300px) / 2 + 1290px);
    }
}

@media (min-width: 1320px) {
    .wrap {
    box-sizing: content-box;
    }
}