*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    color: white;
    display: block;
background: #000000;
background: linear-gradient(91deg, rgba(0, 0, 0, 1) 0%, rgba(10, 4, 130, 1) 79%);
}

main {
    position: relative;
}

header{
color: white;
}

header .english {
    font-size: 5em;
    margin-top: 1em;
    margin-left: 10vw;
    text-shadow: #DD00EB 5px 3px 1px;
}
header .japanese {
    font-size: 4em;
    margin-top: 0.25em;
    margin-left: 40vw;
    text-shadow: #DD00EB 5px 3px 1px;
}

#foreground {
    top: 0;
    position: relative;
}
.navigator {
    overflow: hidden;
    background: #A32FEB;
    background: linear-gradient(0deg,rgba(163, 47, 235, 1) 0%, rgba(86, 147, 236, 1) 34%, rgba(2, 255, 238, 1) 100%);
    font-size: 1.5em;
    text-align: center;
    display: block;
    position: relative;
    top: -136.2rem;
}

.navigator nav ul li {
    display: inline-block;
}
.navigator nav ul li a {
    color: #A32FEB;
}
.navigator nav ul li a:hover {
    color: #000000;
}

#statues {
    position: absolute;
    overflow: hidden;
    top: 42rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    transform: translate3d(150px, 10px, 10px);
}

#statues img {
    width: auto;
    position: relative;
} 

#figma {
    height: 40%;
}

#exercises {
    height: 35%;
}

#projects {
    height: 65%;
        transform: translateY(-220px);
    }
    
    #inspiration {
        height: 60%;
        transform: translateY(-220px);
}

#website {
    top: 0;
    padding-bottom: 1rem;
    position: relative;
    background: #D9D9D9;
    margin-right: 70.6rem;
    left: 5rem;
    transform: translateX(17rem) translateY(-60rem);
}

.header {
    background: #0006b4;
    position: relative;
    padding: 10px;
}
.header p {
    padding-bottom: 0;
}

.x {
    background: #D9D9D9;
    margin-left: 11em;
    padding: 3.5px;
    color: #000000;
    font-weight: bold;
}

#website .inside {
    margin-top: 1em;
    margin-left: 4em;
    padding-bottom: 1em;
    background: #FFFFFF;
}

#website .inside a {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30px;
    position: relative;
    color: #0006b4;
    padding: 1.2em;
    padding-top: 0;
}
#website .inside a:hover {
    color: #570099;
}
#e_website {
    top: 0;
    padding-bottom: 1rem;
    position: relative;
    background: #D9D9D9;
    margin-right: 70.6rem;
    left: 40rem;
    transform: translateX(10rem) translateY(-75rem);
}

.e_header {
    background: #0006b4;
    position: relative;
    padding: 10px;
}
.e_header p {
    padding-bottom: 0;
}

.e_x {
    background: #D9D9D9;
    margin-left: 11em;
    padding: 3.5px;
    color: #000000;
    font-weight: bold;
}

#e_website .e_inside {
    margin-top: 1em;
    margin-left: 4em;
    padding-bottom: 1em;
    background: #FFFFFF;
}

#e_website .e_inside a {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30px;
    position: relative;
    color: #0006b4;
    padding: 1.2em;
    padding-top: 0;
}
#e_website .e_inside a:hover {
    color: #570099;
}

#p_website {
    top: 0;
    padding-bottom: 1rem;
    position: relative;
    background: #D9D9D9;
    margin-right: 70.6rem;
    left: 5rem;
    transform: translateX(15rem) translateY(-38rem);
}

.p_header {
    background: #0006b4;
    position: relative;
    padding: 10px;
}
.p_header p {
    padding-bottom: 0;
}

.p_x {
    background: #D9D9D9;
    margin-left: 11em;
    padding: 3.5px;
    color: #000000;
    font-weight: bold;
}

#p_website .p_inside {
    margin-top: 1em;
    margin-left: 4em;
    padding-bottom: 1em;
    background: #FFFFFF;
}

#p_website .p_inside a {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30px;
    position: relative;
    color: #0006b4;
    padding: 1.2em;
    padding-top: 0;
}
#p_website .p_inside a:hover {
    color: #570099;
}

html,
body,
main,
#foreground,
.grid {
    top: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    perspective: 12em;
    
}

.grid {
    position: relative;
    background-image:
      repeating-linear-gradient(#A32FEB 0 1px, transparent 2px 100%),
      repeating-linear-gradient(90deg, #A32FEB 0 1px, transparent 2px 100%);
    background-size: 15px 15px;
   transform: rotateX(60deg) scaleX(3);
}

.square_left {
    top: -10rem;
    width: 29em;
    height: 29em;
    background: white;
    transform: translateX(-12vw) translateY(-12rem) rotate(67deg) ;
}
.square_right {
    top: -10rem;
    width: 25em;
    height: 25em;
    background: white;
    transform: translateX(80vw) translateY(-66rem) rotate(130deg) ;
}

a {
    color: white;
}