@import url('https://fonts.googleapis.com/css2?family=Croissant+One&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Newsreader&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Meriweather&display=swap");
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css?family=DM+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Mono&display=swap');
@import url('https://fonts.googleapis.com/css?family=Host+Grotesk');
@import url('https://fonts.googleapis.com/css?family=Syncopate');
@import url('https://fonts.googleapis.com/css2?family=Monofett&display=swap');
@import url("https://fonts.googleapis.com/css?family=Notable");
@import url('https://fonts.googleapis.com/css2?family=Fascinate&display=swap');


:root{
    --name-font-family: 'Croissant One', sans-serif;
    --p-font-family: 'Newsreader', sans-serif;
    --main-font-family: 'Playfair Display', sans-serif;
    --p-font-family-meriweather: 'Meriweather', sans-serif;
    --roboto-font: 'Roboto', sans-serif;
    --dm-sans-font: 'DM Sans', sans-serif;
    --dm-mono-font: 'DM Mono', sans-serif;
    --host-grotesk-font: 'Host Grotesk', sans-serif;
    --syncopate-font: 'Syncopate', sans-serif;
    --monofett-font: 'Monofett', sans-serif;
    --notable-font: 'Notable', sans-serif;
    --fascinate-font: 'Fascinate', sans-serif;
}

@font-face {
    font-family: 'BNHarroldBold';
    font-weight: 900;
    src: url(/BNHarroldBold.otf) format('opentype');
}

body{
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;

    /* height: auto; */

    background-color: #f1faee;
    background-color: #F5F5DC; 
    /* background-color: #2D2E2E; */
    /* background: hsla(60, 56%, 91%, 1); */

    /* background: linear-gradient(180deg, hsla(60, 56%, 91%, 1) 0%, hsla(60, 6%, 58%, 1) 57%, hsla(69, 4%, 39%, 1) 81%, hsla(180, 1%, 18%, 1) 100%); */

    /* background: -moz-linear-gradient(180deg, hsla(60, 56%, 91%, 1) 0%, hsla(60, 6%, 58%, 1) 57%, hsla(69, 4%, 39%, 1) 81%, hsla(180, 1%, 18%, 1) 100%);

    background: -webkit-linear-gradient(0deg, hsla(60, 56%, 91%, 1) 0%, hsla(60, 6%, 58%, 1) 57%, hsla(69, 4%, 39%, 1) 81%, hsla(180, 1%, 18%, 1) 100%); */

    /* filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#F5F5DC", endColorstr="#9B9B8E", GradientType=1 ); */

    /* background: hsla(60, 56%, 91%, 1); */

    /* background: linear-gradient(180deg, #f5f5db 0%, #b6dcec 31%, #87c9f8 59%, #76aad5 72%, hsla(211, 32%, 55%, 1) 84%, hsla(227, 21%, 36%, 1) 100%); */
    /* background: linear-gradient(180deg, hsla(60, 57%, 91%, 1) 0%, hsla(198, 59%, 82%, 1) 31%, hsla(349, 47%, 46%, 1) 59%, hsla(9, 58%, 50%, 1) 72%, hsla(15, 69%, 29%, 1) 84%, hsla(0, 77%, 10%, 1) 100%); */
    background: linear-gradient(180deg, hsla(60, 57%, 91%, 1) 0%, hsla(198, 59%, 82%, 1) 31%, hsla(349, 47%, 46%, 1) 59%, hsla(9, 58%, 50%, 1) 72%, hsla(15, 69%, 29%, 1) 84%, hsla(0, 80%, 22%, 1) 90%, hsla(0, 77%, 10%, 1) 100%);
    background: linear-gradient(180deg, hsla(334, 100%, 87%, 1) 0%, hsla(204, 79%, 81%, 1) 23%, hsla(208, 83%, 91%, 1) 34%, hsla(349, 51%, 47%, 1) 55%, hsla(11, 70%, 51%, 1) 70%, hsla(13, 81%, 31%, 1) 82%, hsla(0, 73%, 20%, 1) 88%, hsla(0, 79%, 9%, 1) 100%);
    background: linear-gradient(180deg, hsla(68, 65%, 91%, 1) 4%, hsla(334, 100%, 87%, 1) 23%, hsla(204, 79%, 81%, 1) 35%, hsla(349, 51%, 47%, 1) 55%, hsla(11, 70%, 51%, 1) 70%, hsla(13, 81%, 31%, 1) 82%, hsla(0, 73%, 20%, 1) 88%, hsla(0, 79%, 9%, 1) 100%);
    background-repeat: no-repeat;
    /* background-size: contain; */
    /* 
background: -moz-linear-gradient(180deg, hsla(60, 56%, 91%, 1) 0%, hsla(198, 58%, 82%, 1) 31%, hsla(205, 89%, 75%, 1) 59%, hsla(207, 53%, 65%, 1) 72%, hsla(211, 32%, 55%, 1) 84%, hsla(227, 21%, 36%, 1) 100%);

background: -webkit-linear-gradient(180deg, hsla(60, 56%, 91%, 1) 0%, hsla(198, 58%, 82%, 1) 31%, hsla(205, 89%, 75%, 1) 59%, hsla(207, 53%, 65%, 1) 72%, hsla(211, 32%, 55%, 1) 84%, hsla(227, 21%, 36%, 1) 100%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#f5f5dc", endColorstr="#B7DCEC", GradientType=1 ); */

    cursor: url('hand.png') 16 16, auto;
    /* cursor: none; */

    

    overflow-x: hidden;
}

a,button{
    cursor: url('head.png') 16 16, pointer;
}

/* .custom-cursor{
    position: absolute;
    width: 30px;
    height: 30px;
    background-image: url('handOg.png');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 100;
} */

body header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    border: 0.2575rem #023e8a solid;
    border-radius: 0.75rem;

    padding: 0px 0.25rem;

    width: 90%;
    margin: 0.75rem auto;

    box-sizing: border-box;

}

body header .name{
    font-family: var(--name-font-family);
    /* font-family: 'BNHarroldBold'; */
    font-size: 1.8rem;

    color: #1d3557;

    padding: 0 1.5rem;
    /* margin: -10px; */

}

body header .name::selection{
    background-color: #d8e6c9;
}

body header .header-link{
    font-size: 1.8rem;
    font-family: var(--p-font-family-meriweather);

    color: blueviolet;
    /* border: 1px solid black; */

    display: flex;
    flex-direction: row;

    /* width: 30%; */

    padding: 0 1.5rem;
    padding: 0;
    margin: 0;
}

body header .linkedin-github{
    /* border: 1px solid blue; */
    width: 50%;
    width: auto;

    display: flex;
    flex-direction: row;

    justify-content: center;
    align-items: center;

    padding: 0;
    margin: 0;
}

body header .header-link svg{
    scale: 0.5;
    width: 80px;
    height: 80px;
    /* border: 1px solid black; */

    display: flex;
    flex-direction: row;

    padding: 0;
    margin: 0;

}

body header a{
    list-style: none;
    text-decoration: none;
}

body header a:link{
    color: #457b9d;
}

body header a:visited{
    color: #1a6899;
}

/*a:active, a:hover, a:focus */

main{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;

    font-family: var(--main-font-family);
    font-size: 1.6rem;
    /* font-weight: 900; */

    color: #ff5400;
    color: #002147;

    /* position: static; */

    padding: 3rem 3rem 6rem ;

    /* border: 1px black solid; */

}

main h1::selection{
    background-color: #e2d6a1;
}

main .content{
    /* border: 1px solid black; */
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
}


main img{
    /* position: absolute; */
    height: 200px;
    width: 200px;
    /* width: 30%; */

    object-fit: cover;
    border: 5px solid black;
    border-radius: 50%;

    /* z-index: -1; */

    
}

main img::selection{
    background-color: #e2d6a1;
}

/* main h1{
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;

   
} */

main .location{
    color: #390099;
    color: #422D06;
    /* position: relative; */
}

main .location::selection{
    background-color: #e2ba70;
}

main .course{
    /* border: 1px black solid; */
    color: #ffbd00;
    color: #420606;
}

main .course::selection{
    background-color: #ec8e77;
}

aside section .aside{

    /* position: relative; */

    display: flex;
    flex-direction: row;
    /* align-items: center; */
    justify-content: space-around;
    /* gap: 6rem; */
    border-top: 1px dashed black; /*change border later */
    border-top-left-radius: 90px;
    /* border-bottom: 1px dashed black; */

    /* z-index: 1; */

    height: 500vh;
    width: 300vw;

    /* overflow: scroll; */

    min-height: 0;

    padding-top: 4rem;
}

aside .shortinfo{
    /* display: none; */
    position: absolute;
    z-index: -1;

    opacity: 0;

    height: 75vh;
    width: 65vw;

    border: 1px black solid;
    border-bottom: 10px black solid;
    border-right: 15px black solid;
    border-radius: 10px;

    /* display: flex;
    flex-direction: row; */
}

aside .shortinfo .goodat{
    height: 10%;

    display: flex;
    align-items: center;
    width: 100%;

    border-bottom: 5px black solid;
    /* margin-bottom: -0.5rem; */
    /* padding: 0.5rem; */
}

aside .shortinfo .pgood{
    /* display: flex; */
    position: relative;

    /* margin: 0; */
    /* width: 65vw; */

    padding-left: 4rem;
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--dm-mono-font);

    /* box-sizing: border-box; */
    /* border-bottom: 5px solid black; */
    /* outline: 5px solid black;
    outline-offset: -5px; */

    /* align-items: center; */

    /* margin-bottom: -0.5rem; */
}

aside .shortinfo .infocontainer{
    display: flex;
    flex-direction: row;

    /* border: 1px solid burlywood; */
    height: 90%;

    justify-content: center;
    align-items: center;

    /* border-top: 5px black solid; */

    box-sizing: border-box;

    padding-top: 1.5rem;

    gap: 5rem;
}

aside .shortinfo .infocontainer .knowledge{
    border: 1px solid salmon;
    border-radius: 10px;

    height: 75%;

    margin-top: -90px;

    display: flex;
    flex-direction: column;

    justify-content: space-evenly;
    align-items: center;

    font-size: 1.6rem;
    font-family: var(--dm-sans-font);
    font-weight: bold;

    padding: 1rem;
}

aside .shortinfo .infocontainer .frontendskill{
    /* border: 1px solid blueviolet; */
    height: 95%;

    margin-top: -50px;

    display: flex;
    flex-direction: column;

    justify-content: space-evenly;
    align-items: center;

    font-size: 1.6rem;
}

aside .frontendskill .art, .gsapskill{
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 0;
    
}

aside .shortinfo .gsapskill{
    border: 1px solid darkblue;
    border-radius: 10px;
    
    width: 100%;

    color: green;
    /* background-color: #ffe4c4; */
    /* background: linear-gradient(135deg, hsla(198, 59%, 82%, 1) 29%, hsla(60, 57%, 91%, 1) 62%, hsla(33, 100%, 88%, 1) 100%); */
    background-color: transparent;
    color: green;

    /* margin-top: -150px; */
    /* padding-bottom: 5rem; */

    /* transform: translate(0, -100%); */

    text-align: center;
    
    font-family: var(--notable-font);
    font-size: 5rem;
    font-style: italic;
    font-weight: 700;
}

aside .pgsap{
    background: linear-gradient(90deg, hsla(60, 56%, 91%, 1) 0%, hsla(81, 24%, 67%, 1) 10%, hsla(86, 21%, 58%, 1) 17%, hsla(90, 22%, 47%, 1) 39%, hsla(99, 44%, 39%, 1) 64%, hsla(101, 63%, 34%, 1) 86%, hsla(104, 99%, 28%, 1) 100%);
    background: linear-gradient(90deg, hsla(60, 56%, 91%, 1) 0%, hsla(19, 67%, 48%, 1) 15%, hsla(46, 62%, 54%, 1) 33%, hsla(72, 61%, 46%, 1) 41%, hsla(142, 45%, 54%, 1) 55%, hsla(173, 43%, 53%, 1) 64%, hsla(275, 64%, 48%, 1) 87%, hsla(284, 53%, 35%, 1) 100%);;
    background-clip: text;

    color: transparent;
    background-size: 200% 100%;
    background-position: 0% 0%;
}

aside .shortinfo svg{
    /* display: inline-block; */
    /* z-index: 5; */
    position: absolute;

    width: 100%;
    height: 100%;

    scale: 0.7;
    rotate: 220deg;



    top: 50%;
    left: 25%;
}

aside .shortinfo .eyesvg{
    position: absolute;

    width: 100%;
    height: 100%;

    rotate: 80deg;

    top: 5%;
    left: 40%;
}

aside .shortinfo .star{
    margin: 0;
    padding: 0;

    scale: 0.1;

    border-radius: 5px;
    /* position: absolute; */

    /* left: 0;
    top: 100%; */

    opacity: 0;
}

aside .shortinfo .eyeimg{
    margin: 0;
    padding: 0;

    scale: 0.1;
    
    border-radius: 5px;

    position: absolute;

    top: 35%;
    left: 30%;

    opacity: 0;
}

aside .shortinfo .art{
    border: 1px solid darkblue;
    border-radius: 10px;

    color: #0B033D;
    color: #000;

    width: 100%;
    text-align: center;

    font-size: 2rem;
    font-family: var(--notable-font);

    /* padding: 1rem; */

    display: flex;
    flex-direction: column;

    text-align: left;
}

aside .design{
    font-family: var(--monofett-font);
    font-size: 4rem;
    font-weight: 100;

    color: #400656;

    text-align: center;
}

aside .art-word{
    font-family: var(--fascinate-font);
    font-style: italic;
    font-size: 5rem;

    color: #1E0967;

    text-align: right;
}

aside .projects-skill-learning .project{
    display: flex;
    /* border-bottom: 1px solid black; */
    height: 20%;
    padding-top: 1rem;

    justify-content: center;
    align-items: center;

    /* z-index: 3; */

    /* transform: translate(0, -50%); */

    font-size: 5rem;
    font-family: var(--syncopate-font);
    font-weight: 700;

    padding: 0;
    margin: 0;;
}

aside .projects-skill-learning .project::selection{
    background-color: #87a2d3;
}

aside section article.projects-skill-learning{
    --spacing: 4rem;
    top: var(--spacing);    

    /* display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; */

    /* margin-bottom: 50px; */
    border: 3px black solid;
    border-radius: 30px;
    border-bottom: 0.625rem solid black;

    height: 75vh;
    width: 80vw;

    /* padding: 2rem; */

    font-family: var(--p-font-family-meriweather);
    background-color: #e4f0e0;
    background-color: #c1d3b6;
    background: linear-gradient(
    -135deg,
    #e4f0e0 0%,
    #c1d3b6 50%,
    #f5f1e9 100%
  );

  background: linear-gradient(225deg, hsla(40, 38%, 94%, 1) 0%, hsla(97, 25%, 77%, 1) 30%, hsla(166, 53%, 83%, 1) 60%, hsla(110, 46%, 77%, 1) 85%, hsla(201, 41%, 73%, 1) 100%);
}

aside section article.projects-skill-learning:nth-child(1){
    background: transparent;
    border: none;
}

aside section article.projects-skill-learning:nth-child(3){
    display: flex;
    flex-direction: column;

    height: 100%;
}

aside .lastcontainer{
    /* border: 1px solid black; */
    
    display: flex;
    flex-direction: column;
    
    /* height: 100%; */
    width: 80vw;

    /* z-index: 1; */
}

aside .heading{
    height: 4rem;
    border: 1px solid black;

    flex-shrink: 0;
}

aside .innerdiv{
    --spacing: 4rem;
    /* top: var(--spacing);     */

    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: space-between; */

    /* margin-bottom: 50px; */
    border: 3px black solid;
    border-radius: 30px;
    border-bottom: 0.625rem solid black;

    height: 75vh;
    width: 80vw;

    /* padding: 2rem; */

    font-family: var(--p-font-family-meriweather);
    /* background-color: #e4f0e0;
    background-color: #c1d3b6;
    background: linear-gradient(
    -135deg,
    #e4f0e0 0%,
    #c1d3b6 50%,
    #f5f1e9 100%); */

    /* background-color: #730000; */
    /* flex-grow: 1; */

    overflow: hidden;

    padding: 0;
    margin: 0;

    visibility: hidden;
}

aside .innerdiv p, .innerdiv blockquote{
    visibility: hidden;
}

aside .selftaughtdiv{
    /* font-size: 20rem; */

    width: 100%;
    /* height: 75vh; */

    /* border: 1px solid black; */

    display: flex;
    flex-direction: column;

    justify-content: center;
    /* align-items: center; */
    /* justify-content: space-between; */

    /* text-align: stretch; */

    margin: 0;
    padding: 0;

    /* overflow: hidden; */
}

aside .selftaughtdiv .word {

    display: inline-block;
    flex-direction: column;

    justify-content: center;
    /* align-items: left; */

    font-size: 20rem;
    /* color: #c08081; */
    color: #c5a880;

    width: 100%;
    /* text-align: center; */

    padding: 0;
    /* margin-top: 0; */

    /* height: 75vh; */
    text-align: left;
    /* justify-content: center; */
    /* border: 1px solid blue; */
    /* position: relative;

    transform: translate(0, 20%); */

    visibility: visible;
    opacity: 1;
}

aside .selftaughtdiv .word::selection{
    background-color: #922929;
}

aside .innerdiv .cdt{
    height: 100vh;
    width: 100%;

    display: flex;
    flex-direction: row;

    gap: 0.5rem;

    border: 1px solid wheat;

    align-items: center;
    
    text-decoration: none;
    list-style: none;
    
}

aside .innerdiv .cdt img{
    width: 45%;
    height: 85%;

    border: 3px solid beige;
    border-radius: 50px 5px 50px 5px;

    /* padding-left: 2rem; */
    margin-left: 2rem;
}

aside .innerdiv .cdt .textcdt{
    width: 50%;
    height: 85%;

    display: flex;
    flex-direction: column;

    border-left: 1px  dashed beige;
    border-right: 1px dashed  beige;

    border-radius: 5rem;

    /* color: #f0ead6; */
}

aside .innerdiv .cdt .titlep{
    height: 40%;

    display: flex;
    /* align-items: center; */

    font-family: var(--main-font-family);
    font-size: 4rem;

    color: #f5deb3;

    padding: 0;
    margin: 0;

    padding-left: 2rem;
    padding-top: 2rem;

    border-bottom: 1px dashed white;
}

aside .innerdiv .cdt:nth-child(3) .titlep{
    align-items: center;
    /* border: 1px solid white; */
    text-align: right;

    padding-right: 2rem;
}

aside .innerdiv .cdt:nth-child(4) .titlep{
    margin-top: -1rem;

    align-items: center;
    text-align: center;
}

aside .innerdiv a:hover, .innerdiv a:link, .innerdiv a:visited{
    color: #f5deb3;
}

aside .innerdiv .cdt .infop{
    /* border: 5px solid pink; */
    height: 60%;

    margin: 0;

    display: flex;

    font-family: var(--dm-sans-font);
    font-size: 2rem;

    align-items: center;

    padding-left: 1rem;

    color: #c4c3d0;
}

aside .innerdiv .cdt .infop::selection{
    background-color: #5f5c86;
}

/* aside .innerdiv .cdt p{
    width: 50%;
    height: 85%;

    display: flex;

    font-family: var(--main-font-family);

    border: 1px solid white;
} */



aside .first{
    display: flex;
    flex-direction: row;

    /* margin: 0; */
    padding: 0;

    height: 100%;
    width: 100%;

    /* border: 10px blue solid; */

}

aside .workdone{
    /* border: 1px solid black; */
    font-family: var(--dm-mono-font);
    /* font-family: var(--host-grotesk-font); */
    font-weight: 500;
    font-size: 4rem;

    display: flex;
    justify-content: center;
    align-items: center;

    writing-mode: vertical-rl;
    transform: rotate(180deg);
    
    padding: 0;
    /* width: 10%; */
    /* height: 100%; */
    margin: 0;
    width: 10%;
}

aside .workdone::selection{
    background-color: rgb(189, 241, 210);
}

aside img{

    height: 300px;
    width: auto;

    border-radius: 10px;
    /* border: 1px black solid; */

}

aside .smile{
    display: flex;
    flex-direction: column;
    padding: 1rem;

    /* gap: 1rem; */

    border: 1px black dashed;
    border-radius: 30px;

    

}

aside .smile p, .unity p{

    /* margin: 0; */
    font-family: var(--dm-mono-font);
    font-family: var(--host-grotesk-font);
    font-size: 2.5rem;
    font-weight: 500;
    text-align: center;

    /* border: 1px solid black; */
    /* width: 70%; */

    display: flex;
    justify-content: center;
    align-items: center;
}

aside .unity{
    display: flex;
    flex-direction: column;
    padding: 1rem;

    /* gap: 1rem; */
}

aside .smiletech, .gametech{
    /* border: 1px solid black; */
    height: 100%;
    
    display: flex;
    flex-direction: row;

    align-items: center;
    justify-content: center;

    transform: translate(0, -20%);

    gap: 1rem;

    list-style: none;
    /* text-decoration: none; */
    list-style-type: none;
}

aside .smiletech, .gametech a:visited, a:link, a:active{
    color: #023e8a;
    text-decoration: none;
}

aside .smiletech .python{
    display: flex;
    flex-direction: column;
    /* border: 1px black solid; */

    width: 150px;
    /* height: 200px; */
}

aside .smiletech p, .gametech p, .csharp p{
    margin: 0;
    padding: 0;
    font-size: 1.2rem;
    font-family: var(--dm-mono-font);
}

aside .smiletech .python svg{
    width: 150px;
    height: 60px;
    /* color: #1a6899; */
    background-color: rgb(223, 200, 75);
    border-radius: 10px;
    /* scale: 0.5; */
}

aside .smiletech .html{
    display: flex;
    flex-direction: column;
    width: 150px;
}

aside .smiletech .html svg{
    width: 150px;
    height: 60px;

    background-color: rgb(252, 85, 56);
    border-radius: 10px;
}

aside .smiletech .css{
    display: flex;
    flex-direction: column;
    width: 150px;
}

aside .smiletech .css svg{
    width: 150px;
    height: 60px;

    background-color:#1a6899;
    border-radius: 10px;
}

aside .smilename:visited, .smilename:active, .smilename:link{
    color: black;
}

aside .unityname:visited, .unity:active, .unityname:link{
    color: black;
}

aside .gametech .unityicon, .csharp{
    display: flex;
    flex-direction: column;
    width: 150px;
}

aside .gametech .unityicon svg{
    width: 150px;
    height: 60px;

    background-color: grey;
    border-radius: 10px;
}

aside .gametech .csharp svg{
    width: 150px;
    height: 60px;

    background-color: purple;
    border-radius: 10px;
}

footer{
    display: flex;
    flex-direction: column;

    /* position: ; */

    align-items: center;
    justify-content: center;

    font-family: var(--dm-sans-font);
    font-size: 1.5rem;

    padding: 0;
    margin: 0;

    height: 100vh;   

    z-index: 3;

    /* border: 1px solid white; */
}

footer .work{
    font-size: 3rem;
    /* font-style: italic; */
    font-weight: 900;

    color: gold;
    color: #DADCBD;

    padding: 0;
    margin: 0;
    /* border: 1px solid white; */
}

footer .work::selection{
    background-color: #a88065;
}

footer .contactme{
    border: 1px solid white;
    border-radius: 0 30px 0 30px;

    background-color: #3a0909;

    height: 80%;

    display: flex;
    flex-direction: column;

    width: 90%;

    align-items: center;
    justify-content: space-evenly;
}

footer .getintouch{
    /* border: 1px solid white; */
    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: -1.5rem;

    color: #DADCBD;
}

footer .getintouch::selection{
    background-color: #a88065;
}

footer .formcontainer{
    /* border: 1px solid white; */

    width: 80%;
    height: 70%;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    font-family: var(--dm-sans-font);
    /* font-size: 3rem; */

    gap: 2rem;
}

footer .formcontainer::selection{
    background-color: #93acc4;
}

footer .form-group{
    width: 55%;
}

footer .form-group input, textarea{
    /* font-size: 3rem; */

    width: 100%;
    height: 4rem;

    border-radius: 10px;
    border-bottom: 0.625rem solid rgb(235, 164, 83);
    box-shadow: 5px solid beige;

    font-family: var(--dm-sans-font);
    color: black;

    resize: none;

    box-sizing: border-box;

    font-size: 1.3rem;

    /* text-align: center; */
}

footer input::placeholder, textarea::placeholder{
    /* width: 65%; */
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

form textarea::placeholder{
    padding-top: 1rem;
}

footer form button{
    width: 35%;
    height: 4rem;

    font-size: 1.5rem;

    border-radius: 10px;
}

footer a{
    text-decoration: none;
    color: #e76f51;
}

footer a:link{
    color: #e76f51;
}

footer a:visited{
    color: #ff5400;
}

@media (min-width: 1024px) and (max-width: 1439px){
    body header .name{
        /* color: black; */
        /* font-family: var(--syncopate-font); */

        font-size: 1.5rem;
    }

    main img{
        height: 150px;
        width: 150px;
    }

    main{
        font-size: 1.3rem;
        color: red;
    }

    aside .shortinfo .pgood{
        font-size: 1.5rem;
    }

    /* aside .shortinfo .infocontainer{
        gap: 2.5rem;
    } */

    aside .shortinfo .infocontainer .knowledge{
        font-size: 1.5rem;
        margin-top: -3.5rem;
    }

    aside .shortinfo .gsapskill{
        font-size: 4rem;
        /* padding: 0; */
    }

    aside .shortinfo .art{
        font-size: 1.5rem;
    }

    aside .design{
        font-size: 3rem;
    }

    aside .art-word{
        font-size: 3.9rem;
    }

    aside .workdone{
        font-size: 3rem;
    }

    aside img{
        height: 250px;
    }

    aside .smile p, .unity p{
        font-size: 2.1rem;
    }

    aside .smiletech p, .gametech p, .csharp p{
        font-size: 1.5rem;
    }

    aside .smiletech, .gametech{
        transform: translate(0, -10%);
    }

    aside .selftaughtdiv .word{
        font-size: 16rem;
    }

    aside .innerdiv .cdt .titlep{
        font-size: 3rem;
    }

    aside .innerdiv .cdt .infop{
        font-size: 1.7rem;
    }
}

@media (min-width: 391px) and (max-width: 435px){

    html, body{
        overflow-x: hidden;
    }

    body header .name{
        font-size: 1.1rem;
    }

    main{
        flex-direction: column;
        font-size: 1.3rem;
        text-align: center;
        /* justify-content: space-between; */
        /* margin-bottom: 0; */
        padding-bottom: 0;
    }

    main .content{
        width: 100%;
    }

    main .course{
        padding: 0;
        margin: 0;
    }

    /* main img{
        height: 100px;
        width: 100px;
    } */

    aside section .aside{
        display: flex;
        flex-direction: column;
        width: 100vw;
        height: 600vh;

        border-top: 1px dashed black;
        border-top-left-radius: 0;

        border-bottom: 1px solid black;

        /* padding-top: 4rem; */
        justify-content: space-between;
        /* justify-content: start; */

        /* gap: 50rem; */


        /* margin: 0; */
        /* padding: 0; */
        align-items: center;
    }

    aside .shortinfo{

        padding-top: 0;
        margin-top: 0;

        display: flex;
        flex-direction: column;
        position: static;
        opacity: 1;

        z-index: 1;

        opacity: 0;

        flex: 1;

        border-bottom: 8px solid black;
        border-right: 5px solid black;

        width: 100%;
        /* height: 300vh; */
        height: auto;
        /* margin-bottom: 10rem; */
    }

    aside .shortinfo svg{
        display: none;
    }

    aside .shortinfo .eyesvg{
        visibility: hidden;
    }

    aside .shortinfo .star{
        visibility: hidden;
    }

    aside .shortinfo .infocontainer{
        display: flex;
        flex-direction: column;

        justify-content: space-around;

        z-index: 1;

        /* gap: 0.1rem; */
        /* justify-content: center; */

        /* flex-wrap: wrap; */
        /* overflow: hidden; */
        /* height: auto; */
    }

    aside .shortinfo .infocontainer .knowledge{
        font-size: 1.5rem;
        margin-top: 0.5rem;
        height: 50%;
        height: auto;
        width: 90%;
        border-color: plum;
        padding: 0;

        /* flex: 1 1 auto; */

        display: flex;
        justify-content: flex-start;
        text-align: center;

        z-index: 1;
    }

    aside .shortinfo .pgood{
        font-size: 1.8rem;
    }

    aside .shortinfo .infocontainer .frontendskill{
        
        display: flex;
        /* display: block; */
        flex-direction: column;

        height: 50%;
        padding: 0;
        /* border: 1px solid red; */
        width: 100%;
        /* margin: 0; */

        /* transform: translate(0, 15%); */

        /* flex: 1 1 auto; */

        z-index: 1;

        gap: 1rem;

        padding-bottom: 0;
        margin-bottom: 0;
    }

    aside .shortinfo .gsapskill{
        font-size: 3rem;
        height: 50%;
        /* height: auto; */
        width: 90%;
        padding: 0;

        display: flex;
        flex: 1;

        justify-content: center;

        z-index: 1;

        /* padding: 0;
        margin: 0; */
        /* flex: 1 1 auto; */
    }

    aside .shortinfo .art{
        font-size: 2rem;
        height: 50%;
        /* height: auto; */
        width: 90%;
        padding: 0;

        flex: 1;

        /* gap: 5rem; */

        /* border: 1px solid red; */

        z-index: 1;

        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        

        /* border: none; */
    }

    aside .design{
        font-size: 3.5rem;
        margin: 0;
        padding: 0;

        margin: 0;
        padding: 0;
    }

    aside .art-word{
        font-size: 3.5rem;

        margin: 0;
        padding: 0;
    }

    aside .projects-skill-learning .project{
        font-size: 2.5rem;
        /* border: 1px solid black; */
        /* position: relative; */

        z-index: 1;

        display: flex;

        /* margin: 1rem; */

        /* justify-content: flex-start; */
        margin-top: 2rem;

        /* transform: translate(0, 25%); */
    }

    aside section article.projects-skill-learning:nth-child(1){
        /* border: 5px solid black; */
        height: auto;

        display: flex;
        flex-direction: column;

        gap: 2rem;
    }

    aside .projects-skill-learning:nth-child(2){
        border: 1px solid blue;

        height: 150vh;

        height: auto;

        position: static;

        /* transform: translate(0, -20%); */
    }

    aside .projects-skill-learning .first{
        display: flex;
        flex-direction: column;

        flex: 1;

        height: auto; /* was 145vh */
    }

    aside .workdone{
        writing-mode: horizontal-tb;
        transform: none;

        font-size: 3rem;
        border-bottom: 1px solid black;
        width: 100%;
    }

     aside .smile p, .unity p{
        font-size: 2rem;
    }

    aside .smiletech, aside .gametech{
        border: 1px solid black;
        border-radius: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        justify-content: center;
        align-items: center;
        gap: 0;
    }

    aside .smiletech .html, aside .smiletech .python, aside .smiletech .css, aside .gametech .unityicon, aside .gametech .csharp{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        /* border: 1px solid black; */
        padding: 0.5rem;
        margin: 0;
    }

    aside .smiletech .html svg, aside .smiletech .python svg, aside .smiletech .css svg, aside .gametech .unityicon svg, aside .gametech .csharp svg{
        height: 50px;
        width: 100px;

        padding: 0;
        margin: 0;
        /* border: 1px solid black; */
    }

    aside .smiletech p, .gametech p, .csharp p{
        font-size: 1.2rem;
        padding: 0;
        margin: 0;
    }

    aside .smiletech, .gametech{
        transform: translate(0, -10%);
    }

    aside .smile{
        border: none;
    }

    aside .unity{
        border-top: 5px solid black;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    aside .selftaughtdiv .word{
        font-size: 16rem;
    }

    aside .innerdiv .cdt .titlep{
        font-size: 3rem;
    }

    aside .innerdiv .cdt .infop{
        font-size: 1rem;
    }

    aside .innerdiv{
        visibility: visible;

        display: flex;
        flex-direction: column;
        /* transform: translate(0,-35%); */

        /* height: 500vh;
        height: auto; */

        position: static;

        height: 300vh;
    }

    aside .lastcontainer{
        height: auto;
        height: 300vh;

        position: static;
    }

    aside .innerdiv p, .innerdiv blockquote{
        visibility: visible;
    }

    aside .innerdiv .cdt{
        display: flex;
        flex-direction: column;

        padding-top: 1rem;

        height: 100%;
        width: 100%;

        gap: 2rem;

    }

    aside .selftaughtdiv{
        width: 100%;

        display: flex;

        align-items: center;
        justify-content: flex-start;

    }

    aside .selftaught{
        width: 85%;
        
    }

    aside .selftaughtdiv .word{
        font-size: 4.2rem;
        display: flex;
        flex-direction: column;
        /* border: 1px solid black; */

        width: 100%;
        /* height: 20vh; */
    }

    aside .innerdiv .cdt img{
        width: 95%;
        height: auto;
        border-radius: 10px;

        /* padding-left: 0; */
        margin-left: 0;
    }

    aside .innerdiv .cdt .textcdt{
        display: flex;
        flex-direction: column;

        width: 95%;

        /* border: 1px solid black; */
        border-radius: 0;
    }

    aside .innerdiv .cdt .titlep{
        font-size: 1.8rem;
        height: auto;
        padding: 1rem;

        text-align: left;
        justify-content: left;
        
    }

    aside .innerdiv .cdt:nth-child(3) .titlep{
        text-align: center;
    }

    aside .innerdiv .cdt .infop{
        height: 100%;
        font-size: 1.35rem;

        /* border: 1px solid black; */
        display: flex;
        justify-content: center;
        align-items: center;

        padding: 1rem;
    }

    aside .innerdiv .cdt:nth-child(4) .infop{
        margin-bottom: 1rem;
    }

    footer .contactme{
        height: 90%;
        border-radius: 10px;
    }

    footer .work{
        font-size: 2rem;
        text-align: center;

        height: auto;
        margin: 0;
        padding: 0;

        /* border: 1px solid black; */
    }

    footer .formcontainer{
        border: 1px solid white;
        height: 80%;

        padding: 1rem;
    }

    footer .form-group{
        /* border: 1px solid wheat; */
        width: 100%;
    }

    footer .getintouch{
        font-size: 2rem;
        /* border: 1px solid black; */
        width: 100%;

        margin-top: -3rem;
        margin-bottom: 3rem;

        display: flex;
        text-align: center;
        justify-content: center;
    }
    
    footer form button{
        width: 90%;
        height: 3.5rem;
    }
}

@media (max-width: 390px){

    html, body{
        max-width: 100vw;
        overflow-x: hidden;
    }

    body header .name{
        font-size: 1.1rem;
    }

    main{
        flex-direction: column;
        font-size: 1.3rem;
        text-align: center;
        /* justify-content: space-between; */
        /* margin-bottom: 0; */
        padding-bottom: 0;
    }

    main .location{
        font-size: 1.5rem;
    }

    main .course{
        font-size: 1.3rem;
        margin: 0;
    }

    main .content{
        width: 100%;
    }

    /* main img{
        height: 100px;
        width: 100px;
    } */

    aside section .aside{
        display: flex;
        flex-direction: column;
        width: 100vw;
        height: 600vh;

        border-top: 1px dashed black;
        border-top-left-radius: 0px;
        border-bottom: 1px solid black;

        /* padding-top: 4rem; */
        justify-content: space-between;
        /* justify-content: start; */

        /* gap: 50rem; */


        /* margin: 0; */
        /* padding: 0; */
        align-items: center;
    }

    aside .shortinfo{

        padding-top: 0;
        margin-top: 0;

        display: flex;
        flex-direction: column;
        position: static;
        opacity: 1;

        z-index: 1;

        flex: 1;

        border-bottom: 8px solid black;
        border-right: 5px solid black;

        width: 100%;
        /* height: 300vh; */
        height: auto;
        /* margin-bottom: 10rem; */
    }

    aside .shortinfo svg{
        display: none;
    }

    aside .shortinfo .eyesvg{
        visibility: hidden;
    }

    aside .shortinfo .star{
        visibility: hidden;
    }

    aside .shortinfo .infocontainer{
        display: flex;
        flex-direction: column;

        justify-content: space-around;

        z-index: 1;

        /* gap: 0.1rem; */
        /* justify-content: center; */

        /* flex-wrap: wrap; */
        /* overflow: hidden; */
        /* height: auto; */
    }

    aside .shortinfo .infocontainer .knowledge{
        font-size: 1.5rem;
        margin-top: 0.5rem;
        height: 50%;
        height: auto;
        width: 90%;
        border-color: plum;
        padding: 0;

        /* flex: 1 1 auto; */

        display: flex;
        justify-content: flex-start;
        text-align: center;

        z-index: 1;
    }

    aside .shortinfo .pgood{
        font-size: 1.8rem;
    }

    aside .shortinfo .infocontainer .frontendskill{
        
        display: flex;
        /* display: block; */
        flex-direction: column;

        height: 50%;
        padding: 0;
        /* border: 1px solid red; */
        width: 100%;
        /* margin: 0; */

        /* transform: translate(0, 15%); */

        /* flex: 1 1 auto; */

        z-index: 1;

        gap: 1rem;

        padding-bottom: 0;
        margin-bottom: 0;
    }

    aside .shortinfo .gsapskill{
        font-size: 2.8rem;
        height: 50%;
        /* height: auto; */
        width: 90%;
        padding: 0;

        display: flex;
        flex: 1;

        justify-content: center;

        z-index: 1;

        /* padding: 0;
        margin: 0; */
        /* flex: 1 1 auto; */
    }

    aside .shortinfo .art{
        font-size: 2rem;
        height: 50%;
        /* height: auto; */
        width: 90%;
        padding: 0;

        flex: 1;

        /* gap: 5rem; */

        /* border: 1px solid red; */

        z-index: 1;

        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        

        /* border: none; */
    }

    aside .design{
        font-size: 3.5rem;
        margin: 0;
        padding: 0;

        margin: 0;
        padding: 0;
    }

    aside .art-word{
        font-size: 3.5rem;

        margin: 0;
        padding: 0;
    }

    aside .projects-skill-learning .project{
        font-size: 2.2rem;
        /* border: 1px solid black; */
        /* position: relative; */

        z-index: 1;

        display: flex;

        /* margin: 1rem; */

        /* justify-content: flex-start; */
        margin-top: 2rem;

        /* transform: translate(0, 25%); */
    }

    aside section article.projects-skill-learning:nth-child(1){
        /* border: 5px solid black; */
        height: auto;

        display: flex;
        flex-direction: column;

        gap: 2rem;
    }

    aside .projects-skill-learning:nth-child(2){
        border: 1px solid blue;

        height: 150vh;

        height: auto;

        position: static;

        /* transform: translate(0, -20%); */
    }

    aside .projects-skill-learning .first{
        display: flex;
        flex-direction: column;

        flex: 1;

        height: auto; /* was 145vh */
    }

    aside .workdone{
        writing-mode: horizontal-tb;
        transform: none;

        font-size: 2.5rem;
        border-bottom: 1px solid black;
        width: 100%;
    }

     aside .smile p, .unity p{
        font-size: 1.6rem;
    }

    aside .smiletech, aside .gametech{
        border: 1px solid black;
        border-radius: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        justify-content: center;
        align-items: center;
        gap: 0;
    }

    aside .smiletech .html, aside .smiletech .python, aside .smiletech .css, aside .gametech .unityicon,aside .gametech .csharp{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        /* border: 1px solid black; */
        padding: 0.5rem;
        margin: 0;
    }

    aside .smiletech .html svg, aside .smiletech .python svg, aside .smiletech .css svg, aside .gametech .unityicon svg, aside .gametech .csharp svg{
        height: 50px;
        width: 100px;

        padding: 0;
        margin: 0;
        /* border: 1px solid black; */
    }

    aside .smiletech p, .gametech p, .csharp p{
        font-size: 1rem;
        padding: 0;
        margin: 0;
    }

    aside .smiletech, .gametech{
        transform: translate(0, -10%);
    }

    aside .smile{
        border: none;
    }

    aside .unity{
        border-top: 5px solid black;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    aside .selftaughtdiv .word{
        font-size: 1rem;
    }

    aside .innerdiv .cdt .titlep{
        font-size: 3rem;
    }

    aside .innerdiv .cdt .infop{
        font-size: 1.7rem;
    }

    aside .innerdiv{
        visibility: visible;

        display: flex;
        flex-direction: column;
        /* transform: translate(0,-35%); */

        /* height: 500vh;
        height: auto; */

        position: static;

        height: 300vh;
    }

    aside .lastcontainer{
        height: auto;
        height: 300vh;

        position: static;
    }

    aside .innerdiv p, .innerdiv blockquote{
        visibility: visible;
    }

    aside .innerdiv .cdt{
        display: flex;
        flex-direction: column;

        padding-top: 1rem;

        height: 100%;
        width: 100%;

        gap: 2rem;

    }

    aside .selftaughtdiv{
        width: 100%;

        display: flex;

        align-items: center;
        justify-content: flex-start;

    }

    aside .selftaught{
        width: 85%;
        
    }

    aside .selftaughtdiv .word{
        font-size: 3.7rem;
        display: flex;
        flex-direction: column;

        /* padding-left: 0; */

        width: 100%;
        /* height: 20vh; */
    }

    aside .innerdiv .cdt img{
        width: 95%;
        height: auto;
        border-radius: 10px;

        /* padding-left: 0; */
        margin-left: 0;
    }

    aside .innerdiv .cdt .textcdt{
        display: flex;
        flex-direction: column;

        width: 95%;

        /* border: 1px solid black; */
        border-radius: 0;
    }

    aside .innerdiv .cdt .titlep{
        font-size: 1.6rem;
        height: auto;
        padding: 1rem;

        text-align: left;
        justify-content: left;
        
    }

    aside .innerdiv .cdt:nth-child(3) .titlep{
        text-align: center;
    }

    aside .innerdiv .cdt .infop{
        height: 100%;

        display: flex;

        justify-content: center;
        align-items: center;
        text-align: justify;

        font-size: 1.2rem;

        padding: 1rem;
    }

    aside .innerdiv .cdt:nth-child(4) .infop{
        margin-bottom: 1rem;
    }

    footer .contactme{
        height: 90%;
        border-radius: 10px;
    }

    footer .work{
        font-size: 2rem;
        text-align: center;

        height: auto;
        margin: 0;
        padding: 0;

        /* border: 1px solid black; */
    }

    footer .formcontainer{
        border: 1px solid white;
        height: 80%;

        padding: 1rem;
    }

    footer .form-group{
        /* border: 1px solid wheat; */
        width: 100%;
    }

    footer .getintouch{
        font-size: 2rem;
        /* border: 1px solid black; */
        width: 100%;

        margin-top: -3rem;
        margin-bottom: 3rem;

        display: flex;
        text-align: center;
        justify-content: center;
    }
    
    footer form button{
        width: 90%;
        height: 3.5rem;
    }
}