@import url(https://fonts.googleapis.com/css?family=Nunito+Sans);
@import url(https://fonts.googleapis.com/css?family=Rubik);

html {
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0;
  padding: 0;
  font-size: 100%;
  line-height: 1.5;
  color: #555;
  font-family: 'Nunito Sans', sans-serif
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section {
  display: block
}

h1 {
  margin: .67em 0;
  font-size: 2.5rem;
}

figure {
  margin: 1em 40px
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible
}

code,
kbd,
pre,
samp {
  font-family: monospace;
  font-size: 1em
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline dotted
}

b,
strong {
  font-weight: bolder
}

dfn {
  font-style: italic
}

mark {
  background-color: #ff0;
  color: #000
}

small {
  font-size: 80%
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -.25em
}

sup {
  top: -.5em
}

audio,
canvas,
video {
  display: inline-block
}

audio:not([controls]) {
  display: none;
  height: 0
}

img {
  border-style: none
}

svg:not(:root) {
  overflow: hidden
}

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0
}

button,
input {
  overflow: visible
}

button,
select {
  text-transform: none
}

[type=reset],
[type=submit],
button,
html [type=button] {
  -webkit-appearance: button; /* WebKit浏览器 */
  appearance: button;          /* 标准属性 */
}


[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText
}

fieldset {
  padding: .35em .75em .625em
}

legend {
  color: inherit;
  display: table;
  max-width: 100%;
  white-space: normal
}

progress {
  display: inline-block;
  vertical-align: baseline
}

textarea {
  overflow: auto
}

[type=checkbox],
[type=radio],
legend {
  box-sizing: border-box;
  padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto
}

[type=reset],
[type=submit],
button,
html [type=button] {
  -webkit-appearance: button; /* 适用于 WebKit 浏览器 */
  -moz-appearance: button;    /* 适用于 Firefox */
  appearance: button;          /* 标准属性 */
}


[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

summary {
  display: list-item
}

[hidden],
template {
  display: none
}

/*!
*  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
*  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/
@-webkit-keyframes fa-spin {
  0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg)
  }

  to {
      -webkit-transform: rotate(359deg);
      transform: rotate(359deg)
  }
}

@keyframes fa-spin {
  0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg)
  }

  to {
      -webkit-transform: rotate(359deg);
      transform: rotate(359deg)
  }
}

@-webkit-keyframes pulse {

  0%,
  to {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
      filter: alpha(opacity=40);
      opacity: .4;
      top: 0
  }

  50% {
      -ms-filter: none;
      -webkit-filter: none;
      filter: none;
      opacity: 1;
      top: -10px
  }
}

@keyframes pulse {

  0%,
  to {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
      filter: alpha(opacity=40);
      opacity: .4;
      top: 0
  }

  50% {
      -ms-filter: none;
      -webkit-filter: none;
      filter: none;
      opacity: 1;
      top: -10px
  }
}

@font-face {
  font-family: 'FontAwesome';
  src: url(../fonts/fontawesome-webfont.eot?v=4.7.0);
  src: url(../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0) format("embedded-opentype"), url(../fonts/fontawesome-webfont.woff2?v=4.7.0) format("woff2"), url(../fonts/fontawesome-webfont.woff?v=4.7.0) format("woff"), url(../fonts/fontawesome-webfont.ttf?v=4.7.0) format("truetype"), url(../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular) format("svg");
  font-weight: 400;
  font-style: normal
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto
}

@font-face {
  font-family: devicon;
  src: url(../fonts/devicon.eot?-hdf3wh);
  src: url(../fonts/devicon.eot?#iefix-hdf3wh) format("embedded-opentype"), url(../fonts/devicon.woff?-hdf3wh) format("woff"), url(../fonts/devicon.ttf?-hdf3wh) format("truetype"), url(../fonts/devicon.svg?-hdf3wh#devicon) format("svg");
  font-weight: 400;
  font-style: normal
}

[class*=" devicon-"],
[class^=devicon-] {
  font-family: devicon; /* 字体设置 */
  font-style: normal; /* 字体样式 */
  font-weight: 400; /* 字体粗细 */
  line-height: 1; /* 行高 */
  -webkit-font-smoothing: antialiased; /* 字体平滑处理 */
  -moz-osx-font-smoothing: grayscale; /* 字体平滑处理（针对 macOS） */
}

article,
aside,
figcaption,
figure,
footer,
header,
nav,
section {
    display: block
}

h1,
h2,
h3,
h4,
strong {
    margin-top: 1em;
    padding-top: 1em;
    line-height: 1.25;
    color: #333
}

h2 {
    font-size: 2rem
}

h3 {
    font-size: 1.5rem
}

h4 {
    font-size: 1rem
}

ol,
ul {
    padding-left: 40px
}

figure,
ol,
p,
ul {
    margin: 1em 0
}

a img {
    border: 0
}

#particles-js {
  background: #be9ea0; /* 设置主色 */
  background: -webkit-linear-gradient(to right, #c49b8d, #be9ea0); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #c49b8d, #be9ea0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    display: flex;
    vertical-align: bottom;
    width: 100%;
    min-height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed
}


#particles-js .particles-js-canvas-el {
    width: 100% !important;
    height: 100vh !important
}

.header {
    z-index: 1;
    text-align: center;
    color: #fff;
    position: absolute;
    font-family: 'Rubik', sans-serif;
    width: 80%;
    top: 50%;
    left: 50%;
    margin: 0 auto;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.header .site-title {
    font-size: 35px;
    display: block;
    line-height: 1;
    color: #fff;
}


@media only screen and (min-width:550px) {
    .header .site-title {
        margin: 0;
        font-size: 100px
    }
}

.header .site-description {
    font-size: 20px;
    display: block;
    line-height: 1;
    color: #fff;
    margin-top: 10px
}

@media only screen and (min-width:550px) {
    .header .site-description {
        font-size: 40px
    }
}

.header-links {
    margin: 10px
}

.header-links .link {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    margin: 10px
}

@media only screen and (min-width:550px) {
    .header-links .link {
        font-size: 20px
    }
}

.header-icons {
    display: flex;
    justify-content: center;
    text-align: center
}

.down,
.header-icons .icon {
    color: #fff;
    text-align: center
}

.header-icons .icon {
  transition: all .7s;
  margin: 10px;
}


.header-icons .icon:active,
.header-icons .icon:hover {
    color: #1488cb;
}

@media only screen and (min-width:550px) {
    .header-icons .icon {
        width: 35px;
        height: 35px;
        font-size: 35px
    }
}

.down {
    position: absolute;
    bottom: 25px;
    width: 100%;
    margin: 0 auto;
    display: block;
    font-size: 30px;
    cursor: pointer
}

.down .icon {
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    fill: #fff;
    -webkit-animation: pulse 1.3s infinite;
    animation: pulse 1.3s infinite
}

.down .icon:active,
.down .icon:hover,
.footer a:active,
.footer a:hover {
    color: #4b5664
}

#about {
    width: 90%;
    margin: 0 auto;
    max-width: 960px
}

@media only screen and (min-width:550px) {
    #about {
        width: 80%
    }
}

.container {
  text-align: center;
  font-size: 60px;
}

/* Media query for mobile devices */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center items in the column */
    align-items: center; /* Center items horizontally */
    font-size: 40px; /* Adjust font size if necessary */
  }
}

.container p {
  font-size: 16px;
}

.user-details {
  text-align: center;
  margin: 5px auto;
}

/* Project container styles */
#projects {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
}

.user-projects {
  margin: 70px auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; /* Allow wrapping */
}

.user-projects img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

.user-projects h5 {
  margin: 0;
}

.user-projects li {
  color: #be9ea0;
  font-size: 1.1rem;
}

.user-projects p {
  margin-right: 5px;
}

/* Link styles */
.project-link {
  display: inline-block;
  margin: 10px 0;
  padding: 5px;
  color: #be9ea0;
  background-color: transparent;
  border: 1px solid #be9ea0;
  border-radius: 10px;
  text-align: center;
  outline: 0;
  text-decoration: none;
  cursor: pointer;
  transition: color .3s ease-out, background-color .3s ease-out, border-color .3s ease-out;
  font-size: 14px;
}

.project-link:active,
.project-link:hover {
  background-color: #5347a8;
  border-color: #5347a8;
  color: #fff;
  transition: color .3s ease-in, background-color .3s ease-in, border-color .3s ease-in;
}

/* Footer styles */
.footer {
  background: linear-gradient(to right, #c49b8d, #be9ea0);
  padding: 10px 0;
  margin-top: 100px;
  text-align: center;
  color: #fff;
}

.footer .love {
  color: red;
}

.footer a {
  text-decoration: none;
  margin: 0;
  color: #fff;
}

/* Image container styles */
.images-right {
  display: flex; /* Use Flex layout */
  justify-content: space-between; /* Distribute space evenly in a row */
  gap: 0px; /* Space between images */
}

.tokyoscene-img,
.USpeak4Me-img {
  border-radius: 16px; /* Rounded corners */
  box-shadow: 2px 2px rgba(0, 0, 0, 0.3); /* Shadow effect */
  transition: box-shadow 0.3s, transform 0.3s; /* Add smooth transition effect */
  height: auto; /* Height adapts automatically */
}


.tokyoscene-img:hover,
.USpeak4Me-img:hover {
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.5); /* Increase shadow on hover */
  transform: scale(1.05); /* Slightly enlarge on hover */
}



/* Media queries */
@media only screen and (min-width: 550px) {
  .user {
      flex-wrap: nowrap;
      font-size: 75px;
  }

  #projects {
      width: 80%;
  }

  .images-left {
      width: 48%;
      margin-right: 2%;
  }

  .contents-right {
      width: 48%;
      text-align: left;
  }
}

/* Adjustments for mobile devices */
@media (max-width: 768px) {
  .user-projects {
      flex-direction: column; /* Stack content vertically on mobile devices */
  }

  .images-right, .images-left {
      width: 100%; /* Images take full width on mobile devices */
  }

  .contents, .contents-right {
      width: 100%; /* Text sections also take full width on mobile devices */
  }
}

/* For desktop version, keep images on the right */
@media (min-width: 769px) {
  .images-right{
    order: 1; /* Maintain default order on desktop */
    width: 50%; /* Images occupy 50% of the width */
}

  .contents, .contents-right {
      width: 50%; /* Text sections occupy 50% of the width */
  }
}


/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #45a049;
}

/* Add a background color and some padding around the form */
.contact-container {
  border-radius: 5px;
  background-color: #f2d7ce;
  padding: 20px;
}