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

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

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(to left bottom, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
body::-webkit-scrollbar {
    display: none;
}

section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

a, a:visited, a:hover, a:active {
    color: inherit;
}

/* background containers */
.background {
    padding: 24px;
    max-width: 1000px;
    width: 90vw;
    display: flex;
    flex-direction: row-reverse;
    background-color: rgba(173, 173, 173, 0.2);
    justify-content: center;
}

#Hero {
    width: 100vw;
}

/* about me carousel */

#About .background {
    flex-direction: column;
    align-items: center;
}

.bio-carousel {
    /* display: none; */
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
}

.bio-panel {
    aspect-ratio: 16 / 9;
    background-size: cover;
}

.bio-panel.next {
    background-image: url('assets/Tulsa_02.jpg');
    position: absolute;
    right: -100vw;
    height: 100%;
}

.bio-panel.prev {
    display: none;
}

.bio-nav {
    position: absolute;
    bottom: 80px;
    display: flex;
    width: 60%;
    justify-content: space-around;
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.6) 100%) repeat 0 0;
}

.bio-nav i {
    color: white;
}

.bio-description {
    background-color: white;
    width: 75%;
    margin: auto;
    display: flex;
    justify-content: center;
    margin-top: -64px;
    padding: 24px;
    border-radius: 24px;
    z-index: 10;
}

#location {
    background-image: url('assets/Tulsa_01.jpg');
}


.LinksContainer {
    margin-top: 8px;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    gap: 8px;
}
@media screen and (max-device-width: 600px) {
    .LinksContainer {
        flex-direction: column;
    }
}

.LinksContainer a {
    text-decoration: none;
}

.link-container i::before {
    display: inline-block;
}

.ResumeContainer,
.EmailContainer,
.CopyEmail,
.link-container {
    display: flex;
    align-items: center;
    padding: 4px 6px 4px 12px;
    border-radius: 8px;
    margin-left: 4px;
    gap: 8px;
    background-color: #c777b9
}

.CopyEmail {
    position: relative;
}

.CopyMessage {
    position: absolute;
    background-color: white;
    display: flex;
    top: -48px;
    left: 2px;
    padding: 8px;
    border-radius: 8px;
    gap: 2px;
    align-items: baseline;
    color: green;
    display: none;
}

.CopyMessage::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 10%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-bottom: 0;
    border-top-color: white;
    margin-left: 20px;
    margin-bottom: -20px;
}

.link-container,
.EmailContainer {
    padding: 4px 6px;
    gap: 4px;
}

.EmailContainer:hover,
.CopyEmail:hover,
.link-container:hover {
    text-decoration: underline;
    cursor: pointer;
    color: #5ffbf1;
}

.CopyEmail i::before {
    display: inline-block;
}

.ResumeContainer a h2:hover,
.tabs h2:hover {
    text-decoration: underline;
    cursor: pointer;
    color: #5ffbf1;
}

.LikesWork {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.LikesWorkResumeTabs {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tabs {
    padding: 4px;
    display: flex;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.1);
}

.tabs h2{
    padding: 4px;
    border-radius: 4px;
}

.tabs .active {
    background-color:rgba(0, 0, 255, 0.2)
}

.ResumeContainer a:nth-child(2) {
    height: 42px;
    width: 42px;
    justify-content: center;
    display: flex;
    border-radius: 10%;
    background-color: #9a9ae1;
    align-items: center;
}

.LikesWorkResumeTabs a:hover {
    color: #5ffbf1;
}

.LikesWorkResumeTabs a i {
    font-size: 24px;
}

/* panels */

.LikesContainer {
    height: 60vh;
    width: 90vw;
    display: flex;
    gap: 10px;
    max-width: 1000px;
    margin-top: 10px;
}

.likes-panel,
.works-panel {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    border-radius: 50px;
    color: #fff;
    cursor: pointer;
    flex: 0.5;
    position: relative;
    transition: flex 0.7s ease-in;
}

.likes-panel h3,
.works-panel h3 {
    font-size: 24px;
    position: absolute;
    bottom: 20px;
    left: 20px;
    margin: 0;
    opacity: 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.6) 100%) repeat 0 0;
    border-radius: 4px;
}


.likes-panel.active {
    flex: 5;
}

.works-panel.active {
    flex: 2;
}

.likes-panel.active h3,
.works-panel.active h3 {
    opacity: 1;
    transition: opacity 0.3s ease-in 0.4s
}

#coffee {
    background-image: url('assets/coffee.jpg');
}

#coding {
    background-image: url('assets/coding.jpg');
}

#environment img:nth-child(1) {
    border-top-left-radius: 50px;
}
#environment img:nth-child(2) {
    border-top-right-radius: 50px;
}
#environment img:nth-child(3) {
    border-bottom-left-radius: 50px;
}
#environment img:nth-child(4) {
    border-bottom-right-radius: 50px;
}

#music,
#environment {
    display: flex;
    flex-wrap: wrap;
}

#music img,
#environment img {
    height: 50%;
    width: 50%;
    object-fit: cover;
}

#music img:nth-child(1) {
    border-top-left-radius: 50px;
}
#music img:nth-child(2) {
    border-top-right-radius: 50px;
}
#music img:nth-child(3) {
    border-bottom-left-radius: 50px;
}
#music img:nth-child(4) {
    border-bottom-right-radius: 50px;
}

.WorkContainer {
    height: 40vh;
    width: 90vw;
    display: none;
    max-width: 1000px;
    margin-top: 10px;
}

.works-panel {
    background-size: contain;
}

#smiling-school-homepage {
    background-image: url('assets/Smile_School_Homepage.png');
}

#smiling-school-pricing {
    background-image: url('assets/Smile_School_Pricing.png');
}

#headphones {
    background-image: url('assets/Holberton\ Headphones.png');
}

#pomodoro {
    background-image: url('assets/PomodoroApp.png');
}

.contact {
    display: flex;
    width: 400px;
    /* margin-top: 12px; */
    align-items: center;
    flex-direction: column;

    padding: 24px;
    max-width: 1000px;
    width: 90vw;
    background-color: rgba(173, 173, 173, 0.2);
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}

.EmailMessage {
    display: flex;
    justify-content: center;
    align-items: center;
}



/* basic content unit */
.card {
    width: 464px;
    height: 464px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* profile circle */
img.profile-picture {
    width: 400px;
    height: 400px;
    border-radius: 50%;
}

footer {
    max-width: 1000px;
    width: 90vw;
    margin-top: 40px;
    margin-bottom: 20px;
}

footer div {
    margin: auto;
    width: fit-content;
}

footer div p {
    font-style: italic;
}

/* typewriter */
.typewriter h2 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation:
    typing 5.1s steps(30, end) infinite,
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0% }
  30% { width: 100% }
  70% { width: 100% }
  to { width: 0% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}