@import url("./animations.css");
@import url("./fonts/fonts.css");

/* CSS RESET RULES */

* {
    padding: 0;
    margin: 0;
}

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

/* GENERAL DECORATION */

a:hover:not(nav a){
    color: var(--link-hover-color);
    animation-name: rainbow-fill;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 4s;
}

a {
    color: var(--link-color);
}

p {
    color: #7cc02e;
    font-family: NaturalMonoRegular;
    font-size: 1.1em;
    padding: 5px 0 5px 0;
}

h1, h2, h3, h4, h5, h6 {
    color: #55b04f;
    font-family: NaturalMonoBold;
}

#naviframebg {
    width: 100%;
    height: 100px;
    background-color: #fff7d5;
}


/* LAYOUT */

header h1, #maincontent {
    padding: 20px 50px;
}

body {
    background-color: #82b658;
    background-image: url("https://www.transparenttextures.com/patterns/batthern.png");
    line-height: 1.5;
}

main {
    background-color: #fff7d5;
    background-image: url("https://www.transparenttextures.com/patterns/ecailles.png");
    margin: 20px auto 20px auto;
    border-radius: 20px;
}

.container {
    display: flex;
    flex-wrap: nowrap;
}

.container > div {
    padding: 10px;
}

#maincontent {
    flex-grow: 1;
    padding-bottom: 50px;
}

@media only screen and (max-width: 899px) {
    main {max-width: 100%;}
}

@media only screen and (min-width: 900px) {
    main {max-width: 800px;}
}

@media only screen and (min-width: 790px) {
    .portfolioLink:before {content: "✿ ";}
}

/* HEADER */

header {
    text-align: center;
}

header h1 {
    font-size: 4em;
}

#headerImg {
    height: 100%;
    object-fit: cover;
    object-position: center center;
    width: 100% !important;
    transition: transform 0.5s, filter 0.5s;
    transform: scale(1.02);
}

#arm, #hand, #body {
    transform: scale(1.04);
}

#headerImgFrame {
    position: relative;
    overflow: hidden;
    height: 300px;
    background-image: url("../img/landscape1080.png");
    background-position: top;
    background-size: cover;
}

#body {
    position: absolute;
    left: 10%;
    top: 1%;
    height: 100%;
    object-fit: cover;
    width: 100% !important;
}

/* NAV DECORATION */

nav {
    padding: 20px 20px 0px 20px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

a {
    text-decoration: none;
}

.portfolioLink {
    font-family: NaturalMonoBold;
    color: rgb(221, 250, 202);
    padding: 5px 20px 5px 20px;
    border:solid 3px rgb(93, 184, 102);
    border-radius: 0.5rem;

    background-color: rgb(76, 158, 94);
    background-image: linear-gradient(360deg, rgb(156, 219, 120) 0%, rgba(76, 158, 143, 0.008));

    cursor: pointer;

    transition: background-color 0.2s,
                border-color 0.2s,
                background-image 0.2s;
}

.portfolioLink:hover {
    background-color: rgb(49, 146, 81);
    border:solid 3px rgb(93, 184, 102);
}

.portfolioLink:active {
    background-color: rgb(70, 164, 90);
    background-image: linear-gradient(360deg, rgb(178, 243, 140) 0%, rgba(76, 158, 143, 0.008));
    transition: background-color 0s,
                border-color 0s,
                background-image 0s;
}

#naviframe {
    background-color: #fff7d5;
}

#nav-links {
    list-style: none;
}

.nav-link {
    text-decoration: none;
}

.nav-link::before {
    content: "> "
}

#nav {
    font-family: NaturalMonoBold;
    font-size: large;
}