@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;
    color: black;
    position: relative;
    width: 100vw;
    height: 100vh;
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

.fade-out {
    opacity: 0;
}

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

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

#skills {
    text-align: right;
}

.top_nav_text {
    margin-bottom: 20px;
}

.about_nav_text {
    position: relative;
}

.outline_text {
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
}

#logo {
    width: 12%;
}

#logo a,
#logo img {
    width: 100%;
}

/*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*/

.content_box {
    display: flex;
    justify-content: flex-start;
    padding: 0 8%;
    box-sizing: border-box;
    align-items: center;
}

.content_box>div:first-child {
    width: calc(100%/3*2);
}

.content_box_left h3 {
    font-size: 24px;
}

.content_box_left h3:nth-child(2) {
    font-weight: 800;
}

.content_box_left p {
    width: 70%;
}

.content_textwrapper {
    margin-bottom: 24px;
}

.content_box_right p {
    margin-bottom: 16px;
}

.content_box_right h2 {
    font-size: 40px;
    margin-bottom: 12px;
    font-weight: 700;
    font-family: "Aboreto", serif;
}

/*common*/
.outline_text {
    font-size: 2rem;
    text-transform: uppercase;
    color: var(--color-blue-40);
    will-change: transform;
    animation: growText 1s ease-in-out forwards;
    font-family: "Aboreto", serif;
}

@keyframes growText {
    0% {
        transform: scale(1);
        transform-origin: left;
    }

    100% {
        transform: scale(1.3);
        transform-origin: left;
    }
}

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