:root {
    --dark: #222222;
    --light: #fff0f5;
    --favorite: #aa8fb5;
    --hf: #ffdae2;
    --hoverbg: #eb4e56;
    --sky: #ffbb8a;
    --favdark: #d1afde;
    --card-border: 15px;
    --card-border-radius: 40px;
    --tile-border: 35px;
}

* {
    box-sizing: border-box;
    scroll-margin-top: 170px;
}

body {
    clear: none;
    text-align: center;
    color: var(--dark);
    background-clip: border-box;
    align-self: center;
    min-height: 100%;
    max-width: 100%;
    margin-right: auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
    font-weight: 450;
    line-height: 3vb;
    background: -webkit-linear-gradient(left top, var(--sky), var(--favdark));
    background: -o-linear-gradient(bottom right, var(--sky), var(--favdark));
    background: -moz-linear-gradient(bottom right, var(--sky), var(--favdark));
    background: linear-gradient(to bottom right, var(--sky), var(--favdark));
}

.hero-image {
    margin-top: 0;
    margin-bottom: 40px;
    border-bottom: solid var(--dark) 2px;
    background-image: url("../images/OVQO8098.JPEG");
    height: 1100px;
    max-width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 998;
}

.hero-text {
    text-align: center;
    position: absolute;
    font-size: larger;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 42px;
    margin: 0 auto;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--dark);
    text-shadow: 0px 4px 4px #282828;
}

#top {
    margin-top: 0px;
    margin-bottom: auto;
    padding: 40px;
    border-bottom: solid var(--dark) 2px;
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: var(--hf);
    h2 {
        font-size: 100%;
    }
    ul {
        display: flex;
        flex-direction: row;
        flex: 0 auto;
        justify-content: center;
        align-items: flex-start;
        margin-top: 0;
        margin-bottom: 0;
        padding-left: 0;
    }
    li {
        padding-left: 3%;
        padding-right: 3%;
        list-style-type: none;
        text-align: center;
        a {
            text-decoration: none;
            color: var(--dark);
            font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-weight: 500;
            letter-spacing: 3px;
        }
        a:hover {
            text-decoration: none;
            color: var(--light);
        }
    }
}

h3 {
    font-size: 28px;
    font-weight: bolder;
    color: var(--dark);
    letter-spacing: 2px;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: var(--light);
}

.card-about {
    display: flex;
    justify-content: space-evenly;
    flex: 4;
    margin-bottom: 20px;
    margin-right: 20px;
    margin-left: 20px;
    align-items: left;
    border: solid var(--light) var(--card-border);
    border-radius: var(--card-border-radius);
    padding: 25px;
    min-height: 350px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--dark);
    color: var(--light);
    #self-image {
        display: flex;
        align-items: center;
        max-height: 300px;
        max-width: 225px;
        flex: 0 0 200px;
        border: solid var(--light);
        border-radius: var(--tile-border);
    }
    p {
        text-align: left;
        margin-left: 20px;
        margin-right: 20px;
        max-width: 425px;
    }
}

.card-recent-work {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 4;
    justify-content: space-evenly;
    margin: 20px;
    align-items: flex-start;
    border: solid var(--light) var(--card-border);
    border-radius: var(--card-border-radius);
    padding: 25px;
    min-height: auto;
    max-width: 100%;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    line-height: 48px;
    background-color: var(--dark);
    .recent-work {
        border: solid var(--light) 3px;
        border-radius: var(--tile-border);
        background-color: var(--favorite);
        padding: 10px;
        margin: auto;
        flex: 0 0 300px;
        img {
            display: flex;
            align-items: center;
            width: 500px;
            margin: 10px;
            border: solid transparent 5px;
            border-radius: var(--tile-border);
            opacity: 1;
            transition: 2s;
        }
        img:hover {
            opacity: .5;
        }
        .app-name {
            color: white;
            font-size: 64px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: 1s;
            -webkit-text-stroke-width: .5px;
            -webkit-text-stroke-color: var(--dark);
            text-shadow: 0px 4px 4px #282828;
            text-align: center;
        }
        .app-name:hover {
            opacity: 1;
        }
    }
}

.card-recent-work section:hover {
    transform: scale(1.05);
    transition:transform 0.5s ease-in-out;
    background-color: var(--hoverbg);
}

.card-projects {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 4;
    justify-content: space-evenly;
    z-index: 997;
    margin: 20px;
    align-items: flex-start;
    border: solid var(--light) var(--card-border);
    border-radius: var(--card-border-radius);
    padding: 25px;
    min-height: auto;
    max-width: 100%;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: var(--dark);
    .container {
        margin: 20px;
        border: solid var(--light) 3px;
        border-radius: var(--tile-border);
        padding: 25px;
        background-color: var(--favorite);
        img {
            display: flex;
            align-items: center;
            max-width: 200px;
            border: solid transparent 5px;
            border-radius: var(--tile-border);
        }
        .app-name {
            color: white;
            font-size: 42px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: 1s;
            -webkit-text-stroke-width: .5px;
            -webkit-text-stroke-color: var(--dark);
            text-shadow: 0px 4px 4px #282828;
        }
        .app-name:hover {
            opacity: 1;
        }
    }
}

.card-projects section:hover {
    transform: scale(1.05);
    transition:transform 0.5s ease-in-out;
    background-color: var(--hoverbg);
}

.float-left {
    display: flex;
    float: left;
    margin-right: 50px;
}

#blog {
    display: flex;
    justify-content: space-evenly;
    flex: 4;
    margin-bottom: 20px;
    margin-right: 20px;
    margin-left: 20px;
    align-items: left;
    border: solid var(--light) var(--card-border);
    border-radius: var(--card-border-radius);
    padding: 25px;
    min-height: 350px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--dark);
    color: var(--light);
    h3 {
        color: var(--dark);
    }
}

.mastrena {
    position: relative;
    display: inline;
    border-bottom: 1px dotted var(--light)
}

.mastrena-tooltip {
    visibility: hidden;
    width: 400px;
    background-color: black;
    color: #fff;
    text-align: center;
    border: solid white 2px;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 990;
}
.mastrena:hover .mastrena-tooltip {
    visibility: visible;
}

.qaqc {
    position: relative;
    display: inline;
    border-bottom: 1px dotted var(--light)
}

.qaqc-tooltip {
    visibility: hidden;
    width: 400px;
    background-color: black;
    color: #fff;
    text-align: center;
    border: solid white 2px;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 990;
}
.qaqc:hover .qaqc-tooltip {
    visibility: visible;
}

#javascript {
    text-decoration: line-through;
}

footer {
    display: block;
    font-size: small;
    position: sticky;
    bottom: 0;
    z-index: 999;
    border-top: 2px solid var(--dark);
    background-color: var(--hf);
    height: 145px;
    p {
        text-align: center;
    }
    ul {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding-left: 0;
    }
    li {
        list-style-type: none;
        img {
            max-width: 75px;
            border: solid transparent 15px;
        }
    }
}

@media screen and (min-width: 2560px) {
    * {
        scroll-margin-top: 400px; 
    }
}

@media screen and (min-width: 1440px) {
    * {
        scroll-margin-top: 200px; 
    }
}

@media screen and (max-width: 992px) {
    * {
        max-width: 100%;
        scroll-margin-top: 220px;
    }
    .hero-text {
        top: 20%;
    }
    .card-about, .card-projects {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        flex: 1 1 auto;
        width: auto;
    }
    .recent-work {
        max-width: 450px;
        max-height: 440px;
    }
    img {
        display: flex;
        align-items: center;
        max-width: 400px;
    }
    .card-recent-work .app-name p {
        font-size: 60%;
    }
    .card-projects p {
        font-size: 90%;
    }
}

@media screen and (max-width: 768px) {
    * {
        scroll-margin-top: 330px;
    }
    #top ul {
        flex-direction: column;
        align-items: center;
    }
    .hero-text {
        top: 25%;
    }
    .card-about, .card-projects, #self-image {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        flex: 1 1 auto;
        width: auto;
    }
    .card-recent-work {
        display: flex;
    }
    img {
        margin: 20px;
        max-width: 250px;
    }
    .card-recent-work .app-name p {
        font-size: 60%;
    }
    .card-projects p {
        font-size: 90%;  
    }
}