/*
palette:
white        #ffffff
yellow        #f5b52a
orange red    #f04d23
light green   #4abfad
dark green    #2b937f
*/

html,body.intro{
    background-color: #4abfad;
    text-align: left;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif,sans-serif;
    color:white;
    width: 100%;
    height: 100%;
    margin: 0;
}

.intro-logo{
    margin:7%;
}
.intro-logo img{
    width:100%;
}
.riddle {
    text-align: center;
    color: white;
    margin-bottom:6%;
}

.intro-button{
    margin-top: 5%;
    text-align:right;
}

body.gallery{
    background-color: #4abfad;
    font-family: "Futura Condensed Medium",sans-serif;
}

.gallery-button{
    margin-bottom: 5%;
}
#gallery-container{
    display:flex;
    flex-direction: column;
    margin:5%;
    gap: 15px;
}

#riddle{
    border: 2px solid #f5b52a;
    border-radius: 20px;
    margin-left: 30%;
    margin-right: 30%;
    width: fit-content;
}

#home-container{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.line{
    display: flex;
    width: fit-content;
    border-bottom: #f5b52a 6px dotted;
    padding: 1%;
    margin:5% 0;
    font-size: 200%;
}

#line1{margin-left: 5%;}
#line2{margin-left: 35%;}
#line3{
    margin-top: 20%;
    margin-left: 50%;}
#line4{margin-left: 10%;}
#line5{margin-left: 20%;}
#line6{margin-left: 40%;}
#line3-1{align-self: center;}

.hover-swap{
    display: inline-flex;
    cursor: pointer;}

.hover-swap span{white-space: nowrap;}

.hover-swap .hover{display: none;}

.hover-swap:hover .original{ /*when .hover-swap is in condition "hover"*/display: none;}

.hover-swap:hover .hover{display: inline;}

.hover-swap {
  display: inline-flex;
  position: relative;
}

.hover-swap .original,.hover-swap .hover {transition: 0.25s ease;}

.hover-swap .hover {
  left: 0;
  top: 0;
  opacity: 0;
}

.hover-swap:hover .original {opacity: 0;}

.hover-swap:hover .hover {opacity: 1;}

.click-swap span{
    display: none;
    white-space: nowrap;
    vertical-align: baseline;}

.click-swap .click1,
.click-swap .click2{display: none;}

.click-swap .original{
    vertical-align: baseline;
    display: inline;}

.riddle .show1{display:contents;}
.riddle .show2{display: none;}
.riddle:hover .show2{display: contents;}