/*Font*/
@font-face {
    font-family : "Numans";
    src : url("fonts/Numans-Regular.woff"),
    url("fonts/Numans-Regular.woff2");
    font-weight : normal;
    font-style : normal;
}

/*all*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    font-family: "Numans";
}

/*background color*/
#darkCanvas{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom right, rgb(0,0,0), rgb(6,61,62)100%);
    position: fixed;
    z-index: 0;
}

#clearCanvas{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom right, rgb(255,255,255), rgb(6,61,62)80%);
    position: fixed;
    z-index: 0;
}


html{
    height: 100%;
}

body{
    display: flex;
    flex-direction: row;
    height: 100%;
}

h1{
    padding-bottom: 1em;
}

/*----------------header----------------*/
header{
    display: flex;
    width: 40%;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    z-index: 10;
    padding: 0 4em 1em 2em;
}
header a{
    display: flex;
    padding: 2em 2em 8em 2em;
    width: 100%;
}
#logo{
    height: 100%;
    transition: all .3s ease-in-out;
}

/*dark button*/
#darkButton1, #darkButton2, #darkButton3, #darkButton4, #darkButton5{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-color: rgba(6, 255, 255, 0.5);
    color: rgb(0, 0, 0);
    font-size: 25px;
    transition: all 0.6s ease-in-out;
    padding: 1em 1em;
    margin: 2%;
    border-color: rgb(0, 0, 0);
    box-shadow: 0px 0px 20px rgba(6, 255, 255, 0.25);
    border-radius: 10px;
}
#darkButton1:hover, #darkButton2:hover, #darkButton3:hover, #darkButton4:hover, #darkButton5:hover, #darkButton6:hover, #darkButton7:hover{
    background-color: rgba(6, 255, 255, 1);
    transform: scale(1.2);
    transition: all 0.2s ease-in-out;
}
#darkButton6{
    display: none;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-color: rgba(6, 255, 255, 0.5);
    color: rgb(0, 0, 0);
    font-size: 25px;
    transition: all 0.6s ease-in-out;
    padding: 1em 1em;
    margin: 2%;
    border-color: rgb(0, 0, 0);
    box-shadow: 0px 0px 20px rgba(6, 255, 255, 0.25);
    border-radius: 10px;
}
#darkButton7{
    display: flex;
    width: 50%;
    justify-content: center;
    align-items: center;
    background-color: rgba(6, 255, 255, 0.5);
    color: rgb(0, 0, 0);
    font-size: 25px;
    transition: all 0.6s ease-in-out;
    padding: 1em 1em;
    margin: 2%;
    border-color: rgb(0, 0, 0);
    box-shadow: 0px 0px 20px rgba(6, 255, 255, 0.25);
    border-radius: 10px;
}

/*clear button*/
#clearButton1, #clearButton2, #clearButton3, #clearButton4, #clearButton5{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-color: rgba(6, 255, 255, 0.5);
    color: rgb(255,255,255);
    font-size: 25px;
    transition: all 0.6s ease-in-out;
    padding: 1em 1em;
    margin: 2%;
    border-color: rgb(255,255,255);
    box-shadow: 0px 0px 20px rgba(6, 255, 255, 0.25);
    border-radius: 10px;
}
#clearButton6{
    display: none;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-color: rgba(6, 255, 255, 0.5);
    color: rgb(255,255,255);
    font-size: 25px;
    transition: all 0.6s ease-in-out;
    padding: 1em 1em;
    margin: 2%;
    border-color: rgb(255,255,255);
    box-shadow: 0px 0px 20px rgba(6, 255, 255, 0.25);
    border-radius: 10px;
}
#clearButton7{
    display: flex;
    width: 50%;
    justify-content: center;
    align-items: center;
    background-color: rgba(6, 255, 255, 0.5);
    color: rgb(255, 255, 255);
    font-size: 25px;
    transition: all 0.6s ease-in-out;
    padding: 1em 1em;
    margin: 2%;
    border-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 20px rgba(6, 255, 255, 0.25);
    border-radius: 10px;
}
#clearButton1:hover, #clearButton2:hover, #clearButton3:hover, #clearButton4:hover, #clearButton5:hover, #clearButton6:hover, #clearButton7:hover{
    background-color: rgba(6, 255, 255, 1);
    transform: scale(1.2);
    transition: all 0.2s ease-in-out;
}

/*----------------main----------------*/
main{
    display: flex;
    width: 170%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    font-size: 25px;
}
.myName{
    transition: all 1s ease-in-out;
}
.myName:hover{
    color:rgba(6, 255, 255, 1);
    transition: all 0.01s ease-in-out;
}
#darkH1{
    letter-spacing: -8px;
    padding-right: 1em;
    color: black;
}
#clearH1{
    letter-spacing: -8px;
    padding-right: 1em;
    color: white;
}

/*dark text*/
#aboutD, #goalD, #skillsD,#contactD{
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: center;
    padding: 1em;
    background-color: rgba(6, 61, 62, 0.8);
    border-radius: 20px;
    color: black;
    transition: all .6s ease-in-out;
}
#skillsD{
    width: 75%;
}
#aboutD p, #goalD p, #skillsD p, #experienceD p, #contactD p{
    padding-top: 0.5em;
    width: 75%;
}
#skillsD ul{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    padding: 1em;
}
#skillsD li{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.5em;
    margin-bottom: 1em;
    background-color: rgba(6, 255, 255, 0.2);
    border-radius: 20px;
    width: 100%;
    transition: all .6s ease-in-out;
}
#skillsD li:hover{
    background-color: rgba(6, 255, 255, 1);
    transition: all .1s ease-in-out;
    transform: scale(1.2);
}

#experienceD{
    display: none;
    width: 75%;
    height: 75%;
    color: black;
    transition: all .6s ease-in-out;
}
#experience{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 1em;
    background-color: rgba(6, 255, 255, 0.1);
    border-radius: 20px;
    border-style: solid;
    width: 50%;
}
#diplomas{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1em;
    background-color: rgba(6, 255, 255, 0.1);
    border-radius: 20px;
    border-style: solid;
    width: 50%;
}
#experienceD ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: start;
    height: 80%;
    padding: 1em;
    overflow: auto;
}
#experienceD li{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: start;
    padding: 0.5em;
    padding-top: 1.5em;
    border-radius: 20px;
}
#experienceD a:active{
    text-decoration: none;
    color: rgba(6, 255, 255, 0.8);
}
#experienceD a:visited{
    color: rgba(6, 255, 255, 0.8);
}

/*clear text*/
#aboutC, #goalC, #skillsC, #contactC{
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: center;
    padding: 1em;
    background-color: rgba(6, 61, 62, 0.2);
    border-radius: 20px;
    color: white;
    transition: all .6s ease-in-out;
}
#aboutC p, #goalC p, #skillsC p, #experienceC p, #contactC p{
    padding-top: 0.5em;
    width: 75%;
}
#skillsC{
    width: 75%;
}
#skillsC ul{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    padding: 1em;
}
#skillsC li{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.5em;
    margin-bottom: 1em;
    background-color: rgba(6, 255, 255, 0.1);
    border-radius: 20px;
    width: 100%;
    transition: all .6s ease-in-out;
}
#skillsC li:hover{
    background-color: rgba(6, 255, 255, 0.8);
    transition: all .1s ease-in-out;
    transform: scale(1.2);
}
#skills{
    display: flex;
}

#experienceC{
    display: none;
    width: 75%;
    height: 75%;
    color: white;
    transition: all .6s ease-in-out;
}
#experienceC ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: start;
    height: 80%;
    padding: 1em;
    overflow: auto;
}
#experienceC li{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: start;
    padding: 0.5em;
    padding-top: 1.5em;
    border-radius: 20px;
}
#experienceC a:active{
    text-decoration: none;
    color: rgba(6, 255, 255, 0.8);
}
#experienceC a:visited{
    color: rgba(6, 255, 255, 0.8);
}

/*----------------footer----------------*/
footer{
    display: flex;
    flex-direction: column;
    z-index: 10;
    padding: 1em;
}

/*images*/
#mode{
    display: flex;
    width: 100%;
    transition: all .2s ease-in-out;
}

img:hover{
    transform: scale(1.2);
}

#logoName{
    width: 10%;
    transform: none;
}

#linkedin{
    width: 10%;
    transition: all .2s ease-in-out;
}

#email{
    width: 5%;
}
#email:hover{
    transform: none;
}


/*Scrollbar*/
::-webkit-scrollbar{
    width: 10px;
}
::-webkit-scrollbar-track{
    box-shadow: inset 0 0 10px rgba(0,0,0,0.8); 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb{
    background: rgba(6, 255, 255, 0.4); 
    border-radius: 10px;
}


/*----------------Phone----------------*/
@media all and (max-width: 1300px)
{
   
    body{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }
    header{
        display: flex;
        width: 100%;
        height: 20%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        z-index: 10;
        padding: 0 4em 1em 2em;
    }

    main{
        display: flex;
        height: 65%;
    }

    footer{
        display: flex;
        width: 100%;
        height: 15%;
        justify-content: center;
        align-items: flex-end;
    }
    #mode{
        width: 6%;
    }
    #aboutD, #goalD, #skillsD,#contactD{
        display: none;
        width: 75%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 1em;
        background-color: rgba(6, 61, 62, 0.8);
        border-radius: 20px;
        color: black;
        transition: all .6s ease-in-out;
        overflow: auto;
        font-size: 20px;
        height: 90%;
    }
    #aboutC, #goalC, #skillsC,#contactC{
        display: none;
        width: 75%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 1em;
        background-color: rgba(6, 61, 62, 0.2);
        border-radius: 20px;
        color: white;
        transition: all .6s ease-in-out;
        overflow: auto;
        font-size: 20px;
        height: 90%;
    }
    #logo{
        padding-top: 5.5em;
    }
    #skillsD ul{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        padding: 1em;
    }
    #skillsD li{
        width: 80%;
    }
    #skillsC ul{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        padding: 1em;
    }
    #skillsC li{
        width: 80%;
    }

}

@media all and (max-height: 640px)
{
   
    body{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }
    header{
        display: flex;
        width: 100%;
        height: 20%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        z-index: 10;
        padding: 0 4em 1em 2em;
    }

    main{
        display: flex;
        height: 65%;
    }
    #experienceD{
        font-size: 20px;
    }
    #experienceC{
        font-size: 20px;
    }

    footer{
        display: flex;
        width: 100%;
        height: 15%;
        justify-content: center;
        align-items: flex-end;
    }
    #mode{
        width: 6%;
    }
    #aboutD, #goalD, #skillsD,#contactD{
        display: none;
        width: 75%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 1em;
        background-color: rgba(6, 61, 62, 0.8);
        border-radius: 20px;
        color: black;
        transition: all .6s ease-in-out;
        overflow: auto;
        font-size: 20px;
        height: 90%;
    }
    #aboutC, #goalC, #skillsC,#contactC{
        display: none;
        width: 75%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 1em;
        background-color: rgba(6, 61, 62, 0.2);
        border-radius: 20px;
        color: white;
        transition: all .6s ease-in-out;
        overflow: auto;
        font-size: 20px;
        height: 90%;
    }
    #logo{
        padding-top: 5.5em;
    }
    #skillsD ul{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        padding: 1em;
    }
    #skillsD li{
        width: 80%;
    }
    #skillsC ul{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        padding: 1em;
    }
    #skillsC li{
        width: 80%;
    }
}

@media all and (max-width: 1230px){
    #darkButton1, #darkButton2, #darkButton3, #darkButton4, #darkButton5, #darkButton6, #darkButton7{
        font-size: 20px;
    }
    #clearButton1, #clearButton2, #clearButton3, #clearButton4, #clearButton5, #clearButton6, #clearButton7{
        font-size: 20px;
    }
    #experienceD{
        font-size: 20px;
    }
    #experiencec{
        font-size: 20px;
    }
}

@media all and (max-width: 1050px){
    #darkButton1, #darkButton2, #darkButton3, #darkButton4, #darkButton5, #darkButton6, #darkButton7{
        font-size: 18px;
    }
    #clearButton1, #clearButton2, #clearButton3, #clearButton4, #clearButton5, #clearButton6, #clearButton7{
        font-size: 18px;
    }
    #experienceD{
        font-size: 18px;
    }
    #aboutD{
        font-size: 18px;
    }
    #experienceC{
        font-size: 18px;
    }
    #aboutC{
        font-size: 18px;
    }
}

@media all and (max-width: 990px){
    #darkButton1, #darkButton2, #darkButton3, #darkButton4, #darkButton5, #darkButton6, #darkButton7{
        font-size: 15px;
    }
    #clearButton1, #clearButton2, #clearButton3, #clearButton4, #clearButton5, #clearButton6, #clearButton7{
        font-size: 15px;
    }
}

@media all and (max-width: 840px){
    #darkButton1, #darkButton2, #darkButton3, #darkButton4, #darkButton5, #darkButton6, #darkButton7{
        font-size: 12px;
    }
    #clearButton1, #clearButton2, #clearButton3, #clearButton4, #clearButton5, #clearButton6, #clearButton7{
        font-size: 12px;
    }
    #aboutD{
        font-size: 15px;
    }
    #aboutC{
        font-size: 15px;
    }
}

@media all and (max-width: 750px){
    #darkH1{
        font-size: 45px;
    }
    #clearH1{
        font-size: 45px;
    }
    #skillsD li{
        font-size: 18px;
    }
    #skillsC li{
        font-size: 18px;
    }
}

@media all and (max-width: 700px){
    #darkH1{
        font-size: 40px;
        letter-spacing: -6px;
    }
    #clearH1{
        font-size: 40px;
        letter-spacing: -6px;
    }
    #darkButton1, #darkButton2, #darkButton3, #darkButton4, #darkButton5, #darkButton6, #darkButton7{
        font-size: 10px;
    }
    #clearButton1, #clearButton2, #clearButton3, #clearButton4, #clearButton5, #clearButton6, #clearButton7{
        font-size: 10px;
    }
    #skillsD li{
        font-size: 15px;
    }
    #skillsC li{
        font-size: 15px;
    }
    #experienceD{
        font-size: 15px;
    }
    #experienceC{
        font-size: 15px;
    }
}

@media all and (max-width: 630px){
    #darkH1{
        display: none;
    }
    #clearH1{
        display: none;
    }
    html{
        justify-content: center;
        align-items: center;
    }
    body{
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }
    header{
        flex-direction: column;
        height: 75%;
        justify-content: center;
        align-items: center;
        padding: 1em 1em 1em 1em;
    }
    header a{
        padding: 0.5em;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }
    #logo{
        padding-bottom: 2em;
    }
    main{
        height: 0%;
        width: 100%;
        justify-content: center;
        align-items: center;
        overflow: auto;
    }
    #darkButton1, #darkButton2, #darkButton3, #darkButton4, #darkButton5, #darkButton6, #darkButton7{
        width: 75%;
        font-size: 15px;
    }
    #clearButton1, #clearButton2, #clearButton3, #clearButton4, #clearButton5, #clearButton6, #clearButton7{
        width: 75%;
        font-size: 15px;
    }
    footer{
        align-items: center;
        height: 25%;
    }
    #mode{
        height: 75%;
        width: 20%;
    }
    #logo{
        width: 130px;
        height: 220px;
    }
}

@media all and (max-width: 600px){
    #experienceD{
        font-size: 12px;
    }
    #aboutD{
        font-size: 15px;
    }
    #goalD{
        font-size: 18px;
    }
    #skillsD{
        font-size: 15px;
    }

    #experienceC{
        font-size: 12px;
    }
    #aboutC{
        font-size: 15px;
    }
    #goalC{
        font-size: 18px;
    }
    #skillsC{
        font-size: 15px;
    }
}

@media all and (max-width: 560px){
    #skillsD{
        font-size: 12px;
    }
    #skillsC{
        font-size: 12px;
    }
}

@media all and (max-width: 540px){
    #skillsD{
        font-size: 10px;
    }
    #skillsC{
        font-size: 10px;
    }
}

@media all and (max-width: 520px){
    #skillsD{
        font-size: 8px;
    }
    #skillsC{
        font-size: 8px;
    }
}

@media all and (max-width: 505px){
    #skillsD li{
        width: 70%;
        font-size: 12px;
    }
    #skillsC li{
        width: 70%;
        font-size: 12px;
    }
}

@media all and (max-width: 468px){
    #skillsD{
        height: 60%;
    }
    #skillsC{
        height: 60%;
    }
    #skillsD li{
        width: 70%;
        font-size: 10px;
    }
    #skillsC li{
        width: 70%;
        font-size: 10px;
    }
    #aboutD{
        font-size: 12px;
    }
    #aboutC{
        font-size: 12px;
    }

    #experienceD{
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    #experienceC{
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
    }
}

@media all and (max-width: 420px){
    #experienceD{
        font-size: 10px;
    }
    #experienceC{
        font-size: 10px;
    }
    #mode{
        height: 45%;
    }
    #skillsD{
        font-size: 10px;
        height: 55%;
    }
    #skillsD li{
        font-size: 12px;
        width: 100%;
    }
    #skillsC{
        font-size: 10px;
        height: 55%;
    }
    #skillsC li{
        font-size: 12px;
        width: 100%;
    }
    #logo{
        height: 220px;
        width: 130px;
    }
    #contactD{
        height: 60%;
    }
    #email{
        width: 15%;
    }
    #linkedin{
        width: 30%;
    }
}