@charset "utf-8";

@import url(./all.css);

@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aboreto&display=swap');

html {
    --color-white: #EFEFEF;
    --color-black: #00000;
    --color-white-40: rgba(255, 255, 255, 0.4);
    --color-blue-40: rgba(107, 191, 255, 0.4);

    --color-yellow: #FACC23;
}

body::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera*/
}


* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    margin: 0;
    line-height: 1;
    display: inline-block;
}

fieldset,
input,
button,
select {
    border: 0;
    outline: 0;
    appearance: none;
    /* background-color: transparent; */
    vertical-align: middle;
}

a,
span {
    display: inline-block;
}

img {
    display: inline-block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1;
    font: 400 16px/1.4 "Mulish", serif;
}

/*Start*/
body {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
    font: 400 16px/1.4 "Mulish", serif;
    position: relative;
    width: 100vw;
    height: 100vh;
    opacity: 1;
    transition: opacity 1s ease-in-out;
    background-image: url('../img/bg.jpg');
    background-size: cover;
    background-repeat: no-repeat; 
    background-position: center;
}

.fade-out {
    opacity: 0;
}

#wrapper {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
    position: relative;
    width: 100vw;
    height: 100vh;
    padding: 40px;
    box-sizing: border-box;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
}

/*top nav*/
#top_nav {
    display: flex;
    justify-content: space-between;
}

.top_nav_text:hover, .bottom_nav_text:hover{
    color: rgba(0, 145, 255, 0.4);
}

#skills {
    text-align: right;
}

.top_nav_text {
    margin-bottom: 20px;
}

/*bottom top nav*/

#bottom_nav {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

#contact {
    text-align: right;
}

.bottom_nav_text {
    margin-top: 20px;
}

#social_medias img {
    margin: 0px 4px;
    max-width: 100%; 
    height: auto;
    display: inline-block;
}

/*slider middle*/
#slider {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    overflow: hidden;
}

.bg_welcome div:first-child{
    z-index: 1;
    position: relative;
    top: 0;
    left: 0;
    animation: flowLeft 10s linear infinite;
}

.bg_welcome div:nth-child(2) {
    z-index: 1;
    position: relative;
    top: 0;
    left: 0;
    animation: flowRight 10s linear infinite;
}

@keyframes flowLeft {
    from {
      transform: translateX(100%); /* Start off-screen to the right */
    }
    to {
      transform: translateX(-100%); /* Move off-screen to the left */
    }
  }

  @keyframes flowRight {
    from {
        transform: translateX(-100%); /* Start off-screen to the left */
    }
    to {
        transform: translateX(100%); /* Move off-screen to the right */
    }
}

.intro {
    z-index: 2;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

.intro_content>h1 {
    font-size: 4rem;
    text-transform: uppercase;
    line-height: 1;
    font-family: "Aboreto", serif;
}

.intro_content>img,
.intro_content>h2 {
    margin-bottom: 10px;
}

/*common*/
.outline_text {
    font-size: 2rem;
    text-transform: uppercase;
    color: var(--color-blue-40);
    font-family: "Aboreto", serif;
}

#about, #skills, #hobby, #contact{
    width: 500px;
}