html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Source Code Pro', monospace;
    color: #444;
    font-size: 1.25vw;
    margin: 4vw;
}

h1 {
    margin: 0;
}

h2 {
    font-size: 2.5vw;
    margin: 4vw 0 1vw;
}

h2.first {
    margin-top: 0;
}

h2 span {
    color: #fff;
    padding: 0.15vw 1vw;
    border-radius: 0.4vw;
    background-color: #444;
}

h3 {
    font-family: 'Satisfy', cursive;
    font-size: 3vw;
    line-height: 1;
    margin: 3vw 0 0;
}

h3.first {
    margin-top: 1vw;
}

h3 sup {
    font-family: monospace;
    color: #fff;
    font-size: 1vw;
    padding: 0.25vw 0.5vw;
    border-radius: 0.4vw;
    background-color: #444;
}

h4 {
    font-size: 1.5vw;
    margin: 0 0 1vw;
}

a,
a:hover,
a:visited {
    color: #444;
    text-decoration: none;
}

main {
    width: 92vw;
    aspect-ratio: 1920 / 2950;
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 2vw;
}

header {
    position: relative;
    height: 23vw;
    border-radius: 2vw;
    background-image: url(./header.jpg);
    background-size: cover;
    background-position: center center;
}

header .headline {
    position: absolute;
    top: 2vw;
    left: 25vw;
    right: 25vw;
    height: 12vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    line-height: 1;
    border-radius: 2vw;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.5); 
}

header .headline .name {
    font-family: 'Kaushan Script', cursive;
    font-size: 5vw;
    font-weight: 900;
}

header .headline .title {
    font-family: 'Dancing Script', cursive;
    color: #444;
    font-size: 3.5vw;
    font-weight: 900;
}

header .profile {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 14vw;
    height: 14vw;
    border: 0.5vw solid #fff;
    box-shadow: 0 0 0.8vw rgba(0, 0, 0, 0.75);
    border-radius: 8vw;
    transform: translate(-50%, 50%);
    transition: width cubic-bezier(0.4, 0, 0.45, 1.5) 250ms, height cubic-bezier(0.4, 0, 0.45, 1.5) 250ms, border-radius cubic-bezier(0.4, 0, 0.45, 1.5) 250ms;
    will-change: width, height, border-radius;
    background-image: url(./profile.jpg);
    background-size: cover;
    background-position: center;
    z-index: 1;
}

/* header .profile:hover {
    width: 25vw;
    height: 17vw;
    border-radius: 3vw;
} */

address {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 1.4vw;
    font-size: 1.1vw;
    padding: 1vw 2vw 0;
}

address .left {
    padding-right: 9vw;
}

address .right {
    text-align: right;
    padding-left: 9vw;
}

section {
    position: relative;
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-gap: 3vw;
    padding: 5vw 0 1vw 2vw;
}

section .left {
    grid-column: 1;
    grid-row: 1;
}

section .right {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin-top: -1.25vw;
}

section aside {
    position: relative;
    padding: 2vw;
    border-radius: 1vw 0 0 1vw;
    background-color: #c7deed;
    background-image: url(./code.jpg);
    background-size: cover;
    background-position: 0% center;
    background-blend-mode: lighten;
    animation: aside-animation 900s ease-in-out infinite;
}

section aside:not(:last-of-type) {
    margin-bottom: 1.5vw;
}

section aside h2 {
    font-size: 1.75vw;
}

section aside h2+sup {
    display: block;
    margin: -1.1vw 0 1vw 3.3vw;
}

section aside s {
    text-decoration: none;
    font-size: 1vw;
    line-height: 3;
    padding: 0.5vw 0.75vw;
    white-space: nowrap;
    border-radius: 0.5vw;
    background-color: rgba(255, 255, 255, 0.5);
}

section aside ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

section aside ul:not(.progress) {
    margin-left: 1vw;
}

section aside ul li {
    font-size: 1.2vw;
}

section aside ul li small {
    float: right;
}

section aside ul:not(.progress) li::before {
    content: '>';
    position: absolute;
    transform: translateX(-1vw);
}

section aside ul.progress li {
    position: relative;
    padding-bottom: 0.25vw;
}

section aside ul.progress li:not(:last-of-type) {
    margin-bottom: 1vw;
}

section aside ul.progress li::before,
section aside ul.progress li::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 0.25vw;
}

section aside ul.progress li::before {
    width: var(--progress);
    background-color: #444;
    z-index: 1;
}

section aside ul.progress li::after {
    right: 0;
    background-color: #fff;
}

section p {
    margin: 0 0 1vw;
}

section p u {
    text-decoration: none;
    background-color: rgba(199, 222, 237, 0.5);
}

@keyframes aside-animation {
    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

@media only screen and (max-width: 1023px) {
    body {
        font-size: 16px;
    }

    h2 {
        font-size: 1.4rem;
    }

    h2 span {
        border-radius: 0.3rem;
    }

    h3 {
        font-size: 1.4rem;
    }

    h3 sup {
        font-size: 0.75rem;
        border-radius: 0.2rem;
    }
    
    h4 {
        font-size: 0.8rem;
    }

    header .headline .name {
        font-size: 5vw;
    }
    
    header .headline .title {
        font-size: 4vw;
    }

    address {
        font-size: 0.5rem;
    }

    section {
        display: block;
        padding-right: 2vw;
    }

    section aside {
        width: auto;
        border-radius: 1vw;
    }

    section aside:nth-child(1) {
        grid-column: 1 / 3;
        margin-bottom: 0;
    }

    section aside h2 {
        font-size: 1rem;
    }

    section aside h2+sup {
        position: absolute;
        top: 2vw;
        right: 2vw;
        font-size: 0.5rem;
        margin: 0;
    }

    section aside s {
        font-size: 0.75rem;
        line-height: 2.25;
        border-radius: 0.3rem;
    }
    
    section aside ul li {
        font-size: 0.65rem;
    }

    section aside ul:not(.progress) li::before {
        transform: translateX(-0.4rem);
    }

    section .left {
        margin-top: 3vw;
    }

    section .right {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 3vw;
        margin-top: 0;
    }
}

@media print { 
    body {
        margin: 2vw 4vw;
    }
	
	body main section {
	    display: block;
		padding: 5vw 2vw 1vw;
	}
	
	body main section .right {
		float: none;
	}
	
	body main section .right aside {
		border-radius: 1vw;
	}
	
	body main section .right aside:nth-child(1) {
		
	}

	body main section .right aside:nth-child(2) {
	    margin-right: 2vw;
	}
	
	body main section .right aside:nth-child(2),
	body main section .right aside:nth-child(3) {
		width: 39vw;
	    float: left;
	}
	
	body main section .left {
		float: none;
	}

    header .profile {
        box-shadow: none;
    }
}