* {
    margin: 0;
    padding: 0;
}

html {
  scroll-behavior: smooth;
}


@font-face {
    font-family: 'gothic';
    src: url(Fonts/FranklinGothicHeavyRegular.ttf);
    font-weight: normal;
    font-size: normal;
}

body {
    background-color: rgb(59, 56, 63);
    justify-content: center;
    justify-items: center;
    align-content: center;
    align-items: center;
    text-align: center;
    text-justify: center;

    background-image: ur;
}

#titlePage {
    text-align: center;
    place-content: center;
    justify-items: center;
    width: 100%;
    height: 45vh;
    /* outline: solid red 2px; */
    position: relative;
    overflow: hidden;

    background-image: url(Images/sectionTitles/WebsiteBackdrop1.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    /* background-image: url(Images/Screenshot\ \(12\).png);
    background-position: center;
    background-size: 80%;
    background-repeat: no-repeat;

    background-color: black; */

}









#mainLogo {
    /* background-color: red; */
    width: clamp(170px, 60%, 500px);
    height: clamp(170px, 30%, 600px);
    filter: drop-shadow(0px 10px 5px rgba(32, 45, 53, 0.726));
    left: .5;
    bottom: -10%;
    position: relative;
    z-index: 1;

    background-image: url(Images/Logos/ABH3Designs_Logo_Transparent.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

@media (min-width: 0px) and (max-width: 700px) {
    #mainLogo {
        background-image: url(Images/ABH3Designs_Mini_Logo.svg);
        background-repeat: no-repeat;
        /* outline: 2px red solid; */
        width: 200px;
        height: 200px;
        background-size: contain;
    }
}


#navigation {
    /* outline: solid red; */
    position: absolute;
    bottom: 8%;

}

.nav {
    color: rgb(221, 221, 221);
    text-decoration: none;
    font-family: 'gothic';
    padding: 5px;
    font-size: 20px;
}

#h::after {
    content: '';
    width: 0%;
    height: 2px;
    left: 2%;
    bottom: 0;
    
    background-color: rgb(221, 221, 221);
    position: absolute;
    transition: .2s;
}
#h:hover::after {
    content: '';
    width: 19%;
    height: 2px;
    left: 2%;
    bottom: 0;
    
    position: absolute;
}

#p::after {
    content: '';
    width: 0%;
    height: 2px;
    left: 27%;
    bottom: 0;
    
    background-color: rgb(221, 221, 221);
    position: absolute;
    transition: .2s;
}
#p:hover::after {
    content: '';
    width: 28%;
    height: 2px;
    left: 27%;
    bottom: 0;
    
    position: absolute;
}

#c::after {
    content: '';
    width: 0%;
    height: 2px;
    left: 61%;
    bottom: 0;
    
    background-color: rgb(221, 221, 221);
    position: absolute;
    transition: .2s;
}
#c:hover::after {
    content: '';
    width: 37%;
    height: 2px;
    left: 61%;
    bottom: 0;
    
    position: absolute;
}









#sections {
    width: 100vw;
    height: max-content;
    padding-bottom: 150px;
    background-color: rgb(73, 75, 83);
    /* border-top: solid rgb(141, 131, 153) 5px; */

    box-shadow: 0px 0px 100px rgb(61, 57, 70);
    
    justify-content: center;
    justify-items: center;
    
    display: grid;

    grid-template-columns: repeat(4, clamp(200px, 30vw, 300px));
    grid-template-rows: repeat(auto-fit, clamp(250px, 35vw, 350px));

    row-gap: clamp(35px, 5vw, 30px);
    column-gap: clamp(35px, 4vw, 50px);
    padding-top: 50px;
}

@media (min-width: 500px) and (max-width: 1400px) {
    #sections {
        grid-template-columns: repeat(2, clamp(200px, 30vw, 300px));
    }
}

@media (min-width: 0px) and (max-width: 499px) {
    #sections {
        grid-template-columns: repeat(1, clamp(200px, 30vw, 300px));
    }
}











.sectionTitle {
    color: white;
    font-family: 'gothic';
    font-weight: bolder;
    /* margin-top: 10%; */
    font-size: 175%;
    align-content: center;

    border-radius: 0px 0px 5px 5px;
}




/* GRAPHIC DESIGN */

#graphicDesign {
    background-color: rgb(86, 89, 110);
    
    position: relative;
    width: clamp(200px, 30vw, 300px);
    height: clamp(250px, 35vw, 350px);

    border-radius: 5px 5px 5px 5px;
    

}

#gdHider {
    width: 100%;
    height: 0%;
    background-color: rgb(73, 75, 83);
    transition: .2s;
}
#graphicDesign:hover > #gdHider {
    height: 40%;
    transition: .2s;
}

#gdTitle {
    width: 100%;
    height: 40%;
    background-color: rgb(119, 123, 141);
    background-image: url(Images/sectionTitles/graphicDesignLogo.svg);
    background-position: center;
    background-size: 75%;
    background-repeat: no-repeat;
    bottom: 0;
    position: absolute;
    transition: .2s;

    color: rgba(255, 255, 255, 0);
}
#graphicDesign:hover > #gdTitle {
    height: 35%;
    transition: .2s;
    background-color: rgb(89, 84, 107);
}

#gdE1 {
    width: 70%;
    height: 80%;
    background-color: rgb(0, 0, 0);
    
    background-image: url(Images/sections/PirelliPoster.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;


    position: absolute;
    bottom: 5%;
    left: 15%;
    transition: .2s;

}
#graphicDesign:hover > #gdE1 {
    bottom: 20%;
    transition: .2s;

    filter:  drop-shadow( 0px 0px 5px rgb(36, 27, 51));
}

#gdE2 {
    width: 52.5%;
    height: 60%;
    background-color: rgb(249, 252, 58);
    background-image: url(Images/sections/sevenPoster.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    
    position: absolute;
    bottom: 5%;
    left: 15%;
    transition: .2s;

}
#graphicDesign:hover > #gdE2 {
    bottom: 32%;
    transition: .2s;
    transform: rotateZ(-25deg);
    left: 0%;

    filter:  drop-shadow( 0px 0px 5px rgb(36, 27, 51));
}

#gdE3 {
    width: 52.5%;
    height: 60%;
    background-color: rgb(0, 0, 0);
    background-image: url(Images/sections/MotionBlur.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    
    position: absolute;
    bottom: 5%;
    right: 15%;
    transition: .2s;

}
#graphicDesign:hover > #gdE3 {
    bottom: 32%;
    transition: .2s;
    transform: rotateZ(25deg);
    right: 0%;

    filter:  drop-shadow( 0px 0px 5px rgb(36, 27, 51));
}

/* END OF GRAPHIC DESIGN */










/* Illustration */

#illustration {
    background-color: rgb(86, 89, 110);
    width: clamp(200px, 30vw, 300px);
    height: clamp(250px, 35vw, 350px);

    border-radius: 5px 5px 5px 5px;
    position: relative;
}

#iHider {
    width: 100%;
    height: 0%;
    background-color: rgb(73, 75, 83);
    transition: .2s;
}
#illustration:hover > #iHider {
    height: 40%;
    transition: .2s;
}

#iTitle {
    width: 100%;
    height: 40%;
    background-color: rgb(119, 123, 141);
    bottom: 0;
    position: absolute;
    transition: .2s;

    color: rgba(255, 255, 255, 0);

    background-image: url(Images/sectionTitles/illustrationLogo.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80%;
}
#illustration:hover > #iTitle {
    height: 35%;
    transition: .2s;
    background-color: rgb(89, 84, 107);
}

#iE1 {
    width: 55%;
    height: 60%;
    background-color: white;

    position: absolute;
    left: 10%;
    bottom: 25%;
    transition: .2s;

    background-image: url(Images/sections/amtrackMeasles.png);
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#illustration:hover > #iE1 {
   bottom: 35%;
   filter:  drop-shadow( -10px -10px 5px rgba(77, 67, 83, 0.24));
}

#iE2 {
    width: 55%;
    height: 60%;
    background-color: rgb(231, 231, 231);

    background-image: url(Images/sections/jazzPoster.png);
    background-size: 100%;
    background-repeat: no-repeat;

    position: absolute;
    left: 10%;
    bottom: 25%;
    transition: .2s;

    
}
#illustration:hover > #iE2 {
    transform: rotateZ(-10deg);
    left: 3%;
    bottom: 35%;
    transition: .2s;
    filter:  drop-shadow( -10px -10px 5px rgba(77, 67, 83, 0.226));
}

#iE3 {
    width: 55%;
    height: 60%;
    background-color: rgb(211, 211, 211);

    background-image: url(Images/sections/draculaPortrait.png);
    background-size: 100%;
    background-repeat: no-repeat;

    position: absolute;
    left: 10%;
    bottom: 25%;
    transition: .2s;
    
}
#illustration:hover > #iE3 {
    transform: rotateZ(-20deg);
    left: -2%;
    bottom: 35%;
    transition: .2s;
    filter:  drop-shadow( -10px -10px 5px rgba(77, 67, 83, 0.123));
}

#pen {
    width: 20%;
    height: 80%;
    background-image: url(Images/sections/Pencil3.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    position: absolute;

    right: 8%;
    bottom: 10%;
    transition: .2s;
}
#illustration:hover > #pen {
    bottom: 15%;
    transform: rotateZ(20deg);
    right: 2%;

    transition: .2s;

    filter:  drop-shadow( 10px 10px 5px rgba(77, 67, 83, 0.534));
}



/* END OF ILLUSTRATION */




/* 3D MODELING */

#modeling {
    background-color: rgb(86, 89, 110);
    width: clamp(200px, 30vw, 300px);
    height: clamp(250px, 35vw, 350px);

    border-radius: 5px 5px 5px 5px;
    position: relative;
}

#mHider {
    width: 100%;
    height: 0%;
    background-color: rgb(73, 75, 83);
    transition: .2s;
}
#modeling:hover > #mHider {
    height: 40%;
    transition: .2s;
}

#mTitle {
    width: 100%;
    height: 40%;
    background-color: rgb(119, 123, 141);
    bottom: 0;
    position: absolute;
    transition: .2s;

    color: rgba(255, 255, 255, 0);

    background-image: url(Images/sectionTitles/3dTitle.png);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;

}
#modeling:hover > #mTitle {
    height: 35%;
    transition: .2s;
    background-color: rgb(89, 84, 107);
}

#sphere {
    width: 80%;
    height: 80%;
    background-image: url(Images/sections/Rooster.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 25%;
    left: 10%;

    transition: .2s;
    
}
 #modeling:hover > #sphere {
    width: 70%;
    height: 70%;
    position: absolute;

    left: 12%;

    /* bottom: 10%;
    left: -5%;
    transform: rotateZ(-10deg); */
    filter: drop-shadow( 0px 0px 10px rgba(67, 64, 75, 0.801));
}


#cube {
    width: 0%;
    height: 0%;
    background-image: url(Images/sections/docOckMini.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 80%;
    left: 35%;

    transition: .2s;

}
#modeling:hover > #cube {
    width: 50%;
    height: 50%;
    position: absolute;
    bottom: 25%;
    left: 58%;

    transform: rotateZ(20deg);
    filter: drop-shadow( 0px 0px 10px rgba(67, 64, 75, 0.801));
}

#cone {
    width: 20%;
    height: 20%;
    background-image: url(Images/sections/Car1.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 35%;
    left: 35%;
    
    transition: .2s;
}

#modeling:hover > #cone {
    width: 60%;
    height: 60%;
    position: absolute;
    bottom: 35%;
    left: -15%;

    transform: rotateZ(-25deg);
    filter: drop-shadow( 0px 0px 10px rgba(67, 64, 75, 0.801));
}



/* END OF 3D MODELING */



/* WEB DESIGN */

#web {
    background-color: rgb(86, 89, 110);
    width: clamp(200px, 30vw, 300px);
    height: clamp(250px, 35vw, 350px);

    border-radius: 5px 5px 5px 5px;
    position: relative;
}

#wHider {
    width: 100%;
    height: 0%;
    background-color: rgb(73, 75, 83);
    transition: .2s;
}
#web:hover > #wHider {
    height: 40%;
    transition: .2s;
}

#wTitle {
    width: 100%;
    height: 40%;
    background-color: rgb(119, 123, 141);
    bottom: 0;
    position: absolute;
    transition: .2s;

    color: rgba(255, 255, 255, 0);

    background-image: url(Images/sectionTitles/webDesignLogo.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70%;
}
#web:hover > #wTitle {
    height: 35%;
    transition: .2s;
    background-color: rgb(89, 84, 107);
}

#page {
    width: 70%;
    height: 70%;
    position: absolute;
    bottom: 3%;
    left: 15%;

    background-color: white;
    background-image: url(Images/sections/miniWebsite.png);
    background-size: 100%;
    background-repeat: no-repeat;
    transition: .2s;
}
#web:hover > #page {
    bottom: 15%;
    filter: drop-shadow( 0px 0px 10px rgba(67, 64, 75, 0.801));
}

#scrollee {
    width: 7%;
    height: 100%;
    background-color: rgb(240, 240, 240);
    position: absolute;
    right: 0%;
}

#bar {
    width: 70%;
    height: 10%;
    position: absolute; 
    bottom: 73%;
    left: 15%;
    border-radius: 5px 5px 0px 0px;

    background-color: rgb(151, 149, 179);
    background-image: url(Images/sections/webElements.svg);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: top right;
    transition: .2s;
}
#web:hover > #bar {
    bottom: 85%;
    filter: drop-shadow( 0px 0px 10px rgba(67, 64, 75, 0.801));
}

#scroller {
    width: 5%;
    height: 10%;
    background-color: rgb(116, 116, 116);
    position: absolute;
    right: 15%;
    bottom: 58%;
    transition: .2s;
    border-radius: 10px;
}
#web:hover > #scroller {
    bottom: 38%;
}

/* #cursor {
    width: 10%;
    height: 10%;
    position: absolute;
    right: 9%;
    bottom: 55%;

    background-image: url(Images/sections/Cursor.svg);
    background-repeat: no-repeat;
    background-size: contain;
    transition: .2s;
}
#web:hover > #cursor {
    bottom: 40%;
} */






/* END OF WEB DESIGN */









/* FOOTER */

#footer {
    width: 100%;
    height: 20vh;
    background-color: rgb(84, 84, 102);
    border-top: 5px solid rgb(172, 171, 197);
}


/* END OF FOOTER */





#portfolioTop {
    height: 100px;
    width: 100%;
    background-color: rgb(73, 71, 83);

    align-content: center;

    position: fixed;

    
}

#portfolioMiniLogo {
    width: 75px;
    float: left;
    padding-left: 15px;

    filter: drop-shadow(0px 0px 10px rgb(42, 35, 46))
}


.pNav {
    float: right;
    position: relative;
    padding-right: 20px;
    color: white;


    text-decoration: none;
    font-family:'gothic';

    font-size: clamp(10px, 2vw, 20px);

    padding-top: 30px;
}

.pNav::after {
    content: '';
    width: 0%;
    background-color: white;
    height: 2px;
    position: absolute;

    left: 0;
    bottom: -2px;
    transition: .2s;
}

.pNav:hover::after {
    width: 80%;
}


#pSelect {
    height: 100%;
    width: 20%;
    left: 0px;
    background-color: rgb(37, 36, 44);
    margin-top: 100px;
    position: fixed;

    display: grid;

    justify-content: center;
    grid-template-columns: 80%;
    grid-template-rows: repeat(4, 100px);
    row-gap: 10px;

        z-index: 5;

    
}

.Selector {
    color: rgba(255, 255, 255, 0);
    background-color: rgb(67, 67, 78);

    width: 100%;
    margin-top: 10px;
    padding-top: 10px;

    border-radius: 5px;

    transition: .2s;
  
}

.Selector:hover {
    background-color: rgb(53, 53, 68);
    width: 110%;
}

#gdS {
    background-image: url(Images/sectionTitles/graphicDesignLogo.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#iS {
    background-image: url(Images/sectionTitles/illustrationLogo.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
}

#mS {
    background-image: url(Images/sectionTitles/3dTitle.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#wdS {
    background-image: url(Images/sectionTitles/webDesignLogo.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}







.test {
    color: white;
    /* height: 150vh; */
    margin-top: 120px;

    /* margin-bottom: -300px; */
}



#gdPort {
    width: 100%;
    color: rgba(0, 0, 0, 0);
    justify-items: center;

    height: 50%;

}

#gdPortLogo {
    width: 75%;
    height: 125px;
    margin-left: 18%;
    
    background-image: url(Images/sectionTitles/graphicDesignLogo.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#gdGrid {
    /* outline: solid red; */
    padding-top: 50px;
    width: 75%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 30%);
    grid-template-rows: repeat(2, 30vw);
    gap: 10px;

    justify-content: center;

    margin-left: 20%;
    
}

.gdE {
    /* background-color: rgb(72, 68, 80); */
    border-radius: 5px;
    /* height: 100px;
    width: 100px; */
    transition: .2s;
}

/* .gdE:hover {
    background-color: rgb(52, 48, 59)
} */

#iPort {
    width: 100%;
    color: rgba(0, 0, 0, 0);
    justify-items: center;

    height: min-content;

}

#iPortLogo {
    width: 30%;
    height: 100px;
    margin-left: 18%;
    
    background-image: url(Images/sectionTitles/illustrationLogo.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#iGrid {
    /* outline: solid red; */
    padding-top: 50px;
    width: 75%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 30%);
    grid-template-rows: repeat(2, 30vw);
    gap: 10px;

    justify-content: center;

    margin-left: 20%;
    
}

.iE {
    /* background-color: rgb(72, 68, 80); */
    border-radius: 5px;
    /* height: 100px;
    width: 100px; */
    transition: .2s;
}

/* .iE:hover {
    background-color: rgb(52, 48, 59)
} */




#mPort {
    width: 100%;
    color: rgba(0, 0, 0, 0);
    justify-items: center;

    height: min-content;
    
}

#mPortLogo {
    width: 75%;
    height: 140px;
    margin-left: 18%;
    
    background-image: url(Images/sectionTitles/3dTitle.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#mGrid {
    /* outline: solid red; */
    padding-top: 50px;
    width: 75%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 30%);
    grid-template-rows: repeat(2, 30vw);
    gap: 10px;

    justify-content: center;

    margin-left: 20%;
    
}

.mE {
    /* background-color: rgb(72, 68, 80); */
    border-radius: 5px;
    /* height: 100px;
    width: 100px; */
    transition: .2s;
}

/* .mE:hover {
    background-color: rgb(52, 48, 59)
} */


#wdPort {
    width: 100%;
    color: rgba(0, 0, 0, 0);
    justify-items: center;

    height: min-content;
    
}

#wdPortLogo {
    width: 75%;
    height: 150px;
    margin-left: 18%;
    
    background-image: url(Images/sectionTitles/webDesignLogo.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#wdGrid {
    /* outline: solid red; */
    padding-top: 50px;
    width: 75%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 30%);
    grid-template-rows: repeat(2, 30vw);
    gap: 10px;

    justify-content: center;

    margin-left: 20%;
    
}

.wdE {
    /* background-color: rgb(72, 68, 80); */
    border-radius: 5px;
    /* height: 100px;
    width: 100px; */
    transition: .2s;
}

/* .wdE:hover {
    background-color: rgb(52, 48, 59)
} */



#pFooter {
    width: 100%;
    height: 20vh;
    background-color: rgb(84, 84, 102);
    border-top: 5px solid rgb(172, 171, 197);

    margin-top: 100px;

    position: absolute;
    z-index: 10;
}












#gdA {
    background-image: url(Portfolio/GraphicDesign/MotionBlur.png);
    background-size: contain;

    background-repeat: no-repeat;
    background-position: center;
}

#gdB{
    background-image: url(Portfolio/GraphicDesign/PirelliPoster.png);
    background-size: contain;

    background-repeat: no-repeat;
    background-position: center;
}

#gdC {
    background-image: url(Portfolio/GraphicDesign/SevenPoster-1.png);
    background-size: contain;

    background-repeat: no-repeat;
    background-position: center;
}

#gdD {
    background-image: url(Portfolio/GraphicDesign/RippingtonsFreeFall-1.png);
    background-size: contain;

    background-repeat: no-repeat;
    background-position: center;
}

#gdE {
    background-image: url(Portfolio/GraphicDesign/FrontWing.png);
    background-size: contain;

    background-repeat: no-repeat;
    background-position: center;

    grid-column: 2/4;
}


#iA {
    background-image: url(Portfolio/Illustration/jazzPoster.png);
    background-size: contain;

    background-repeat: no-repeat;
    background-position: center;
}

#iB {
    background-image: url(Portfolio/Illustration/seldPortrait.png);
    background-size: contain;

    background-repeat: no-repeat;
    background-position: center;
}

#iE {
    background-image: url(Portfolio/Illustration/AmtrackMeasles2-1.png);
    background-size: contain;

    background-repeat: no-repeat;
    background-position: center;
}

#iD {
    background-image: url(Portfolio/Illustration/DraculaPortrait.png);
    background-size: contain;

    background-repeat: no-repeat;
    background-position: center;

    grid-column: 1/3;
}

#iC {
    background-image: url(Portfolio/Illustration/FerrariThroughTheYearsMini.png);
    background-size: contain;

    background-repeat: no-repeat;
    background-position: center;

    
}


#mA {
    background-image: url(Portfolio/Models/docOck.png);
    background-size: contain;

    background-repeat: no-repeat;
    background-position: center;

}

#mB {
    background-image: url(Portfolio/Models/rooster.png);
    background-size: contain;

    background-repeat: no-repeat;
    background-position: center;

}

#mC {
    background-image: url(Portfolio/Models/gameboy.png);
    background-size: contain;

    background-repeat: no-repeat;
    background-position: center;

}

#mD {
    background-image: url(Portfolio/Models/mercedes.png);
    background-size: contain;

    background-repeat: no-repeat;
    background-position: center;

    grid-column: 1/4;

}


#wdA {
    background-image: url(Portfolio/WebDesign/energySite.png);
    background-size: contain;

    background-repeat: no-repeat;
    background-position: top;

}

#wdB {
    background-image: url(Portfolio/WebDesign/hotelSite.png);
    background-size: contain;

    background-repeat: no-repeat;
    background-position: top;

    grid-row: 1/3;
    grid-column: 2;

}

#wdC {
    background-image: url(Portfolio/WebDesign/musicSite.png);
    background-size: contain;

    background-repeat: no-repeat;
    background-position: center;

    grid-row: 1/3;
    grid-column: 3;

}




#formSection {
    margin-top: 150px;
    color: white;

    font-family: 'gothic';

    width: 100%;
    height: 500px;
}

#formTitle {
    margin-bottom: 50px;

    font-size: clamp(30px, 5vw, 45px);
}

.info {
    font-size: 20px;
}

#name {
    width: 300px;
    height: 30px;
    margin-bottom: 10px;

    border-radius: 5px;
    border-style: none;

    background-color: rgb(209, 194, 236);
}
#email {
    width: 300px;
    height: 30px;
    margin-bottom: 10px;

    border-radius: 5px;
    border-style: none;
    background-color: rgb(209, 194, 236);
}
#message {
    width: 300px;
    height: 80px;
    margin-bottom: 10px;

    border-radius: 5px;
    border-style: none;
    background-color: rgb(209, 194, 236);
}

#button {
    width: 150px;
    height: 45px;
    margin-top: 5px;

    font-size: 17px;
    color: white;

    background-color: rgb(85, 81, 95);

    font-family: 'gothic';
    border-radius: 10px;
    border-style: none;

    transition: .2s;
}

#button:hover {
    background-color: rgb(74, 68, 90);

}

#links {
    margin-top: 75px;
    font-size: clamp(30px, 5vw, 45px);
}

#linkSection {
    width: 100%;
    height: 100px;

    margin-top: 20px;;
}

#instagram {
    width: 100px;
    height: 100px;

}

#linkLogo {
    width: 50px;

    margin-right: 12px;
    margin-left: 12px;
}

a {
    text-decoration: none;
}

#cFooter {
    width: 100%;
    height: 20vh;
    background-color: rgb(84, 84, 102);
    border-top: 5px solid rgb(172, 171, 197);

    margin-top: 200px;

    position: absolute;
    z-index: 10;
}


#copyright {
    padding-top: 10px;
    color: white;
    bottom: 20px;
    /* left: 40%;
    position: absolute; */
}