/* General Base Styles */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Montserrat;
    font-size: 14px;
    background-color: #007991ff;
    color: #222e50ff;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    transition: all 0.35s;
}

body.turned-on {
    background-color: aliceblue;
    color: teal;
}

body.turned-on header, footer {
    box-shadow: 0 1px 2px black;
    background-color: #007991ff;
    color: #fcde67;
}

body.turned-on header h1 {
    color: #f0f8ff;
}

body.turned-on header a {
    color: #fcde67;
}

/* Aside */
aside {
    position: fixed;
    left: 10px;
    bottom: 10px;
    display: flex;
    flex-flow: column;
}

main {
    overflow: hidden;

    /* snap try out*/
    scroll-snap-type: mandatory;
    scroll-snap-type: y mandatory;
}

main>section {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-content: center;
    min-height: 100vh;

    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Icons */
.icon {
    height: 32px;
    width: 32px;
    display: block;
    transition: all .65s;
}

.icon::after {
    color: #fcde67;
    font-weight: 600;
    font-style: normal;
    font-size: 12px;
    scale: 0.4;
    transition: all .65s;
}

.icon:hover::after {
    color: black;
    display: flex;
    justify-content: center;
    padding-top: 0.8em;
    scale: 1;
}

/* Menu icons */
.icon.home {
    background: url('./../assets/icons8-home.svg');
    background-repeat: no-repeat;
    background-size: cover;
}

.icon.home:hover {
    background: none;
}

.icon.home:hover::after {
    content: "HOME";
    color: #222e50ff;
}

.icon.about-me {
    background: url('./../assets/icons8-account-50.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.icon.about-me:hover {
    background: none;
}

.icon.about-me:hover::after {
    content: "ABOUT";
    color: #222e50ff;
}

.icon.projects {
    background: url('./../assets/icons8-folder.svg');
    background-repeat: no-repeat;
    background-size: cover;
}

.icon.projects:hover {
    background: none;
}

.icon.projects:hover::after {
    content: "PROJECTS";
    color: #222e50ff;
}

.icon.contact {
    background: url('./../assets/icons8-contact-50.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.icon.contact:hover {
    background: none;
}

.icon.contact:hover::after {
    content: "CONTACT";
    color: #222e50ff;
}

/* Social icons */
.icon.github {
    background: url('./../assets/icons8-github-50.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.icon.linkedin {
    background: url('./../assets/icons8-linkedin.svg');
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
}

.icon.cv {
    background: url('./../assets/resume-portfolio-svgrepo-com.svg');
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center;
}

.icon.uparrow {
    background: url('./../assets/icons8-up-arrow-50.png');
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 5px;
    width: 50px;
    height: 50px;
    transition: all .45s;
}

.icon.uparrow:hover {
    transform: rotate(360deg);
}

.round-button {
    border-radius: 100%;
    display: block;
    margin: 0 auto;
    padding: 5px;
    transition: all .65s;
}

.round-button:hover {
    background-color: #fcde67;
}

/* Mobile Styles */
@media screen and (max-width: 600px) {
    .mobile-only {
        display: block;
    }

    .hide-mobile {
        display: none;
    }

    /* Header */
    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        display: flex;
        justify-content: space-between;
        z-index: 4;
        background-color: aliceblue;
        padding: 1rem 4px;
        max-height: 10vh;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* SJG center Title with animation */
    header h1 {
        color: #007991ff;
        font-size: 2.5rem;
        transition: all 0.35s ease-in-out 0.23s, color 0s ease-in-out 0s;
        position: relative;
        top: 0.2rem;
        letter-spacing: -4px;
        min-width: fit-content;
        animation: drop-letter 1s ease-in-out 0.35s forwards;
    }

    header h1.opened {
        color: #fcde67;
        top: 80px;
        scale: 2.41;
        letter-spacing: -5px;
        text-shadow: 1px -1px 1px #007991ff;
    }

    /* Social links container */
    header .right-section {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        position: fixed;
        right: 4px;
        top: 35px;
        background-color: #f0f8ff;
        box-shadow: 0 2px 1px black;
        border-radius: 0 0 10px 10px;
        height: 0;
        width: 50px;
        overflow: hidden;
        transition: all 0.5s;
    }

    header .right-section.opened {
        height: 200px;
        padding-top: 25px;
    }

    header .right-section>a {
        margin-top: 4px;
        margin-bottom: 4px;
        width: 100%;
        height: 100%;
    }

    header .right-section>a i {
        background-position: center;
        width: 100%;
        height: 100%;
    }

    .right-section a {
        border: 2px solid rgba(0, 121, 145, 0)
    }

    .right-section a:hover {
        border-radius: 100%;
        border: 2px solid rgba(0, 121, 145, .7)
    }

    /* Right Social menu button */
    header #mobile-social {
        z-index: 1;
        transition: all 0.5s ease-in-out;
    }

    header #mobile-social.opened {
        animation: flip-over 0.35s ease-in;
    }

    header #mobile-social.opened>button {
        background-color: #fcde67ad;
    }

    .social-btn.round-button {
        padding: 0;
        background-color: transparent;
    }

    .socials::after {
        background: url('./../assets/icons8-share.svg') no-repeat center;
        content: ' ';
        scale: .8;
        height: 46px;
        width: 46px;
        transition: flip-sign 0.3s;
        display: block;
        z-index: 1;
    }

    .menu-btn {
        background-color: transparent;
        border: none;
        padding-left: 4px;
        padding-right: 4px;
        min-width: 50px;
    }

    .open-menu::after {
        content: ' ';
        scale: 1;
        height: 2rem;
        display: block;
        animation: flip-sign-back 0.75s ease-in forwards;
    }

    .open-menu.opened::after {
        animation: flip-sign 0.75s ease-in forwards;
    }

    /* Mobile hideable menu */
    #mobile-drawer {
        position: fixed;
        top: -100%;
        left: 0;
        background-color: #f0f8ff;
        display: flex;
        justify-content: flex-start;
        padding-top: 10rem;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        height: 0;
        overflow: hidden;
        text-align: center;
        transition: all 0.65s;
        z-index: 3;
    }

    #mobile-drawer.opened {
        top: 0;
        height: 100%;
    }

    #mobile-drawer ul {
        font-weight: bold;
        grid-template-columns: 1fr;
        list-style-type: none;
        padding-top: 60px;
    }

    #mobile-drawer ul li {
        text-transform: uppercase;
        margin-top: 2ch;
        margin-bottom: 2ch;
        font-size: 18px;
        font-family: "Montserrat";
    }

    #mobile-drawer ul li:last-child {
        display: inline-flex;
        align-content: center;
        justify-content: space-evenly;
    }

    #mobile-drawer ul li a {
        text-decoration: none;
        color: #007991ff;
        letter-spacing: 1px;
        font-size: 1.4em;
    }

    #mobile-drawer .icon {
        width: 3em;
        height: 3em;
    }

    /* Main */
    main {
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
    }

    main>section {
        padding-top: 10vh;
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Footer*/
    footer .icon {
        width: 50px;
        height: 50px;
    }

    footer {
        background-color: aliceblue;
        color: black;
        display: flex;
        flex-flow: column;
        align-items: center;
        padding: 1em;
        border-top: 1px solid black;
        margin-top: 0.5rem;
    }

    footer nav {
        display: inline-flex;
        width: 40%;
        justify-content: space-evenly;
    }

    footer>* {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    footer>p a {
        text-decoration: none;
    }

    footer .right-section {
        display: inline-flex;
        justify-content: space-around;
        width: 20%;
        max-width: 150px;
    }
}

/* Tablet Styles */
@media screen and (max-width: 900px) {}

/* Desktop Styles */
@media screen and (min-width: 901px) {

    /* Header */
    header {
        background-color: aliceblue;
        color: black;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 10px 10%;
        display: flex;
        justify-content: space-between;
        z-index: 4;
    }

    header nav {
        display: inline-flex;
        width: -webkit-fill-available;
        width: -moz-fill-available;
        width: 100%;
        justify-content: end;
        align-items: center;
    }

    nav>a {
        text-decoration: none;
        text-transform: uppercase;
        margin-right: 1.7rem;
        color: #222e50ff;
        font-size: small;
        letter-spacing: 1px;
        transition: scale .10s;
    }

    nav>a:hover {
        color: #007991ff;
    }

    header h1 {
        align-self: center;
        font-size: 1.2em;
        color: #222e50ff;
        min-width: fit-content;
        letter-spacing: 1.8px;
    }

    .menu-btn {
        background-color: transparent;
        border: none;
        padding-left: 4px;
        padding-right: 4px;
        min-width: 50px;
    }

    header .right-section,
    footer .right-section {
        display: inline-flex;
        justify-content: space-around;
        width: 20%;
        max-width: 150px;
    }

    .right-section a {
        border: 2px solid rgba(0, 121, 145, 0)
    }

    .right-section a:hover {
        border-radius: 100%;
        border: 2px solid rgba(0, 121, 145, .7)
    }

    /* Main */
    main {
        padding: 0 10px;
        margin-top: 150px;
        max-width: 80%;
        margin: 0 auto 50px auto;
        overflow-x: hidden;
        overflow-y: hidden;
        scroll-snap-type: y mandatory;
    }

    main>section {
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-content: center;
        min-height: 100vh;

        scroll-snap-align: start;
    }

    .flag::before {
        margin-right: 4px;
    }

    #languages {
        display: none;
        border-radius: 20px;
        background-color: blueviolet;
    }

    #languages ul {
        list-style-type: none;
    }

    #languages li {
        padding: 8px 0;
        border-radius: 20px;
    }

    .flag {
        font-size: 10px;
    }

    .flag.active {
        box-shadow: 0 0 2px green;
        background-color: aqua;
        border-radius: 10px;
    }

    .flag.arg::before {
        content: url('./../assets/ar-flag.svg');
        max-width: 5px;
        width: 5px;
        height: 10px;
    }

    .flag.eng::before {
        content: url('./../assets/gb-flag.svg');
    }

    /* Footer*/
    body.turned-on footer {
        background-color: #007991ff;
    }

    footer {
        background-color: aliceblue;
        color: black;
        display: flex;
        flex-flow: column;
        align-items: center;
        padding: 1em;
        border-top: 1px solid black;
    }

    footer nav {
        display: inline-flex;
        width: 40%;
        justify-content: space-evenly;
    }

    footer>* {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    footer>p a {
        text-decoration: none;
    }

    /* Hide on tablet and desktop devices */
    .mobile-only {
        display: none;
    }


}