@font-face {
  font-family: 'Russo One';
  src:url('fonts/RussoOne-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  src: url('fonts/ZenKakuGothicNew-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
:root{
  --font-family-russo-one: 'Russo One', sans-serif;
  --font-family-zen-kaku-gothic-new: 'Zen Kaku Gothic New', sans-serif;
  --line:rgba(84, 131, 194, 1);
}

body{
    width: 100%;
    margin: 0;
    background-color: #000;
}
.main{
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 3240;
    background-image: url('images/background.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.avatar{
    position: absolute;
    top: 1.2963%;
    left: 1.9792%;
    width: 29.9479%;
    height: 17.7469%;
    border: 0.0304vw solid rgba(50, 50, 50, 1);
    background-color: rgba(55, 55, 55, 1);
    border-radius: 50%;
}
.text-1{
    position: absolute;
    top: 3.0556%;
    left: 36.4583%;
    font-family: var(--font-family-russo-one);
    font-size: 2.5vw;
    color: white;
}
.text-2{
    position: absolute;
    top: 6.2037%;
    left: 36.4583%;
    width: 58.3333%;
    font-family: var(--font-family-zen-kaku-gothic-new);
    font-size: 1.875vw;
    color: white;
}
.line1{
    position: absolute;
    top: 23.0556%;
    left: 5.0521%;
    right: 5.0521%;
    border: none;
    height: max(1px, 0.1042vw);
    background-color: var(--line);
    color: var(--line);
}
.text-3{
    position: absolute;
    top: 24.4136%;
    left: 35.3958%;
    font-family: var(--font-family-russo-one);
    font-size: 2.5vw;
    color: white;
}
.text-4{
    position: absolute;
    top: 27.5617%;
    left: 6.1458%;
    width: 87.7083%;
    font-family: var(--font-family-zen-kaku-gothic-new);
    font-size: 1.875vw;
    color: white;
}
.text-5{
    position: absolute;
    top: 37.037%;
    left: 45.75%;
    font-family: var(--font-family-russo-one);
    font-size: 3vw;
    color: white;
    white-space: nowrap;
}
.line2{
    position: absolute;
    top: 40.1235%;
    left: 5.0521%;
    right: 5.0521%;
    border: none;
    height: max(1px, 0.1042vw);
    background-color: var(--line);
    color: var(--line);
}
.text-6{
    position: absolute;
    top: 41.4815%;
    left: 35.9896%;
    font-family: var(--font-family-russo-one);
    font-size: 2.5vw;
    color: white;
}
.text-7{
    position: absolute;
    top: 43.5185%;
    left: 6.1458%;
    width: 87.7083%;
    font-family: var(--font-family-zen-kaku-gothic-new);
    font-size: 1.875vw;
    color: white;
}
.text-8{
    position: absolute;
    top: 47.4444%;
    left: 6.1458%;
    width: 87.7083%;
    font-family: var(--font-family-zen-kaku-gothic-new);
    font-size: 1.875vw;
    color: white;
}
.text-9{
    position: absolute;
    top: 49.4444%;
    left: 6.1458%;
    width: 87.7083%;
    font-family: var(--font-family-zen-kaku-gothic-new);
    font-size: 1.875vw;
    color: white;
}
.text-10{
    position: absolute;
    top: 51.4815%;
    left: 6.1458%;
    width: 87.7083%;
    font-family: var(--font-family-zen-kaku-gothic-new);
    font-size: 1.875vw;
    color: white;
}
.text-11{
    position: absolute;
    top: 58.5185%;
    left: 10.1458%;
    width: 87.7083%;
    font-family: var(--font-family-zen-kaku-gothic-new);
    font-size: 2vw;
    color: white;
    white-space: nowrap;
}
.button{
    position: absolute;
    top: 65.5556%;
    left: 25.75%;
    width: 50%;
    height: 16.8889%;
    border-radius: 47%;
    border: 0.0521vw solid rgba(50, 50, 50, 1);
    background: linear-gradient(#4c658a,#323232);
}
.blog, .blog a{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-family-russo-one);
    font-size: 4vw;
    text-align: center;
    text-decoration: none;
    color: white;
}
a{
    color: white;
}
a:hover{
    color: var(--line);
}
p{
    margin: 0;
    padding: 0;
}