@import url('https://fonts.googleapis.com/css2?family=Iceland&family=Silkscreen:wght@400;700&display=swap');

/* - variables - */

:root {
  --text-color: #dcdcdc;
  --link-color: #ef9fff;

  --shadow-color-primary: #9a86c799;
  --shadow-color-secondary-bright: #dcdcdc99;
  --shadow-color-secondary: #dcdcdc55;
  --shadow-color-secondary-dim: #dcdcdc22;
  --shadow-color-link-bright: #e982fd;
  --shadow-color-link: #e982fd99;
}

/* - resets & stuff - */

*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img {
    display: block;
    max-width: 100%;
}


/*- general -*/


html, body {
    font-family: monospace;
    background-color: #151515;
    background-image: url("../assets/bg.png");
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

main {
    margin: 1.5rem 10vw;
    flex: 1 0 auto;
}

img {
    box-shadow: 1px -1px 10px var(--shadow-color-primary), -1px 1px 10px var(--shadow-color-secondary-dim)
}

button {
    background-color: transparent;
    padding: 0 15px 2px 3px;
    color: var(--text-color);
    text-shadow: 0 -1px 3px var(--shadow-color-primary), 0 1px 3px var(--shadow-color-secondary-bright);
    border-radius: 0.5em;
    border: none;
}

p, li {
    font-size: 16px;
    color: var(--text-color);
    text-shadow: 0 -1px 3px var(--shadow-color-primary), 0 1px 3px var(--shadow-color-secondary);
    padding: 0;
}

p {
    line-height: 1.75;
}

h2 {
    background: linear-gradient(180deg, #ffffff 0%, #bbbbbb 19%, #ffffff 32%, #bbbbbb 33%, #ffffff 45%, #ffffff 65%, #bbbbbb 64%, #ffffff 75%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    font-family: "Iceland", sans-serif;
    text-shadow: 0 -1px 5px var(--shadow-color-primary), 0 1px 5px var(--shadow-color-secondary-bright);
    font-style: italic;
    text-transform: uppercase;
    font-size: 40px;
}

.h1 {
    font-size: 40px;
}

.hr2 {
    width: 98%;
    height: 2px;
    background-color: #ac8af511;
    box-shadow: -1px -1px 2px #ac8af511, 1px 1px 2px #81818111;
    border-radius: 50%;
    margin: 2px;
}

.small-text {
    font-size: 12px;
    color: #818181;
    text-shadow: 0 -1px 3px #383a6599, 0 1px 3px var(--shadow-color-secondary-dim);
}

.no-space {
    line-height: 1.25;
    padding-bottom: 0.25rem;
}


/*- links -*/


a {
    background: linear-gradient(180deg, var(--text-color) 50%, #dda0e2 100%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    text-shadow: 0 -1px 3px var(--shadow-color-link), 0 1px 3px var(--shadow-color-link);
    transition: all 0.3s ease 0s;
    position: relative;
    text-decoration: none;
}

a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -1px;
    left: 0;
    background-color: var(--link-color);
    box-shadow: -1px -1px 5px var(--shadow-color-link-bright), 1px 1px 5px var(--shadow-color-link-bright);
    transform: scaleX(0);
    transform-origin: left;
}

a:hover::after, a:active::after, a:focus::after {
    transform: scaleX(1);
    transition: transform 0.2s ease 0s;
}


/*- misc -*/


.dim {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 55px;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0;
    background-color: #00000055;
    pointer-events: none;
    z-index: 2;
}

.blur {
    padding-top: 20px;
    text-shadow: 12px -2px 10px #9a86c744, -12px 2px 12px #dcdcdc44;
}

.fullscreen {
    position: fixed;
    bottom: 0;
    right: 0.5vw;
    width: 50vw;
    pointer-events: none;
}

.center {
    text-align: center;
}

.no-shadow {
    box-shadow: none;
}


/*- header -*/


header {
    display: flex;
    align-items: center;
    padding: 8px 4vw 8px 1vw;
}

header img {
    position: relative;
    bottom: -14px;
    left: 16px;
}

.primary-nav li {
    display: inline-block;
    padding: 0 1vw;
    font-size: 24px;
}

.header-link {
    background: linear-gradient(180deg, #ffffff 0%, #bbbbbb 19%, #ffffff 32%, #bbbbbb 33%, #ffffff 45%, #ffffff 65%, #bbbbbb 64%, #ffffff 75%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    font-family: "Iceland", sans-serif;
    font-style: italic;
    list-style: none;
    text-shadow: 0 -1px 3px #9a86c777, 0 1px 3px #dcdcdc77;
    text-transform: uppercase;
}

span .header-link {
    text-transform: none;
}

.header-link:hover, .header-link:active, .header-link:focus {
    color: #f172f1;
    text-shadow: 0 -1px 5px var(--shadow-color-link), 0 1px 5px var(--shadow-color-link);
    transition: all 0.3s ease 0s;
    position: relative;
}

header span a::after {
    bottom: -4px;
}

header span {
    flex-grow: 1;
    position: relative;
    font-size: 28px;
    padding-left: 25px;
}

header span::after {
    content: '';
    position: absolute;
    width: 98%;
    height: 2px;
    bottom: -1px;
    left: 17px;
    background-color: #ac8af533;
    box-shadow: -1px -1px 2px #ac8af533, 1px 1px 2px #81818133;
    border-radius: 50%;
}

hr {
    border-radius: 50%;
    border-top: 2px solid var(--text-color);
    box-shadow: 0 -1px 5px var(--shadow-color-primary), 0 1px 5px var(--shadow-color-secondary-bright);
    z-index: 1;
}

/*- header (mobile) -*/

@media (max-width: 324px) {
    header img {
        display: none;
    }
}

@media (min-width: 721px) {
    header div input, header div span {
        display: none;
    }
}

@media (max-width: 720px) {

/*- changes to list -*/

    .primary-nav {
        position: absolute;
        left: -1000px;
        top: 40px;
        width: 150px;
        padding: 5px 5px 5px 20px;
        text-align: right;
        background: url(../assets/bg.png);
        transition: left 0.3s;
        opacity: 0;
        z-index: 2;
    }

    header div input:checked ~ nav {
        left: -8.5rem;
        opacity: 1;
    }

    header div input:checked ~ .dim {
        opacity: 1;
        transition: all 1s;
    }

/*- hamborgar -*/

    header div {
        position: relative;
        z-index: 2;
    }

    header div input {
        position: absolute;
        width: 33px;
        cursor: pointer;
        opacity: 0;
        z-index: 3;
        -webkit-touch-callout: none;
    }

    header div span, header div span::after, header div span::before {
        display: block;
        width: 33px;
        height: 4px;
        position: relative;
        background: #dcdcdc;
        box-shadow: -1px -1px 2px #ac8af599, 1px 1px 2px #818181;
        border-radius: 3px;
        z-index: 2;
        transition: transform 0.3s ease 0s, opacity 0.2s ease;
    }

    header div span::after {
        content: '';
        bottom: -4px;
        left: -25px;
    }

    header div span::before {
        content: '';
        bottom: 8px;
        left: -25px;
    }

    header div input:checked ~ span {
        transform: rotate(-45deg) translate(-2px, -1px);
    }

    header div input:checked ~ span::after, header div input:checked ~ span::before {
        opacity: 0;
    }
}


/*- home -*/


.home-decor {
    background-image: url(../assets/lines.png);
    height: 18vh;
    margin: 5vh 18vw 10vh 18vw;
    position: relative;
}

 .home-decor::before, .home-decor ~ .home-decor::after {
    content: '';
    position: absolute;
    width: 20vw;
    min-width: 225px;
    height: 30vh;
    bottom: -5vh;
    left: 0;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 15%;
}

.home-decor::before {
    background-image: url(../assets/painted-example.png);
} 

.home-decor ~ .home-decor::before {
    display: none;
}

 .home-decor ~ .home-decor::after {
    left: 27vw;
    background-image: url(../assets/cartoon-example.png);
} 

.home-decor h2 {
    font-size: 50px;
    letter-spacing: 0.10vw;
    position: absolute;
    top: 0;
    right: 1%;
}

.home-decor ~ .home-decor h2 {
    left: 5%;
}

.home-decor p {
    position: absolute;
    top: 65px;
    right: 4%;
    font-style: italic;
    text-align: right;
}

.home-decor ~ .home-decor p {
    text-align: left;
    left: 8%;
}

.home-decor button {
    font-size: 64px;
    font-style: italic;
    font-family: "Iceland", sans-serif;
    color: var(--link-color);
    text-shadow: 0 -1px 7px var(--shadow-color-link), 0 1px 7px var(--shadow-color-link);
    transition: all 0.3s ease 0s;
    text-transform: uppercase;
    letter-spacing: 0.15vw;
    position: absolute;
    bottom: -5%;
    right: 10%;
    border-radius: 0.2rem;
}

.home-decor button:hover {
    text-shadow: 0 -1px 7px var(--shadow-color-link-bright), 0 1px 7px var(--shadow-color-link-bright);
}

.home-decor ~ .home-decor button {
    right: inherit;
    left: 7vw;
    z-index: 1;
}

.home-decor button::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 6px;
    left: 0;
    background-color: var(--link-color);
    box-shadow: -1px -1px 5px var(--shadow-color-link-bright), 1px 1px 5px var(--shadow-color-link-bright);
    transform: scaleX(0);
    transform-origin: left;
}

.home-decor button:hover::after, .home-decor button:active::after, .home-decor button:focus::after {
    transform: scaleX(1);
    transition: transform 0.2s ease 0s;
}

.home-decor button a::after {
    content: none;
}

@media (max-width: 720px), (max-height: 800px) {
    .home-decor button {
        font-size: 37px;
    }
    .home-decor p {
        display: none;
    }
    .home-decor ~ .home-decor h2 {
        left: -10%;
    }
    .home-decor {
        height: 22vh;
    }
}

@media (max-width: 450px) {
    .home-decor {
        margin: 3vh 0 10vh 0;
    }
    .home-decor ~ .home-decor::after {
        left: inherit
    }
}

.home-decor button::before {
    content: '> ';
}

/* @keyframes blink {
    from {opacity: 1;}
    to {opacity: 0;}
}

.home-decor button::after {
    content: '|';
    animation: blink 0.33s cubic-bezier( 0.86, 0, 0.07, 1) 1s infinite alternate;
}


/*- about -*/


.about {
    width: 40vw;
}

@media (max-width: 720px) {
    .about {
        width: 75vw;
    }
    .fullscreen {
        width: 100vw;
    }
}

/*- gallery -*/

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.gallery img {
    max-height: 27vh;
    width: auto;
    margin: 2vw;
    padding-bottom: 8px;
    box-shadow: none;
    border-bottom: var(--text-color) 3px solid;
    border-radius: 1.5%;
    box-shadow: 0px 9px 7px -8px var(--shadow-color-secondary-bright);
}

.gallery img:hover {
    box-shadow: 0px 9px 7px -8px var(--shadow-color-link);
    border-bottom: var(--link-color) 3px solid;
    transition: border-bottom 0.2s ease 0s, box-shadow 0.2s ease 0s;
}

.gallery a::after {
    content: none;
}

@media (max-height: 500px) {
    .gallery img {
        max-height: 35vh;
    }
}


/*- footer -*/

footer {
    flex-shrink: 0;
    padding: 5px;
}

/*- reduced motion -*/

@media (prefers-reduced-motion) {
    @keyframes fade-in {
        from {opacity: 0;}
        to {opacity: 1;}
    }

    .primary-nav li a:hover::after, .header li a:active::after, .header li a:focus::after {
        transition: transform 0s;
    }

    .primary-nav li a:hover, .header li a:active, .header li a:focus {
        transition: all 0s;
    }

    header div span, header div span::after, header div span::before {
        transition: transform 0s, opacity 0s;
    }

    header div input:checked ~ span {
        animation: fade-in 0.3s;
    }

    header div input:checked ~ nav {
        transition: opacity 0.3s;
    }

    header div input:checked ~ .dim {
        transition: all 0s;
    }


}