:root {
    --canvasColor: #f9f9f9;
}

* {
    box-sizing: border-box;
}

main {
    --neutralShade1: #f2f2f2;
    --neutralShade2: #e8e9e9;
    --neutralShade3: #d1d3d4;
    --neutralShade4: #babdbf;
    --neutralShade5: #808488;
    --neutralShade6: #666a6d;
    --neutralShade7: #4d5052;
    --neutralShade8: #212122;
    --grayColor: #999;
    --lightGrayColor: #ddd;
    --borderRadius: 6px;
    --boxShadow: 0 2px 5px rgba(#333, 0.2);
    margin: 3em auto 8em;
    color: var(--foregroundColor);
    text-align: left;
}

/* Typography */
h3 {
    font: 700 20px/1.2 "Poppins", sans-serif;
}

h5 {
    font: 500 18px/1.2 "Poppins", sans-serif;
    margin-bottom: 10px;
}

/* Button styles */
a.button {
    outline: none;
    width: 100%;
    text-align: center;
    display: inline-block;
    border: none;
    font: 500 16px/1 "Poppins", sans-serif;
    padding: 20px;
    cursor: pointer;
    border-radius: var(--borderRadius);
    background: var(--primaryColor);
    color: var(--backgroundColor);
    position: relative;
    top: 0;
    transition: 0.2s ease;
    text-decoration: none !important;
}

a.button:hover {
    top: -3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

a.button:active {
    background: var(--primaryShade4);
    outline: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    top: 0;
}

/* Variation styling */
input.variation {
    display: none;
}

input.variation + label {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 70px 20px 20px;
    border-radius: 50%;
    cursor: pointer;
    border: 6px solid #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
}

#bluepurple + label {
    background: linear-gradient(to left, #673ab7 50%, #03a9f4 50%);
}

#bluepurple:checked ~ main {
    --backgroundColor: #fff;
    --foregroundColor: #111;
    --primaryColor: #ff6b35;
    --primaryShade1: #e1f5fe;
    --primaryShade2: #b3e5fc;
    --primaryShade3: #4fc3f7;
    --primaryShade4: #0288d1;
    --primaryShade5: #0277bd;
    --secondaryColor: #ff6b35;
    --secondaryShade1: #ede7f6;
    --secondaryShade2: #d1c4e9;
    --secondaryShade3: #9575cd;
    --secondaryShade4: #512da8;
    --secondaryShade5: #311b92;
}

/* Profile card styles */
.profile {
    position: relative;
    background: var(--backgroundColor);
    color: var(--foregroundColor);
    box-shadow: 0 3px 15px rgba(51, 51, 51, 0.2);
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);*/
    border-radius: 12px;
    border: 1px solid #333333;
    /*border-radius: 10px;*/
    transition: 0.2s ease;
}

.profile__image img {
    width: 100%;
    max-width: 350px;
    height: 250px;
    object-fit: cover;
}

.profile__details{
    /*width: 100%;*/
    width: 300px;
}

.profile__stats__title {
    color: var(--grayColor);
    text-transform: uppercase;
    font-size: 16px;
    margin-bottom: 3px;
}

.profile-default {
    min-width: 320px;
    max-width: 370px;
    margin: auto 30px;
    overflow: hidden;
    display: grid;
    grid-gap: 10px;
}

.profile-default .profile__image {
    grid-column: span 3;
}

.profile-default .profile__image img {
    border-bottom: 7px solid var(--secondaryColor);
}

.profile-default .profile__info {
    /*min-width: 300px;*/
    width: 300px;
    grid-column: span 3;
    margin: 5px 25px 0;
}
.profile__info__extra{
    color: #5d5d5d;
}

.profile-default .profile__stats {
    margin: 5px 25px;
}

.profile-default .profile__cta {
    grid-column: span 3;
    margin: 0 25px 25px;
}