@font-face{
    font-family: 'MainFont';
    src:url('Fonts/NotoSansJP-Thin.otf');
}
@font-face{
    font-family: 'MainFontBold';
    src:url('Fonts/NotoSansJP-Bold.otf');
}
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.39);
    transition: background-color 0.5s;

}
::-webkit-scrollbar-thumb:hover{
    background-color: rgba(0, 0, 0, 0.493);
}

body{
    overflow-x: hidden ;
}

nav{
    overflow: hidden;
    font-family: 'MainFont';
    padding-bottom: 10px;
    border-bottom: black 1px solid;
    margin: 2cm;

}

nav a{

    text-decoration: none;
    float: right;
    border: 3px #FA6161 solid;
    padding: 10px;
    border-radius:2cm;
    position: relative;
}
s{
    position: relative;
    animation: fadein 1s ease;
}
@keyframes fadein{
    0%{
        right: 5%;
        opacity: 0%;
    }
    100%{
        right: 0%;
        opacity: 100%;
    }
}
nav a:hover{
    animation: ButtonHover 500ms;
    color:#ffffff;
    background-color: #FA6161 ;
}
@keyframes ButtonHover{
    from{
        color: black;
        background-color: #fa616100 ;
    }
    to{
        color:#ffffff;
        background-color: #FA6161 ;
    }
}

#name{
    animation: fade 2s ease;
}

main :nth-child(1){
    animation-delay: .2s;
}
main :nth-child(2){
    animation-delay: .4s;
}
main{
    height:10cm;
    border-left: 2px black solid;
    font-family: 'MainFont';
    border-right: 2px black solid;
    margin: 2cm;
    margin-bottom: 0;
}

span{
    display: flex;
    flex-wrap: wrap;

}
main h1{
    text-align: center;
    text-decoration: underline;
    position: relative;
    opacity: 0%;
    animation: fadein_text 1s ease forwards;
}
span img{
    width: 20%;
    margin: 2cm;
    transition: transform .2s;
}
span img:hover{
    transform: scale(1.1);
}
span p{
    width: 60%;
    margin-left: 1cm;
    margin-top: 2cm;
    opacity: 0%;
    position: relative;
    animation: fade_up 1s ease forwards;

}
.coloured{
    margin-left: 2cm;
    margin-right: 2cm;
    background-color: #FA6161 ;
    height: 120%;
    border-radius: 5mm;
}
.box{
    text-align: center;
    font-family: 'MainFont';
    width: 40%;
    height: 120%;
    padding: 2%;
    margin-bottom: 5%;
    margin-left: 4%;
    position: relative;
    left: 10%;
    background-color: #FA6161 ;
    box-shadow: 2px 2px 5px rgba(22, 22, 22, 0.425);
    border-radius: 5mm;
    animation: fade 1s ease;

}
.box1{
    text-align: center;
    font-family: 'MainFont';
    width: 80%;
    height: 120%;
    position: relative;
    left: 10%;
    background-color: #ffffff ;
    box-shadow: 2px 2px 5px rgba(22, 22, 22, 0.425);
    border-radius: 5mm;
    padding: 1cm;
    animation: fade 1s ease;


}
.box h1{
    color: blanchedalmond;
}
.Heading{
    position: relative;
    top: 1cm;
    font-family: 'MainFont';
    color: blanchedalmond;
    text-align: center;
    text-decoration: underline;
    z-index: 3;
}

img{
   transition: transform .2s;
   opacity: 0%;
   animation: fade 2s ease forwards;

}
img:hover{
   transform: scale(1.3);

}
section{
   transition: transform .2s;
}
section:hover{
   transform: scale(1.05);
} 
#Page3
{
    margin-top: 1cm;
    width: 80%;
    margin-left: 2cm;
    align-content: center;
    display: flex;
    flex-wrap: wrap;
}
.Aboutdesc{
    /* position: relative;
    top: 2cm;
    margin: 1cm; */
    margin:5%;
    text-align: center;
    width: 40%;
    transition: transform .2s;
    background-color: white;
    box-shadow: 2px 2px 5px rgba(22, 22, 22, 0.425);
    border-radius: 1cm;
    padding: 1cm;
    font-family: 'MainFont';
    opacity: 0%;
    animation: fade 1s ease forwards;

}
.Aboutdes:hover{
    transform: scale(1.1);
}
i{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
    left: 8%;
}
#ProfileShot{
    width: 24%;

    height: 100%;
    margin: 1cm;
    margin-right: 4cm;
    padding: 20px;
    background-color: white;
    /* position: relative;
    bottom: 6.2cm; */
    box-shadow: 2px 2px 5px rgba(22, 22, 22, 0.425);
    border-radius: 1cm;
}
ul,li{
    list-style: none;
    margin: 0cm;
    list-style-image: none;
    line-break: loose;
    object-fit: cover;
}
@media screen and (max-width : 1500px) {
  main{
      height:100%;
      text-align: center;
      margin: 0%;
  }
  .coloured{
      margin: 1%;
  }
  nav{
      margin: 1%;
  }
  span{
      margin-left:20%;
      margin-right:20%;
  }
  span img{
      position: relative;
      right: 15%;
      width: 80%;
      height: 80%;
  }
  .Aboutdesc{
      width: 80%;
      position: relative;
      right: 3%;
  }
  #ProfileShot{
    position: relative;
    left: 5%;
    width: 60%;
  }
  .box{
    width: 80%;
    height: 150%;
    position: relative;
    left: 5%;
  }
  #Page3{
      width: 100%;
      margin: 4%;
  }
  .box1{
      width: 80%;
  }
  span p{
      width: 80%;
      position: relative;
      left: 5%;
  }
  span img{
      position: relative;
      right: 2%;
  }
  span{
      margin-left: 5%;
      margin-right: 5%;
  }
}



@keyframes fadein_text{
    0%{
        right: 5%;
        opacity: 0%;
        color: rgba(0, 0, 0, 0);
    }
    100%{
        right: 0%;
        opacity: 100%;
    }
}

@keyframes fade_up{
    0%{
        bottom: 5%;
        opacity: 0%;
        color: transparent;
    }
    100%{
        bottom: 0%;
        opacity: 100%;
        color: black;
    }
}

@keyframes fade{
    0%{
        opacity: 0%;
    }
    100%{
        opacity: 100%;
    }
}

@keyframes fadeleft{
    0%{
        transform:translate(0,-1,0);
        opacity: 0%;
        color: transparent;
    }
    100%{
        transform:translate(0,1,0);
        opacity: 100%;
        color: black;
    }
}