body{
    background-color: #2a3727;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 20px;
    color: #e6d5bd;
    height: 80vh;
}

header{
    text-align: center;
    color: #e6d5bd; 
    border-top: 6px double #e6d5bd;
    border-bottom: 6px double #e6d5bd;
    padding: 20px 0px;
 }

 main{
    margin: 0 5vw;
    padding-bottom: 1rem;
 }

 .intro-main{
    min-height: 80vh;
    padding-bottom: 20px;;
 }
 h1{
    font-size: 48px;
 }


nav ul {
    display: flex;
    list-style-type: none;
    padding: 8px;
    justify-content: space-evenly;
}
nav li{
    padding: 12px 16px;
}

nav a{
    text-align: center;
    padding: 12px 16px;
    text-decoration: none;
    background-color: #e6d5bd;
    color: #2a3727;
    font-weight: bold;
    box-shadow: 1px 1px 8px #000000;
    border-radius: 10px;
    font-size: 20px;
}

nav a:hover{
    background-color: #FFB0A1;
    color: #2a3727;
    box-shadow: 3px 3px 8px black;
    transition-duration: 200ms;
}

 footer{
    border-top: 6px double #e6d5bd;
    background-color: #f79a85;
    color: black;
    font-size: 16px;
	margin-top: 5px;
    padding: 10px;
    width: 100%;
 }

 /********************** Rubber Duck *******************************/
 
/* Elements */
h2{
    margin-left: 10px;
}

button{
    background-color:#e6d5bd;
    font-size: 16px;
    font-weight: bolder;
    padding: 10px;
    border-radius: 16px;
    color:#2a3727;
}

 /* Images */
 .rd-happy{
    height: 400px;
    width: 600px;
    object-fit: contain;
 }

 .rd-sad{
    height: 400px;
    width: 600px;
    object-fit: contain;
    padding-top: 25px;
 }

 .rd-action{
    height: 400px;
    width: 600px;
    object-fit: contain;
    padding-top: 25px;
 }

 /* Tragic Story Flexbox */
.bs-wrapper{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 2rem;
    border-bottom: 6px double #e6d5bd;
    padding-bottom: 20px;
}

.backstory{
    flex: 1;
    margin-left: 10px;
}

.bs-image{
    flex-shrink: 0;
}

@media (max-width: 1100px) {
    .bs-wrapper {
        flex-direction: column;
         /* Stacks items vertically */
    }
    
    .backstory {
        order: 1;
    }

    .bs-image {
        order: 2;
        align-self: center;
    }
    
}

/* Early Adventure Flexbox */

.ea-wrapper{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 2rem;
    border-bottom: 6px double #e6d5bd;
    padding-bottom: 20px;
}

.early-adventure{
    flex: 1;
    margin-left: 10px;
}

.ea-image{
    flex-shrink: 0;
}

@media (max-width: 1100px) {
    .ea-wrapper {
        flex-direction: column;
         
    }
    
    .early-adventure {
        order: 1;
    }

    .ea-image {
        order: 2;
        align-self: center;
    }
    
}

/*----------------------------About Me----------------*/
#waluigi{
    height: 500px;
    width: 500px;
}

/*--------------------------Functions--------------*/

#functionsMain{

display: flex;
flex-direction: row;
gap: 20px;
justify-content: center;
}

#functionsMain button{
    width: 20%;
    gap: 10px;
}

#numCounter{
    text-align: center;
}

#duckpic img{
    max-width: 30%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* --------------------------Functions Assignment---------------------------------------------- */
/* --------------------------Functions 1---------------------------------------------- */
#pageColorTextBox{
    background-color:#e6d5bd;
    font-size: 30px;
    width: 30%;
    min-height: 5rem;
    font-weight: bolder;
    padding: 10px;
    border-radius: 16px;
    text-align: center;
    align-content: center;
}

input[type="text"]{
    width:  30%;
    height: 3rem;
    font-size: 1.5rem;
}

input[type="color"]{
    width: 4rem;
    height: 2rem;
}

#colorSubmit{
    margin-left: 10px;
}

/* --------------------------Functions 2---------------------------------------------- */
#bigImage{
    width: 700px;
    border: solid 2px beige;
    
}

#function-2-heading{
    text-align: center;
}

/* --------------------------Functions 3---------------------------------------------- */
#dogpics{
    display: flex;
    justify-content: space-evenly;
   
}

#dogpics figure{
    flex: 1 1 30%
}

#dogpics img{
    width: 100%;
}

#dogpics figcaption{
text-align: center;
font-weight: bold;
}

/* --------------------------Functions 3---------------------------------------------- */

#cardFamily{
    display: flex;
    justify-content: center;
    gap: 10px;
}

#cardFamily button{
    width: 30%;
}

/* --------------------------------------------Clock 1------------------------------------- */

.clock{
    background-color: black;
    position: relative;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    margin: 0 auto;
    margin-top: 100px;
    font-size: 1rem;
}

.intro-main ul{
    list-style: none;
    position: absolute;
    top: 50%;           
    left: 50%;          
    transform: translate(-50%, -50%);
}

.intro-main li{
   position: absolute;
    top: 50%;
    left: 50%; 
}

.intro-main li:nth-child(1) {transform: translate(-50%, -50%) rotate(30deg) translateY(-280px) rotate(-30deg);}
.intro-main li:nth-child(2) {transform: translate(-50%, -50%) rotate(60deg) translateY(-280px) rotate(-60deg);}
.intro-main li:nth-child(3) {transform: translate(-50%, -50%) rotate(90deg) translateY(-280px) rotate(-90deg);}
.intro-main li:nth-child(4) {transform: translate(-50%, -50%) rotate(120deg) translateY(-280px) rotate(-120deg);}
.intro-main li:nth-child(5) {transform: translate(-50%, -50%) rotate(150deg) translateY(-280px) rotate(-150deg);}
.intro-main li:nth-child(6) {transform: translate(-50%, -50%) rotate(180deg) translateY(-280px) rotate(-180deg);}
.intro-main li:nth-child(7) {transform: translate(-50%, -50%) rotate(210deg) translateY(-280px) rotate(-210deg);}
.intro-main li:nth-child(8) {transform: translate(-50%, -50%) rotate(240deg) translateY(-280px) rotate(-240deg);}
.intro-main li:nth-child(9) {transform: translate(-50%, -50%) rotate(270deg) translateY(-280px) rotate(-270deg);}
.intro-main li:nth-child(10) {transform: translate(-50%, -50%) rotate(300deg) translateY(-280px) rotate(-300deg);}
.intro-main li:nth-child(11) {transform: translate(-50%, -50%) rotate(330deg) translateY(-280px) rotate(-330deg);}
.intro-main li:nth-child(12) {transform: translate(-50%, -50%) rotate(0deg) translateY(-280px) rotate(0deg);}

#hourHand{
    width: 10px;
    height: 120px;
    border-radius: 8px;
    background-color: #e6d5bd;
    position: absolute;
    transform-origin: bottom center;
    top: 36%;
    left: 50%;
    z-index: 2
}

#minuteHand{
    width: 5px;
    height: 200px;
    border-radius: 8px;
    background-color: #e6d5bd;
    position: absolute;
    transform-origin: bottom center;
    top: 25%;
    left: 50%;
}

#secondHand{
    width: 3px;
    height: 150px;
    border-radius: 8px;
    background-color: #7f270f;
    position: absolute;
    transform-origin: bottom center;
    top: 32%;
    left: 50%;
}

#clockText{
    text-align: center;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~Clock 2~~~~~~~~~~~~~~~~~~~~~~~~` */

#cube-page{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    perspective: 900px;
    height: 100vh;
}

#cube-wrapper{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

#cube{
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-35deg) rotateY(45deg)
}

#top{
    width: 200px;
    height: 200px;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: rotateX(90deg) translateZ(105px);
    line-height: 0;
    background-color: rgb(136, 15, 15);
    color:#e6d5bd;
    animation: color 10s infinite;
    border: 6px solid #e6d5bd;
}

#left{
    width: 200px;
    height: 200px;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: rotateY(-90deg) translateZ(105px);
    line-height: 0;
    background-color: rgb(136, 15, 15);
    color:#e6d5bd;
    animation: color 10s infinite;
    border: 6px solid #e6d5bd;
}

#right{
    width: 200px;
    height: 200px;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translateZ(105px);
    line-height: 0;
    background-color:rgb(136, 15, 15);
    color:#e6d5bd;
    animation: color 10s infinite;
    border: 6px solid #e6d5bd;
}

@keyframes color{
    0%, 100% {background-color: rgb(136, 15, 15);}
    50% { background-color: rgb(35, 22, 100);}
}

#sec{
    font-size: 80px;
}

#min{
    font-size: 80px;
}

#hour{
    font-size: 80px;
}

/* ~~~~~~~~~~~~~~~~~~~~~Rock, Paper, Scissors~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#player1, #player2, #result{
    font-size: 2rem;
}

#player1{
    float: left;
}

#player2{
    float: right;
    display: none;
}

#result{
    border: 8px solid #e6d5bd;
    clear: both;
    margin: 100px auto;
    width: 70%;
    min-height: 200px;
}

#madlibs input{
    font-size: 16px;
}

#madlibs input[type="text"]{
    line-height: 2rem;
    width: 20%;
}

#madlibs{
    color: #e6d5bd; 
    border-top: 6px double #e6d5bd;
    border-bottom: 6px double #e6d5bd;
    padding: 20px 0px;
 }

.boxColor{
    width: 100px;
    height: 50px;
    overflow: hidden;
    display: inline-block;
}

/* ~~~~~~~~~~~~~~~~~~~Shorthand~~~~~~~~~~~~~~~~~ */

section {

    border: 4px solid #e6d5bd;
    border-radius: 16px;
    margin: 20px auto;
    width: 80%;
    padding: 10px;
    right: 50px;
    background-color: #2a3727
}

pre {
white-space: pre-wrap;
}

#shorthandHead{
    background-color: #2a3727;
}

#shorthandBody{
    background-color: #e6d5bd
}