/* BODY */

html{
    font-size: 100%;
    line-height: 1.2rem;
    -webkit-text-size-adjust: 100%;
    /* adjustments for phone */
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    background-color: rgba(207, 226, 247, 1);
    font-family: 'Montserrat', sans-serif;
    margin: 0px;
}

/*---------------------Line Break----------------------*/

/* GENERAL */
/* Fonts */
.large{
    font-weight: normal;
    line-height: normal;
    font-family: 'Quicksand', Montserrat, sans-serif;
    font-size: 5rem;
    letter-spacing: 4px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0px;  
    background-image: linear-gradient(135deg, #8e44ad 0%, #3498db 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    word-wrap: break-word;
}

.medium-spacing{
    font-weight: normal;
    line-height: normal;
    font-family: 'Quicksand', Montserrat, sans-serif;
    font-size: 4rem;
    letter-spacing: 4px;
    margin: 0px;
}

.medium-spacing-halfsize{
    font-weight: normal;
    line-height: normal;
    font-family: 'Quicksand', Montserrat, sans-serif;
    font-size: 2rem;
    letter-spacing: 4px;
    margin: 0px;
}

.main-title-large{
    font-weight: normal;
    line-height: normal;
    font-size: 3rem;
}

.main-title{
    font-weight: normal;
    line-height: normal;
    font-size: 1.5rem;
}

.small{
    font-weight: normal;
    font-size: 0.7rem;
}

.quote{
    font-family: 'Sniglet', cursive, sans-serif;
    font-size: 1.3em;
}

.uppercase{
    text-transform: uppercase;
}

.italic{
    font-style: italic;
}

.bold{
    font-weight: bold;
}

.colorful-letter {
background-image: linear-gradient(135deg, #9b4dca 0%, #4facfe 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* Background colors */

.darkblue {
    background-color: rgba(137, 154, 209, 1);
    margin: 20px auto;
    padding: 20px;
    text-align: center;
    border-radius: 15px; /* Rounded corners */

}

.darkblue-light {
    background-color: rgba(182, 192, 226, 1);
    margin: 20px auto;
    padding: 20px;
    text-align: center;
    border-radius: 15px; /* Rounded corners */
}

.darkerblue {
    background-color: rgba(129, 167, 225, 1);
    margin: 20px auto;
    padding: 20px;
    text-align: center;

}

/* Setting alignments and sizing */
/* for the flexbox */
.wrapper{
    max-width: 900px;
    margin: auto;
    padding: 20px;
    display: flex;
    gap: 20px 20px;
}

.column{
    flex: 50%;
}

.w-900{
    max-width: 900px;
    margin: auto;
}

/* Step 2 fix: equal height cards */
.wrapper > .card {
    flex: 1;
}

/* for the grid system */
.grid-system-2{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.grid-system-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.grid-system-4{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

/* other */
.max-width{
    max-width: 450px;
}

.max-height{
    max-height: 350px;
}

.align-center{
    align-self: center;
}

.justify-content{
    justify-content: right;
}

.justify{
    text-align: justify;
}

.center{
    text-align: center;
}

.padding{
    padding: 20px;
}

.padding-top{
    padding-top: 20px;
}

.padding-right{
    padding-right: 20px;
}

.padding-bottom{
    padding-bottom: 20px;
}

.padding-left{
    padding-left: 20px;
}

.margin-auto{
    margin: auto;
}

.margin-trbl10{
    margin: 10px;
}

/* for bottom button I think */
.flex{
    display: flex;
    flex-direction: column;
}

.bottom{
    align-self: flex-start;
    margin-top: auto;
}

/* Make about-me1.png a perfect circle */
.circular-img {
    border-radius: 50%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

/* Make about-me2.png have softly rounded corners */
.rounded-img {
    border-radius: 20px;
    object-fit: cover;
}

/* Add space between image and text */
.about-img {
    margin-right: 15px; /* spacing between image and text */
    width: 350px; /* adjust as needed */
    height: auto;
}


/* Miscellaneous */
.button{
    background-color: rgba(253, 129, 187, 0.3);
    padding: 10px;
    text-decoration: none;
    border-radius: 5%;
    color: black;
}

/* might change to not an outline*/
.button-outline{
    border: 2px solid  rgba(253, 129, 187, 0.3);
    padding: 10px;
    text-decoration: none;
    border-radius: 5%;
    color: black;
}

.link{
    text-decoration: none;
}

/* Seeing some inspirations, they had to double this code, because of the :hover and :active on link above so I decided to do that too*/
.link-no-scale{
    text-decoration: none;
}

.no-padding-list-item{
    padding-left: 0;
}

.padding-list-10{
    padding: 10px;
}

.no-bullet-list{
    list-style-type: none;
}
/* ---------------------------------- */
/* ANIMATIONS AND OTHER BEAUTIES */
.button-outline:hover, .button-outline:active{
    border: 2px solid  rgba(253, 129, 187, 0.3);
    background-color: rgba(253, 129, 187, 0.6);
    padding: 10px;
    text-decoration: none;
    border-radius: 5%;
    color: rgb(255, 255, 255);
    transition: background-color 1s ease, color 1s ease;
}

.link:hover, .link:active{
    font-size: 1.2rem;
    transform: scale(1.5);
    transition: 1s ease-in-out;
    /* second solution: */
    /* font-size: 1.2rem; 
    transition: font-size 2s ease-in-out;  */
}

.progress-bar:hover, .progress-bar:active {
    box-shadow: 5px 5px 5px #cdadcd;
    transition: box-shadow 1s ease;
}

/* ---------------------------------- */
/* Navigation bar */
nav {
    background-color: rgba(133, 180, 234, 1); /* added this line */
    margin-bottom: 30px;
    padding: 0; /* optional cleanup */
    border-bottom-left-radius: 15px; /* rounded corners */
    border-bottom-right-radius: 15px; /* Rounded corners */
}

nav {
    transition: border-radius 0.3s ease; /* animate for fun? */
}

.main-nav {
    background-color: rgba(133, 180, 234, 1); /* same color */
    display: flex;
    list-style-type: none;
    justify-content: center;
    padding: 20px;
    margin: 0px;
    width: 100%;
}

.main-nav li {
    padding: 5px 10px;
}

.main-nav li a {
    color: #CFE2F7;
    text-decoration: none;
}

.main-nav li a:hover {
    color: rgb(254, 175, 210); /* pink hover will change */
    text-decoration: none;
    font-weight: bold;
}

.sticky {
    position: -webkit-sticky; 
    position: sticky;
    top: 0;
    align-self: flex-start;
    z-index: 999; /* makes sure it stays on top of other content */
}

/* Nav-icon */
.toggle, #drop {
    display: none;
}

#main-toggle {
   border: 1px solid #BCBDDB;
    float: right;
    padding: 20px;
    user-select: none;
}

.nav-icon {
    background-color: #C6CEE9;
    display: block;
    height: 3px;
    width: 10px;
    position: relative;
}

.nav-icon::before,
.nav-icon::after {
    background-color: #B1ACCC;
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
}

.nav-icon::before {
    top: 5px;
}

.nav-icon::after {
    top: -5px;
}

/* ---------------------------------- */

/* FOOTER */
footer{
    color: #000000;
    text-align: center;
    padding: 20px 0px;
}
/* ---------------------------------- */

/* INTRODUCTION */
.header-img{
    border-radius: 70%;
}
/* ---------------------------------- */

/* ARTICLE */
/* Everything here is made with general classes. Find them in the GENERAL section */
/* ---------------------------------- */

/* ABOUT ME */
/* Everything here is made with general classes. Find them in the GENERAL section */
/* ---------------------------------- */

/* PROJECTS */
/* I also used these card settings on other sub-pages */
.card {
    box-shadow: 0 3px 10px rgba(137, 154, 209, 0.7); 
    padding: 20px;
    border: 2px solid #1a1a1a; 
    transition: border 0.3s ease;
    border-radius: 10px;
}

.card:hover {
    border: 2px solid rgb(127 110 187 / 0.2); /* shows on hover */
}


.box{
    display: block;
    width: 100px;
}

.project-img {
  width: 240px;     /* Adjust to the size */
  height: auto;     /* Keeps the original aspect ratio */
  display: block;   /* Allows centering with margin */
  margin: 10px auto; /* Adds top/bottom spacing and centers horizontally */
}


/* ---------------------------------- */

/* CONTACT ME */
.box-contact{
    display: block;
    width: 100%; 
    text-align: center;
}

.logo{
    width: 50px;
}

/* ---------------------------------- */

/* RESPONSIVENESS */
/* Had to pay attention for that wondow.innerWidth when calculated max-width */
@media screen and (max-width: 867px){
    body{
        font-size: 90%;
    }

    .grid-system-2{
        grid-template-columns: 1fr;
    }

    .large{
        font-size: 4rem;
    }

    .medium-spacing{
        font-size: 2.5rem;
    }

    .main-title-large{
        font-size: 2rem;
        text-align: center;  
        margin: 0;
    }

    .main-title{
        text-align: center;
        margin: 0;
    }

    .small{
        font-size: 0.6rem;
    }

    .max-width{
        max-width: 300px
    }

    .max-height{
        max-height: 250px;
    }

    .padding-top{
        padding-top: 10px;
    }
    
    .padding-right{
        padding-right: 10px;
    }

    .padding-bottom{
        padding-bottom: 10px;
    }
    
    .padding-left{
        padding-left: 10px;
    }

    .logo{
        width: 40px;
    }
}

/* wrapper on home page looks better with this @media */
@media screen and (max-width: 750px){
    .wrapper{
        flex-direction: column;
        gap: 20px 0px;
    }

    .column{
        flex: 100%;
    }

    .box{
        margin: auto;
    }

    .thanks{
        text-align: center;
    }
}

/* media query for hamburger menu with dropdown */
@media screen and (max-width: 510px){
    .main-nav{
        display: none;
    }

    .toggle{
        display: block;
        background-color: #ffffff;
        border: 1px solid #fd81bb4d;
    }
    
    .toggle:hover{
        background-color: #f0e7e7;
    }
    
    #drop:checked+.main-nav{
        display: block;
    }

    nav{
        padding-bottom: 25px;
    }

    .max-width{
        max-width: 100%;
    }
}

/* media query for smaller screens */
/* smaller fonts were my way to go */
@media screen and (max-width: 377px){
    body{
        line-height: 1.5rem;
    }

    .large{
        font-size: 3rem;
    }

    .medium-spacing{
        font-size: 1.5rem;
    }

    .medium-spacing-halfsize{
        font-size: 1.5rem;
    }

    .main-title{
        font-size: 1rem;
    }

    .main-title-large{
        font-size: 1.5rem;
    }
}


/* add padding to the .contact-list */
.contact-list {
    padding-top: 25px;  /* Adjusting this value for the desired space */
}

/* Target the header specifically */
#contact-me h1.medium-spacing.center {
    font-size: 2rem;  /* Adjust this value as needed */
    margin-bottom: 20px;    
}