:root {
    --text-color: #000000;
    --link-color: #000000;
    --background-color: #bbc8fc;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Nunito Sans', sans-serif;
    max-width: 1400px;
    margin: 0 auto;
}

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

nav {
    display: flex;
    padding: 20px 20px;
}

nav h2 {
    display: flex;
    font-size: 35px;
}

/* Navigation Links */
nav a {
    display: flex;
    font-size: 20px;
    margin-left: 20px;
    padding: 0 5px 5px 5px;
    border: 8px outset #c1acce;
    color: var(--link-color);
    border-radius: 8px;
    height: 40px;
    transition: .1s;
}

nav a span {
    justify-content: center;
}

nav a:hover {
    padding: 5px 5px;
    background-color: #e6e6ff;
    color: #071CC8;
    border: 3px solid #071CC8;
    border-radius: 8px;
}

/*SECTION 1 Hero*/
.hero-section {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px;
    border-radius: 8px;
    margin: 10px 10px 10px;
    gap: 10px;
}

.hero-section .headshot {
    float: left;
    display: flex;
    justify-content: left;
    margin: 0 15px 0;
}

.hero-section .headshot img {
    max-width: 225px;
    border-radius: 100%;
 }

.hero-section .text {
    flex: 5;
}

 .hero-section .text h2 {
    font-size: 30px;
 }

.hero-section .text p {
    font-size: 20px;
    gap: 20px;
 }

.hero-section .text .links {
    margin-top: 25px;
 }

 .hero-section .text .links a {
    display: inline-block;
    padding: 0px 10px;
    margin-right: 10px;
    margin-bottom: 5px;
    border: 8px outset #c1acce;
    color: var(--link-color);
    border-radius: 8px;
    height: 40px;
    transition: .1s;
 }

 .hero-section .text .links a:hover {
    background-color: #e6e6ff;
    color: #071CC8;
    border: 3px solid #071CC8;
    padding: 5px 10px;
 }

/* SECTION 2 Instructional Design */
.section-title {
    display: flex;
    vertical-align: center;
    max-width: 100%;
    margin: 5px 20px;
    padding: 20px;
    background-color: transparent;
    border: 4px solid #e6e6ff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.id-group {
    display: flex;
    background-color: #e6e6ff;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px;
    border-radius: 8px;
    margin: 10px 10px 10px 10px;
    gap: 10px;
}


.id-group .text {
    flex: 5;
    margin-left: 15px;
}

.id-group .text h3 {
    font-size: 22px;
 }

.id-group .text p {
    font-size: 20px;
    gap: 20px;
 }

* {box-sizing: border-box}

.container {
    float: left;
    display: flex;
    justify-content: left;
}

.container:hover {
    opacity: 50%;
}

.image {
  display: block;
  max-width: 300px;
  max-height: 300px;
}

/* SECTION 3 Graphic Design */
.graphic-title {
    display: flex;
    vertical-align: center;
    max-width: 100%;
    margin: 5px 20px;
    padding: 20px;
    background-color: transparent;
    border: 4px solid #e6e6ff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.graphic-section {
    font-family: 'Nunito Sans', sans-serif;
}

.wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin: 5px 20px;
    padding: 10px;
}

.flip-card {
  background-color: transparent;
  width: 400px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: left;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 10px 10px 10px 10px;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #e6e6ff;
  color: black;
}

.flip-card-back {
  background-color: #e6e6ff;
  color: #000000;
  transform: rotateY(180deg);
}

/* SECTION 4 Skills */
.skills-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px;
    border-radius: 8px;
    margin: 20px 5px;
    gap: 5px;
}

.skills-section .text {
    flex: 2;
}

.content-wrapper {
    position: center;
    max-width: 100%;
    padding: 20px;
    background-color: transparent;
    border: 4px solid rgb(230, 230, 255);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

 .skills-section .text h3 {
    color: var(--link-color);
    font-size: 25px;
 }

.skills-section .text p {
    font-size: 17px;
    gap: 20px;
 }

.skills-section .text .cells {
    margin-top: 20px;
    color: var(--link-color);
 }

 .skills-section .text .cells .cell {
    display: inline-block;
    flex-wrap: wrap;
    background-color: #e6e6ff;
    padding: 5px 10px;
    border: 2px ridge #e6e6ff;
    border-radius: 8px;
    margin-right: 10px;
    margin-bottom: 10px;
    transition: .1s;
 }

 /* SECTION 5 Contact */
.contact-section {
    padding: 0px 50px;
    margin-bottom: 50px;
}

.contact-section h2 {
    font-size: 25px;
}

.contact-section .group {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.contact-section .group .text {
    flex: 2;
    width: 100%;
}

.contact-section .group form {
    flex: 3;
    display: flex;
    flex-direction: column;
    width: 100%;
 }

.contact-section .group form input,
.contact-section .group form textarea {
    font-family: 'Nunito Sans', sans-serif;
    border: 3px ridge #e6e6ff;
    border-radius: 8px;
    box-shadow: 0 1px 1px #c1acce;
    padding: 10px;
    margin-bottom: 10px;
    outline: none;
    resize: none;
}

.contact-section .group form button {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    border: 8px outset #c1acce;
    color: var(--link-color);
    border-radius: 8px;
    height: 50px;
    transition: .1s;
    cursor: pointer;
}

.contact-section .group form button:hover {
    background-color: #e6e6ff;
    color: #071CC8;
    border: 3px solid #071CC8;
    padding: 5px 10px;}

 /* Footer */
 footer {
  margin-bottom: 0;
}

footer {
    background: #e6e6ff;
    color: #000000;
    text-align: center;
    padding: 0 22px;
    margin-top: 0rem;
}

footer a {
    color: var(--link-color);
    text-decoration: none;
    margin: 0 0.5rem;
}

/* SCROLL TO TOP BUTTON */
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99; /* Make sure it does not overlap */
  border: none;
  outline: none;
  background-color: #bbc8fc;
  color: #000000;
  cursor: pointer;
  padding: 10px;
  border-radius: 10px;
  font-size: 18px; /
}

#myBtn:hover {
  opacity: 50%; /* Add a dark-grey background on hover */
}

 /* Media Queries for Responsiveness */
 
/* Target only images in dark mode */
@media (prefers-color-scheme: dark) {
  /* Prevent Chrome from inverting images on macOS */
  html body img {
    filter: invert(0) !important;
  }
}

 @media (max-width: 992px) {

    /* NAVBAR */
    nav {
        flex-direction: column;
        align-items: center;
    }
    nav h2,
    nav a{
        margin-top: 10px;
        margin-left: 0px;
    }

    /* Section 1 Hero */
    .hero-section {
        flex-direction: column;
    }

    .hero-section .headshot img {
        width: 175px;
    }
     
    /* SECTION 2 Instructional Design*/
    .section-title,
    .id-group {
        flex-direction: column;
    }
    /* Section 3 Graphic Design */
    .graphic-section {
        margin-right: auto;
    }
    
    .wrapper {
        flex-direction: column;
        align-items: center;
        width: 70%;
        margin-right: auto;
}

    .flip-card {
        width: 80%;
        margin-bottom: 20px;
}

    /* SECTION 5 Contact */
    .contact-section .group {
        flex-direction: column;
    }
}

@media (max-width: 700px) {
 
    /* NAVBAR */
    nav h2{
        font-size: 28px;
    }    
    
    .nav a {
        display: flex;
        font-size: 20px;
    }

    
 /* Section 1 Hero */
    .hero-section {
        padding: 10 5px;
        margin-top: 10px;
    }

    .hero-section .text h2 {
        font-size: 20px;
    }

    /* SECTION 2 Instructional Design*/
    .id-group {
        width: 100%;
        margin-left: 0;
    }
    .id-group .text h3 {
        font-size: 20px;
    }

    * {box-sizing: border-box}

    .container {
        margin-right: auto;
    }

    /* Section 3 Graphic Design */
    .wrapper {
        width: 60%;
}

    .flip-card {
        width: 100%;
        margin-bottom: 2px;
}

     /* Section 4 Skills */
    .skills-section {
        flex-direction: column;
        padding: 0 20px;
    }

    .skills-section .text h3 {
        font-size: 20px;
    }

    .skills-section .cells {
        font-size: 16px;
    }

    /* Section 5 Contact */

    .contact-section h2 {
        font-size: 16px;
    }

    .contact-section .group form button {
        border: 6px outset;
        border-radius: 4px;
        height: 40px;
        width: 70%;
        font-size: 14px;
    }
}