/*
 * MAIN STYLESHEET
 * 
 **/



 /*
  * VARIABLES
  **/
 :root {
     --neutrino: 0.5rem;     /* tinyest spacing unit */
     --atom: 1rem;           /* base spacing unit */
     --molecule: 3rem;       /* big spacing unit */
 
     --margin: var(--neutrino);
     --padding: var(--neutrino);
     --gap: var(--neutrino);
 
     --dark: rgb(111, 111, 111);
     --light: rgb(233, 233, 233);
     --light-2: rgb(228, 228, 228);
 
     --foreground-color: rgb(111, 111, 111);
     --background-color: rgb(233, 233, 233);

     --text-color: rgb(1, 49, 80);
 }
 
 
 /*
  * PAGE LAYOUT
  **/
 
 /* HEADER */
 header {
     padding: var(--padding);
 }
 
 nav {
     /* background-color: #FFFFFF; */
     display: inline;
 }
 
 nav a {
     display: inline-block;
     /* background-color: white; 
     padding: 0 var(--padding);
     margin-bottom: var(--neutrino);*/
 }
 
 ul {
     padding-bottom: var(--padding);
 }
 
 /* MAIN AREA */
main {
     padding: var(--padding);
}
 
 /* section {} */
 
 /* simple setup */
footer {}
 
 
 
 /*
  * FLEX STUFF
  **/
 
 /* atomic behavior */
 img {
     object-fit: cover;
 }
 /* flex child's p content tag */
 p {
     max-width: 32ch;
 }
 
 /* section.project */
 .project {}
 
 /* flex parent /main/section/article/ */
 .project article, #welcome {
     display: flex;
     flex-flow: row wrap;
     /* flex-wrap: wrap; */
     gap: var(--gap);
     justify-content: center;
     align-items: center;
     align-content: center;
 }
 
 /* flex children, global */
 .project > * {
     flex: 1 1 content;
 }
 
 /* even odd */
 section:nth-child(odd) > * {
     flex-flow: row-reverse;
     /* flex-direction: row-reverse; */
 }
 
 /* controlling flex children specifically */
 .project > picture {
     /* flex-basis: 60%; */
 }
 .project > div {
     /* flex-basis: 40%; */
 }
 /* flex */
 
 
 
 /*
  * PAGE DESIGN
  **/
 body {
     color: var(--text-color);
     background-color: var(--background-color);
     background: url('./bg-3.png') center center fixed;
     background-size: cover;
     /* background-size: 100% 100% */
 }
 main {
     margin: auto var(--molecule);
     background-color: none;
 }
section {
     /* margin:0 0 var(--neutrino) 0; */
     padding: var(--neutrino);
     /* background-color: var(--light-2); */
 }

/* section.welcome */
#welcome {
    color: white;
    background-color: transparent;
}
h2 {
    font-size: 3rem;
}
h3 {
    font-size: 2rem;
    width: 32ch;
}
#welcome div p {
    font-size: 1.3rem;
    max-width: 52ch;
    color: var(--text-color);
}

#logo {
    max-width: 300px;
    width: 20vw;
    min-width: 100px;
}

.card {
    padding: var(--padding);
    border-radius: var(--neutrino);
}
 
 /* slide stuff */
 #polaroid-1:hover, #polaroid-2:hover, #polaroid-3:hover {
    transform: scale(1.1);
}

#polaroid-1 {
    transform: rotate(3deg);
    width: 18vw;
}
#polaroid-2 {
    transform: rotate(2deg);
    width: 18vw;
}
#polaroid-3 {
    transform: rotate(-2deg);
    width: 22vw;
}



.ad {
    border-radius: var(--atom);
}


#stones {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
    gap: 0rem;
}
.stones {
    width: 16vw;
    display: inline;
}
.stones:hover {
    transform: translate(0, -20px) rotate(12deg) scale(1.2);
}

h4 {
    font-size: 1.5rem;
    font-weight: bold;
    padding-top: 1rem;
}



 
 /* INTERACTIVE */
 
 /* zoom image on hover */
 /* [1] The container */
 picture {
   height: 20rem; /* [1.1] Set it as per your need */
   overflow: hidden; /* [1.2] Hide the overflowing of child elements */
   display: flex;
   border-radius: var(--atom);
   will-change: transform; /* fix flickering on hover */
 }
 /* [2] Transition property for smooth transformation of images */
 picture img {
     align-self: center;
     transition: transform .3s ease;
 }
 /* [3] Finally, transforming the image when container gets hovered */
 picture:hover img {
   transform: scale(1.1);
 }
 

 /* zoom image on hover */
 
 /*
  * UI ELEMENTS
  **/
 /* CTA BUTTON */
 .cta {
     width: fit-content;
     display: flex;
     align-items: center;
     color: #FFFFFF;
     background: #5E5DF0;
     border-radius: 999px;
     padding: 0.5rem 1.5rem;
     cursor: pointer;
     user-select: none;
     -webkit-user-select: none;
     touch-action: manipulation;
     margin-bottom: var(--atom);
 }
 
 .cta-main {
    background-image: linear-gradient(to right, #dd883e, #e39740);
 }
 
 .cta-secondary {
    background-image: linear-gradient(to right, #6253e1, #a853e1);
 }
 
 .cta:hover {
     background-position: 100% 0;
     moz-transition: all .4s ease-in-out;
     -o-transition: all .4s ease-in-out;
     -webkit-transition: all .4s ease-in-out;
     transition: all .4s ease-in-out;
     opacity: 1;
 }
 
 
 
 .icon {
     height: 1.2rem;
     width: auto;
     padding-left: var(--neutrino);
 }
 .inline {
    display: inline;
 }
 /* inline svg styles */
 polyline {
     fill: none;
     stroke: white;
     stroke-width: 1.5px;
     vector-effect: non-scaling-stroke;
     shape-rendering: geometricPrecision;
 }

 a {
    text-decoration: underline;
    text-underline-offset: 0.2rem;
    text-decoration-color: rgba(255, 255, 255, .5);
 }
 .picto {
    display: inline;
 }



 header nav ul {
    background-color: white;
    display: inline-block;
    padding: var(--atom);
    border-radius: var(--atom);
    margin: var(--atom);
}



/* ABOUT ME STUFF */
.about-me {
    padding: 3rem;
    margin: 0;
}

.longtext {
    max-width: 72ch;
    width: 75%;
}
.longtext p {
    max-width: 72ch;
}
.card-infoX {
    background-color: white;
    box-shadow: 10px 10px 20px 0px rgba(199, 199, 198, 0.497);
    padding: var(--atom);
}
.namecard {
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--atom);
    padding: var(--atom);
}
/* portrait */
.portrait {
    border-radius: 999em;
    width: 40%;
    height: 40%;
    min-width: 20%;
    max-width: 30%;
}
/* text under photo */
.portrait-info {

}
.em {
    font-weight: bold;
}
.ctaholder {
    padding: 1rem 0 1rem 0;
}

.portrait > img {
    border-radius: 999em;
}
.portrait > img:hover {
    transform: none;
}
/* ABOUT ME STUFF */





footer {
    display: flex;
    flex-wrap: wrap;
    gap: 6rem;
    padding: 6rem;
    color: white
}
footer a {
    color: white;
}
footer * {
    flex: 1 1 1;
}
footer .logo {
    max-width: 12rem;
}

#override-card {
    width: 38ch;
}

/* SCREEN SIZES */
@media (max-width: 480px) {
    body {
      font-size: 0.8rem;
    }
    h2 {
        font-size: 2rem;
    }
    h3 {
        font-size: 1rem;
    }

    .picto {
        width: 10px;
    }

    /* currently the same as in main css */
    main {
        padding: var(--neutrino);
        margin: 0;
    }
    section {
        margin:0 0 var(--neutrino) 0;
        padding: var(--neutrino);
    }

    .project article, #welcome {
        display: flex;
        flex-flow: column;
    }

    #welcome {
        flex-flow: column-reverse;

        display: flex;

        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: stretch;
        align-content: stretch;


    }


    #polaroid-1 {
        width: 44vw;
    }
    #polaroid-2 {
        width: 48vw;
    }
    #polaroid-3 {
        width: 52vw;
    }


    section:nth-child(even) > * {
        flex-flow: column-reverse;
    }

    footer {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        gap: var(--atom);
        padding: var(--neutrino);
        color: white
    }
    footer .logo {
        max-width: 3rem;
    }





    #stones {
        gap: var(--atom);

    }

    #stones > img {
        width: 26vw;
    }



    .card-info {
        background-color: white;
        padding: var(--atom);
        width: 100%;
    }




}