/* 1.Basic /////////////////////////////////////////////////////////*/
html{
    background-color: beige;
    font-family: 'Fauna One' 'Times New Roman', Times, serif;
    margin: 0px;
    margin-left: 5%;
    padding: 0;
}

/* 2.Position /////////////////////////////////////////////////////*/
body{
    margin: 0;
}
header{
    margin: 0;
}
.side{
    display:flex;
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
    background-color: white;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 4%;
}
.side div{
    transform: rotate(90deg);   
    margin: 30px 0;
    padding-right: 5px;
    padding-left: 5px;
}
footer{
        position: absolute;
        bottom: 0px;
        width: 94%;
        display:flex;
        flex-direction: column;
        align-items: center;
}
.network{
    display: inline-flex;
}
.network img{
    height: 30px;
    padding: 5px;
    align-items: center;
}
.ft{
    display: inline-flex;
    flex-wrap: wrap;
}
#c{
    padding-left: 3px;

}
#l{
    padding-left: 20px;
}
.ft img{
    height: 50px;
}
.BackG{
    width: 500px;
    height: 500px;
    background-color: #6d3a3a;
    border-radius: 5px;
    box-shadow: 1px 1px 3px gray;
    position: absolute;
    right: 10%;
    top: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.BackG img{
    height: 30px;
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.title{
    padding-left: 150px;
    margin-top: 200px;
}

/* 3. Style ///////////////////////////////////////////////////////*/
a{
    text-decoration: none;
    color: black;
}
.re{
    font-size: 10px;
    text-align: center;
}
.title{
    padding-left: 150px;
    margin-top: 200px;
}
h1{
    font-family:'Cinzel Decorative', cursive;
    font-size: 5em;
}
h2{
    font-family:'Fauna One', serif;
    margin-left: 5px;
}
.side{
    box-shadow: 1px 1px 3px rgba(128, 128, 128, 0.589);
    font-family:'League Gothic', sans-serif ;
    font-size: 1.3em;
}
.side div{
    cursor: pointer;
    box-sizing: border-box;
}
.side div:hover{
    border-bottom: 2px black solid;
}
footer{
    font-family:'Fauna One', serif;
}
.ft{
    font-family: 'Cinzel', serif;;
}

/* 4.Challenge///////////////////////////////////////////////////*/
.all{
    flex-direction: column;
    width: auto;
    height: 100%;
    display: inline-flex;
    position: relative;
    justify-items: center;
    justify-content: center;
    align-items: center;
}
.mail{
    position: relative;
    margin: 30%;
}
.letterB{
    z-index:3;
    position: relative;
    width: auto;
    height: auto;
}
.owl{
    stroke-width: 0.7px;
    stroke: rgb(212, 182, 10);
    position: absolute;
    left: -5%;
    top:-5%;
    z-index: 10;
    transform: scale(0);
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
}
.letter{ 
    stroke-linecap: round; 
    stroke: rgb(0, 0, 0);
    stroke-width: 0.1px;
    stroke-linejoin: round;
    transform: scale(1.7);
    fill: #FBF5E9;
    stroke-dasharray: 200;
    stroke-dashoffset: 0;
    z-index: 3;
}
.circleA{
    width: 200px;
    height: 200px;
    background-color: goldenrod;
    position: absolute;
    top: -50px;
    left: -12px;
    z-index: 0;
    border-radius: 50%;
}
.circleB{
    width: 200px;
    height: 200px;
    border: 1px solid goldenrod;
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    top: -50px;
    left: -12px;
    box-sizing: border-box;
}
.circleC{
    transform: scale(0);
    width: 200px;
    height: 200px;
    background-color: goldenrod;
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    color: #6d3a3a;
    font-family:'Fauna One', serif;
    font-size: 40px;
    text-align: center;
    line-height: 200px;
    font-weight: 800;
    z-index: 50;
    top: -7%;
    left: -12px;
    cursor: pointer;
}
.sBack{
    fill: rgb(105, 14, 14);
    stroke: rgb(105, 14, 14);
}
.sFront{
    position: absolute;
    top: 0;
    left: 0;
    fill: maroon;
    stroke: rgb(148, 8, 8);
    stroke-width: 0.5px;
}
.stamp{
    position: absolute;
    top: 20px;
    left: 40px;
    transform: scale(0.5);
    opacity: 0; 
    z-index: 4;
}
.word{
    position: absolute;
    font-size: 40px;
    bottom: -16px;
    left: 32px;
    font-family: 'Parisienne', cursive;
    color: rgb(70, 12, 12);
    font-weight: 800;

}
.button{
    width: 100px;
    height: 25px;
    padding: 5px 20px;
    border-radius: 15px;
    background-color: #FBF5E9;
    color: #6d3a3a;
    font-family:'Fauna One', serif;
    font-size: 20px;
    text-align: center;
    line-height: 25px;
    font-weight: 800;
    cursor: pointer;
    position: relative;
    margin-top: 30px;
}
.circleC:hover,
.button:hover{
    transform: scale(0.9);
}


.change .stamp{
    animation: stamp 2.5s forwards;
    animation-delay: 0s;
}
.change .letter{
    animation: letter 2.5s forwards ease-out;
    animation-delay: 0s;
}
.change .circleA{
    animation: cA 3.5s forwards;
    animation-delay: 0s;
}
.change .circleB{
    animation: cB 3.5s forwards;
    animation-delay: 0s;
}
.change .circleC{
    animation: cC 1s forwards;
    animation-delay: 6.5s;
}
.change .button{
    animation: button 3.5s forwards;
    animation-delay: 0s;
}
.change .owl{
    animation: owl 3s linear forwards;
    animation-delay: 3.5s;
}

.back .stamp{
    animation: stampB 1s forwards;
    animation-delay: 0s;
}
.back .letter{
    animation: letterB 1s forwards ease-out;
    animation-delay: 0s;
}
.back .circleA{
    animation: cAB 1s forwards;
    animation-delay: 0s;
}
.back .circleB{
    animation: cAB 1s forwards;
    animation-delay: 0s;
}
.back .circleC{
    animation: cCB 1s forwards;
    animation-delay: 0s;
}
.back .button{
    animation: buttonB 1s forwards;
    animation-delay: 0s;
}
.back .owl{
    animation: owlB 1s forwards;    
    animation-delay: 0s;
}


@keyframes stamp {
    0%{transform: scale(3);opacity: 0;}
    15%{transform: scale(0.4);opacity: 1;}
    20%{transform: scale(0.5);opacity: 1;}
    100%{transform: scale(0.5);opacity: 0;}    
}
@keyframes letter {
    0%{transform: scale(1.7);}
    14%{transform: scale(1.6);}
    20%{transform: scale(1.7);fill: #FBF5E9;stroke-dashoffset: 0;}
    70%{transform: scale(1.7);}
    100%{transform: scale(0.7); fill: #fbf5e900;stroke-dashoffset: 200;}
}
@keyframes cA {
    65%{transform: scale(1)}
    70%{transform: scale(0.9);}
    75%{transform: scale(1);}
    100%{transform: scale(0);}
}
@keyframes cB {
    65%{transform: scale(1);}
    80%{transform: scale(0.9);opacity: 1;}
    100%{transform: scale(3); opacity: 0;}
}
@keyframes button {
    50%{transform: scaleX(1);color: #6d3a3a;border-radius: 15px;padding: 5px 20px;}
    59%{color: #6d3a3a00;}
    69%{border-radius: 50%;padding: 0 ;color: #6d3a3a00;transform:  scalex(0.25) scale(1);}
    75%{border-radius: 50%;padding: 0 ;color: #6d3a3a00;transform:scalex(0.25) scale(1.1);opacity: 1;}
    100%{border-radius: 50%;padding: 0 ;color: #6d3a3a00;transform: scalex(0.25) scale(0);opacity: 0;}
}
@keyframes owl {
    0%{stroke-dashoffset: 300;transform:translate(0,0) scale(1.5) ;}
    65%{transform:translate(0,0) scale(1.5) ;}
    81%{stroke-dashoffset: 0;opacity: 1;}
    100%{stroke-dashoffset: 0;transform:translate(200px,-200px) scale(0.4);opacity: 0;}
}
@keyframes cC {
    0%{transform: scale(1);opacity: 0;}
    100%{transform: scale(1);opacity: 1;}
}


@keyframes stampB{
    0%{transform: scale(0.5);opacity: 0;}
    100%{transform: scale(0.5);opacity: 0;}
}
@keyframes letterB {
    0%{transform: scale(0);opacity: 0;}
    50%{transform: scale(0);opacity: 0;}
    100%{transform: scale(1.7);opacity: 1;}
}
@keyframes cAB{
    0%{transform: scale(0);opacity: 0;}
    50%{transform: scale(0);opacity: 0;}
    100%{transform: scale(1);opacity: 1;}
}
@keyframes cCB{
    0%{transform: scale(1);opacity: 1;}
    100%{transform: scale(0);opacity: 0;}
}
@keyframes buttonB {
    0%{width: 100px;color: #6d3a3a;border-radius: 15px;padding: 5px 20px;transform: scale(0);opacity: 0;}
    50%{width: 100px;color: #6d3a3a;border-radius: 15px;padding: 5px 20px;transform: scale(0);opacity: 0;}
    100%{width: 100px;color: #6d3a3a;border-radius: 15px;padding: 5px 20px;transform: scale(1);opacity: 1;}

}
@keyframes owlB {
    0%{transform: scale(0);opacity: 0;}
    100%{transform: scale(0);opacity: 0;}
}











/* 5. Responsive ///////////////////////////////////////////////*/
@media only screen and (max-width: 1500px){
    .BackG{
        width: 30vw;
        height: 30vw;
        position: absolute;    
        top:20%;
        right:10%
    }
    h1{
        font-size: 5vw;
    }
    h2{
        font-size: 2vw;
    }
    .title{
            padding-left: 100px;
            margin-top: 190px;
    }
    .BackG img{
        height:2vw;
    }
    p{
        font-size: 0.5em;
        bottom: -20px;
    }
   .mail{
       transform: scale(0.8);
       margin: 15%;
    }
    .circleC{
        top: -10%;
    }
}
@media only screen and (max-width: 788px){
    body{
        display: flex;
        align-items: center;
        justify-items: center;
        flex-direction: column;
    }
    .side{
        width: 30px;
    }
    .BackG{
        width: 350px;
        height: 350px;
        position: relative;    
        margin: auto;
        top:0;
        right:0;
        }
    .title{
        padding-left:0;
        margin-top: 0;
        text-align: center;
    }
    h1{
        font-size: 2em;
    }
    footer{
        margin-top: 50px;
        position: static;
    }
    .BackG img{
        height: 20px;
        position: absolute;
    }
    p{
        font-size: 0.5em;
        bottom: -20px;
    }
}
@media only screen and (max-width: 512px){
    .BackG{
        width: 250px;
        height: 250px;
        } 
    h2{
        font-size: 0.75em;
    }
    p{
        font-size: 0.5em;
        bottom: -20px;
    }
    .mail{
        transform: scale(0.7);
        margin: 10%;
    }
}
@media only screen and (max-height: 700px){
    .title{
        margin-top: 5vh;
    }
    footer{
        margin-top: 150px;
        position: static;
    }
}