@import url('https://fonts.googleapis.com/css2?family=Adamina&display=swap');

:root {
    --background-light: #fff;
    --main-color:#dbd3e7;
    --second-color:#533875;
    --third-color:#B28BC6;
    --text-dark: #000;
    --text-light: #fff;
}

body{
    background-color: var(--text-light);
    overflow-x: hidden;
}

/* ------- DARK MODE VERSION ------- */

.dark-mode {
    background-color: var(--text-dark);
    color: #fff;
   }

/* dark mode - NAV */
.dark-mode .nav-links {
    background-color: var(--second-color);
    color: var(--text-light);
}

.dark-mode .navbar-nav .nav-link {
    color: var(--text-light);
}

.dark-mode .navbar-nav .nav-link:hover {
    color: var(--third-color);
}

.dark-mode .fa-sun{
    color: var(--text-light);
}

.dark-mode .home {
    background-color: var(--text-dark);
}

/* dark mode - ABOUT */
    
   
.dark-mode .about{
    background-color: var(--text-dark);
    color: var(--text-light);
}


.dark-mode .custom-thumbnail {
    border-color: var(--text-light); /* Change border color to black */
    background-color: var(--text-light); /* Optional: Change background color to black */
}

.dark-mode .clearW{
    color: var(--second-color);
}

/* dark mode - EXPERIENCE */
.dark-mode .stripe3 {
    background-color: var(--text-light);
}

.dark-mode .aboutexperience {
    background-color: var(--text-dark);
    color: var(--text-light);
    }

.dark-mode .experienceRow {
    color: var(--text-light);
}

.dark-mode .tech-badge {
    background-color: var(--text-light);
    color: var(--text-dark);
}

.dark-mode .skills-section {
    background-color: var(--text-light);
    color: var(--text-dark);
}

.dark-mode .skill{
    color: #000;
}

.dark-mode .skills-list {
    background-color: var(--text-light);
}

.dark-mode .skill.highlight {
  color: var(--second-color);
}

/* Dark mode for skill boxes */
.dark-mode .skill-box {
  background: var(--text-dark);
  color: var(--text-light);
  border-color: var(--text-light);
}

.dark-mode .skill-box h3 {
  color: var(--text-light);
}

.dark-mode .skill-box:hover {
  background: var(--second-color);
  border-color: var(--text-light);
}

.dark-mode .skill-box:hover h3 {
  color: var(--text-light) !important;
}


/* dark mode - PROJECTS */
.dark-mode .project {
    background-color: var(--text-dark);
    color: var(--text-light);
}

.dark-mode .project h2 {
    color: var(--text-light);
}



/* Dark mode for swiper */
.dark-mode .swiper-button-next,
.dark-mode .swiper-button-prev {
    color: var(--third-color);
}

.dark-mode .swiper-button-next:hover,
.dark-mode .swiper-button-prev:hover {
    color: var(--second-color);
}

.dark-mode .swiper-pagination-bullet {
    background: var(--text-light);
}

.dark-mode .card {
    background-color: var(--text-dark);
    border-color: var(--text-light);
}

.dark-mode .card-body {
    background-color: var(--text-dark) !important;
    color: var(--text-light);
}

.dark-mode .card-title,
.dark-mode .card-title h5{
    color: var(--text-light);
}

.dark-mode .card-text,
.dark-mode .card-text p{
    color: var(--text-light);
}

/* dark mode - BUTTONS */
.dark-mode .btn2{
    background-color: var(--text-light);
    color: var(--text-dark);
}

.dark-mode .btnC{
    background-color: var(--text-light);
    color: var(--text-dark);
}

.dark-mode .btn{
    background-color: var(--text-light);
    color: var(--text-dark);
}

.dark-mode .btn-up-static{
    background-color: transparent;
    color: var(--text-light) !important;
}

/* dark mode - CONTACT + FOOTER */

.dark-mode #contact{
    background-color: var(--text-dark);
    color: var(--text-light);
}
.dark-mode .copr-nad{
    background-color: var(--text-dark);
    color: var(--text-light);
}

.dark-mode .stripecopr{
    background-color: var(--text-light);
}

.dark-mode .copr-nad a{
    color: var(--text-light);
}

.dark-mode .circle{
    border: 2px solid #fff;
    box-shadow: 0 0 10px #000;
}

.dark-mode .btn-up-static{
    background-color: var(--text-light);
    color: var(--text-light) !important;
}

/* ------- NORMAL/LIGHT VERSION ------- */
    
    /* Reset some default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Frank Ruhl Libre', serif;
/*   border: 1px solid red;  */
}


/* animation */
 .typing-demo {
    width: 0;
    animation: typing 2s steps(40) forwards, blink .5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 35ch;
    }
}

@keyframes blink {
    50% {
        border-color: transparent;
    }
} 

  .circle {
    border: 2px solid black;
    border-radius: 50%;
    box-shadow: 0 0 10px white;
    pointer-events: none;
    position: fixed;
    top: -10rem;
    left: -10rem;
    height: 2rem;
    width: 2rem;
    z-index: 1000;
    transition: transform 0.4s, background 0.4s;
}

::selection {
    color: white;
    background: var(--third-color);
  }



/* navigation */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}


/* navigation links */
.nav-links {
    list-style: none;
    display: flex;
}

.navbar-nav .nav-link {
    margin-right: 10px;
    font-size: 19px;
    text-decoration: none;
    color: var(--text-dark);
}

.navbar-nav .nav-link:hover {
    color: var(--second-color);
}

/* the burger menu icon */
.navbar-toggler{
    background-color: var(--text-light);
    border: none;
}



/* hero section */
.home {
    min-height: 90vh;
    width: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; /* Center text for smaller screens */
    padding: 0 1rem; /* Add padding for smaller screens */
}

 .hero-text h3 {
    font-size: 30px;
    margin-bottom: 15px;
    margin-top: -3rem;
} 

.hero-text h1 {
    font-size: 60px;
    font-weight: 600;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

 .hero-text h4 {
    font-size: 27px;
    margin-bottom: 15px;
} 


/* side title */
.SideTitle {
   font-size: 30px;
}

/* about me */
.about {
    padding: 2rem 1rem;
}

.about-img-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.aboutmeIMG {
    width: 100%;
    max-width: 350px;
    height: auto;
    object-fit: cover;
    margin-left: 0;
}

.about-text h2 {
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 10px;
    margin-top: 1rem;
}

.about-text p {
    font-size: 19px;
    margin-bottom: 1rem;
    line-height: 30px;
    padding-right: 0;
}

.about2 {
    font-size: 19px;
    margin: auto auto 1rem;
    max-width: 850px;
    padding: 2rem 1rem 4rem 1rem;
    text-align: center;
}

.custom-thumbnail {
    border-color: var(--text-dark); /* Change border color to black */
    background-color: var(--text-dark); /* Optional: Change background color to black */
}

.clearW {
    color: var(--second-color);
}


/* skills */

.skills-section {
   background: var(--text-dark);
   color: var(--text-light);
   padding-top: 5rem;
   padding-bottom: 5rem;
}

.skills-list {
  color: var(--text-light);
  padding: 6rem 2rem;
  text-align: center;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.skill-box {
  background: var(--text-light);
  color: var(--text-dark);
  padding: 3rem 2rem;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: 2px solid transparent;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skill-box:hover {
  background-color: var(--second-color);
  color: var(--text-light) !important;
}

.skill-box:hover h3 {
  color: var(--text-light) !important;
}

.skill-box h3 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-dark);
  letter-spacing: 0.5px;
  transition: color 0.4s ease;
}


/* ------- EXPERIENCE - tools------- */
.aboutexperience {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 9rem;
    padding-top: 4rem;
    padding-left: 6rem;
    padding-right: 6rem;
    color: var(--text-dark);
}

.experienceContainer h4 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 27px;
}

.experienceCol {
    display: flex;
    flex-direction: column;
    font-size: 19px;
    gap: 1.5rem;
}

.stripe3 {
    background-color: var(--text-dark);
    display: block;
    height: 2px;
    width: 100%;
}

.experienceRow {
    align-items: center;
    display: flex;
    gap: 3rem;
    justify-content: space-between;
}

.experienceRowContainer {
    display: flex;
    justify-content: space-between;
}


.tech-badge {
    display: inline-block;
    background: var(--text-dark);
    color: var(--text-light, #000);
    padding: 4px 12px;
    margin: 4px 4px 4px 0;
    font-size: 19px;
    font-weight: 500;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    border: 1px solid var(--text-dark);
    transition: background 0.2s, color 0.2s;
}
.tech-badge:hover {
    background: var(--second-color );
    color: var(--text-light);
}


/* ------- PROJECTS ------- */
.project-card {
    min-height: 450px;
    max-width: 450px;
    margin: 0 auto;
    
}
.project-card .card-img-top {
    height: 350px;
    object-fit: cover;
    
}

.card-title {
    font-size: 24px;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.card-text{
    font-size: 19px;
    color: var(--text-dark);
}

.card-body{
    background-color: var(--text-light) !important;  
}

.swiper {
    padding-bottom: 40px;
}


.swiper-button-next,
.swiper-button-prev {
    color: var(--third-color);

}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    color: var(--second-color); /* hover-farve */
}

.swiper-pagination-bullet {
    background: var(--text-dark);
}



/* projects */

  .project h2{
    margin-top: 5rem;
  }


.pfarve {
    color: var(--text-dark);
    word-wrap: break-word; /* Allows long words to be broken and wrap onto the next line */
    word-break: break-word; /* Ensures that the text breaks if it overflows the container */
    text-align: center; /* Center the text */
}

  .portfolio-item img{
    height: 250px;
    object-fit: cover;
  }

  .portfolio-item{
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    flex-direction: column;
  }

/* CONTACT */
.contact{
    margin-bottom: 12rem;
}

.contactinfo{
    margin-top: 1rem;
    max-width: 450px;
    line-height: 30px;
    margin-left: 5rem;
}

.contactinfo p{
    font-size: 19px !important;
}

.contact-buttons {
   margin-left: 4rem;
}




/* ICONS */

.icons-container {
    text-align: center;
}


.iconMoon{
cursor: pointer;
margin-top: 0.5rem;
}


    /* footer */

.stripecopr {
    background-color: var(--text-dark);
    display: block;
    height: 3px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.copr-nad{
    font-size: 15px;
    margin-bottom: -1.5rem;
    padding-bottom: 3rem;
    margin-left: 5rem;
    margin-right: 5rem;
    text-align: start;
    color: var(--text-dark);

    a{
        color: var(--text-dark);
        text-decoration: none;
    }

    a:hover{

        text-decoration: underline;
    }
}



/* BUTTONS */
.btn{
    display: inline-block;
    background: var(--text-dark);
    color: var(--text-light);
    padding: 10px 25px;
    margin-top: 2px;
    margin-bottom: 20px;
    transition: 0.5s;
    text-decoration: none;
    font-size: 19px;
    border-radius: 0;
}

.btnC {
    display: inline-block;
    background: var(--text-dark);
    color: var(--text-light);
    width: 310px;           /* Fast bredde */
    padding: 15px 0;        /* Juster evt. padding for højde */
    margin-top: 2px;
    margin-bottom: 20px;
    transition: 0.5s;
    text-decoration: none;
    font-size: 19px;
    text-align: center;     /* Centrer tekst */
    box-sizing: border-box; /* Sikrer padding ikke øger bredden */
}

.btnC:hover {
    background: var(--second-color);
    color: var(--text-light);
}


.btn2{
    display: inline-block;
    background: var(--text-dark);
    color: var(--text-light);
    padding: 10px 20px;
    margin-top: 2px;
    margin-bottom: 20px;
    transition: 0.5s;
    text-decoration: none;
    font-size: 19px;
}

.btn2:hover{
    background: var(--second-color);
    color: var(--text-light);
}

.btn:hover{
    background: var(--second-color);
    color: var(--text-light);
}

/* Arrow up button */
.btn-up-static {
    background: transparent;
    color: var(--text-dark);
    border: none;
    
    padding: 18px;              /* Større padding */
    cursor: pointer;
    box-shadow: none;
    margin-bottom: 10px;
    max-width: 72px;            /* Større max-width */
    max-height: 72px;           /* Større max-height */
    width: 72px;                /* Større bredde */
    height: 72px;               /* Større højde */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    margin-right: 5rem;
}
.btn-up-static img {
    width: 36px;                /* Større ikon */
    height: 36px;
    display: block;
}

.btn-up-static:hover {
    transform: translateY(-6px) scale(1.1);
}

/* ======================================= */
/* RESPONSIVE DESIGN - MEDIA QUERIES      */
/* ======================================= */

/* Large screens (desktops) - 1024px and down */
@media (max-width: 1024px) {
    .skills-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* Medium screens (tablets) - 768px and down */
@media (max-width: 768px) {
    /* Hero Section */
    .hero-text h3 {
        font-size: 19px;
        margin-top: -2rem;
    }

    .hero-text h1 {
        font-size: 40px;
    }

    .hero-text h4 {
        font-size: 19px;
    }

    /* About Section */
    .about-text h2 {
        font-size: 30px;
    }

    .about-text {
        font-size: 16px;
        line-height: 24px;
    }

    .aboutmeIMG {
        margin-left: 0;
        max-width: 280px;
        margin-bottom: 2rem;
    }

    .about2 {
        padding: 2rem 1rem;
    }

    .quoteP {
        font-size: 16px;
    }

    .SideTitle {
        font-size: 25px;
    }

    /* Skills Section */
    .skills-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .skill-box {
        padding: 2.5rem 1.5rem;
        min-height: 120px;
    }

    .skill-box h3 {
        font-size: 1.3rem;
    }

    /* Experience Section */
    .aboutexperience {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .aboutexperience h2 {
        font-size: 30px;
    }

    .experienceRow {
        flex-direction: column;
        align-items: flex-start;
    }

    .experienceRow div[data-aos="fade-left"] {
        width: 100%;
    }

    .experienceRow p {
        word-break: break-word;
    }

    .experienceCol {
        font-size: 16px;
    }

    /* Contact Section */
    .contactinfo {
        margin-left: 2rem;
    }

    .contact-buttons {
        margin-left: 2rem;
    }

    /* Footer */
    .copr-nad {
        margin-left: 2rem;
        margin-right: 2rem;
        font-size: 14px;
    }

    .btn-up-wrapper {
        margin-right: 2rem;
    }

    /* General */
    .colMe {
        margin-bottom: 3rem;
        display: contents;
    }

    body #myBtn {
        display: none;
    }

    .circle {
        display: none;
    }
}

/* Small screens (mobile landscape) - 500px and down */
@media screen and (max-width: 500px) {
    /* Buttons */
    .btn2 {
        font-size: 19px;
        padding: 0.5rem 1rem;
    }

    .btnC {
        width: 100%;
        min-width: 120px;
        max-width: 100%;
    }

    .btn-up-static {
        padding: 12px;
        width: 56px;
        height: 56px;
        max-width: 56px;
        max-height: 56px;
        margin-bottom: 8px;
    }

    .btn-up-static img {
        width: 26px;
        height: 26px;
    }

    /* Navigation */
    .menu-icon {
        display: block;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background-color: var(--text-light);
        text-align: center;
    }

    .nav-links.show {
        display: flex;
    }

    .nav-links li {
        margin: 10px 0;
    }

    .column {
        width: 100%;
    }

    /* Contact Section */
    .contact-buttons {
        margin-left: 1rem;
        padding: 0 4rem 0 0rem;
    }

    .contactinfo {
        margin-left: 1rem;
        padding: 0 3rem 0 1rem;
    }

    /* Footer */
    .copr-nad {
        margin-left: 1rem;
        margin-right: 1rem;
        font-size: 13px;
        text-align: center;
    }

    .btn-up-wrapper {
        margin-right: 1rem;
    }

    /* Animation */
    .typing-demo {
        animation: none !important;
        width: auto !important;
        border-right: none !important;
        white-space: normal !important;
        overflow: visible !important;
    }
}

/* Small screens (mobile portrait) - 480px and down */
@media (max-width: 480px) {
    .aboutmeIMG {
        max-width: 250px;
        margin-bottom: 1.5rem;
    }

    .SideTitle {
        font-size: 20px;
    }

    .skills-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .skill-box {
        padding: 2rem 1rem;
        min-height: 100px;
    }

    .skill-box h3 {
        font-size: 1.2rem;
    }
}

/* Extra small screens - 360px and down */
@media (max-width: 360px) {
    .aboutmeIMG {
        max-width: 220px;
    }

    .about {
        padding: 1rem 0.5rem;
    }

    .SideTitle {
        font-size: 18px;
    }
}