html{
    font-size:100%;
    margin:0px;
    overflow-x: hidden;
}
body{
    background-color:#e0dff7;
}
.content {
    display: flex;
    flex-direction: column;
}
h1 {
    font-size:2.4rem;
    color:#e0dff7;
    line-height:2.4rem;
}
h2 {
    font-size:2.2rem;
}
h3 {
    font-size: 2rem;
    text-align: center;
    margin: 0px;
}
h4{
    margin-top:0px;
    font-size:1.8rem;
    font-family:'Shrikhand', cursive;
}
#gif1 {
    background-image: url(images/intro.gif);
    background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
    margin-left:-10px;
    margin-top:0px;
    height:600px;
    width:110%;
    box-shadow: 2px 10px 100px #0d0630;
}

#gif10 {
    background-image: url(images/intro.gif);
    background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
    margin-left:-10px;
    margin-top:0px;
    height:600px;
    width:110%;
    box-shadow: 2px 10px 100px #0d0630;
}

.giftext1 {
    text-align:left;
  position: absolute;
  top:100px;
    left:50px;
  color:#e0dff7;
    font-size:2.6rem;
    letter-spacing: 1px;
    font-family: 'Shrikhand', cursive; 
    width:600px;
    text-shadow: 2px 2px #0d0630;
}

.giftext2 {
    text-align:center;
  position: absolute;
  top:500px;
    left:500px;
  transform: translate(-50%, -50%);
  color:white; 
    background-color:rgba(240, 110, 184,.5);
    border-radius: 10px;
    font-size:2rem;
    letter-spacing: 1px;
    font-family: 'Noto Sans JP', sans-serif; 
    width:50%;
    text-shadow: 2px 2px #0d0630;
    z-index: 13;
}
.giftext3 {
    text-align:left;
  position: absolute;
  top:100px;
    left:50px;
  color:#e0dff7;
    font-size:2.6rem;
    letter-spacing: 1px;
    font-family: 'Shrikhand', cursive; 
    width:600px;
    text-shadow: 2px 2px #0d0630;
}

.giftext4 {
    text-align:center;
  position: absolute;
  top:450px;
    left:255px;
  transform: translate(-50%, -50%);
  color:white; 
    background-color:rgba(240, 110, 184,.5);
    border-radius: 10px;
    font-size:2rem;
    letter-spacing: 1px;
    font-family: 'Noto Sans JP', sans-serif; 
    width:400px;
    text-shadow: 2px 2px #0d0630;
    z-index: 13;
}

.navbar a {
    text-decoration:none;
    color:#0d0630;
}
.navig a {
    text-decoration: none;
    color:white;
    font-family: 'Shrikhand', cursive;
    letter-spacing:3px;
}

.navig a:hover{
    color:#0d0630;
}
/*top navigation*/
.navbar {
    display: flex;
    flex-direction: row;
    width:100%;
    min-height: 100px;
    height:100px;
    background-color:#3e39b8;
    color:#0d0630;
    justify-content: space-around;
    letter-spacing: 3px;
    z-index:19;
    position:fixed;
    margin-top:-15px;
    margin-left:-10px;
    box-shadow: 4px 4px 10px #0d0630;
}

.navbar > div {
    font-family: 'Shrikhand', cursive;
    font-size:1.8rem;
    }

.navbar > div:nth-child(1){
    background-color:#e0dff7;
    border: 10px double rgb(240, 110, 184);
    border-radius: 15px;
    height:40px;
    display:flex;
    font-size:2rem;
    margin-top:20px;
    transition-property:all;
    transition-duration: 2s;
}

.navbar > div:nth-child(2) {
    margin-top: 10px;
    color:white;
}

.navbar > div:nth-child(3){
    margin-top:20px;
    width: 150px;
    height:150px;
    background-image:url("images/profile.jpg");
    background-size: cover;
    border: 10px double rgb(240, 110, 184);
    border-radius:50%;
}

.navbar > div:nth-child(1):hover {
    letter-spacing:8px;
    transition-timing-function: ease-in-out;
}

/*title to caption*/

.hello {
    width: 30%;
    font-size:1.2rem;
    padding:10px;
    background-color:#e0dff7;
    color:#0d0630;
    border-radius:15px;
    border: 10px double #3e39b8;
    font-family: 'Noto Sans JP', sans-serif;
    box-shadow: 0px 0px 105px 5px #0d0630;
}

.hello h4 {
    font-family: 'Shrikhand', cursive;
    font-size: 1.7rem;
    text-align: center;
    letter-spacing:2px;
}

/*bottom navigation*/
.navig {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size:1.8rem;
    margin-top:20px;
}

.blob {
    display:flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top:50px;
}
.one {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-right:275px;
    margin-top:15px;
    z-index:10;
}
.endy{
     display: flex;
    flex-direction: row;
    text-align: center;
    margin-top:15px;
    padding-top:5px;
    padding-bottom: 5px;
    background-color:#0d0630;
    border-radius:5px;
    font-size: 2.2rem;
    box-shadow: 2px 2px 50px 15px rgb(240, 110, 184);
    width:500px;
    justify-content: center;
    margin-left:auto;
    margin-right:auto;
    z-index: 15;
}

.endy:hover{
    background-color:#e0dff7;
    box-shadow: 4px 4px rgba(240, 110, 184, 1);
}
.one > div {
    padding-top:5px;
    padding-bottom: 5px;
    background-color:#0d0630;
    border-radius:5px;
    font-size: 2.2rem;
    text-align: center;
    width:200px;
    box-shadow: 2px 2px 50px 15px rgb(240, 110, 184);
}

.one > div:hover {
    background-color:#e0dff7;
    color:#0d0630;
    box-shadow: 4px 4px rgba(240, 110, 184, 1);
    
}

.two {
    display: flex;
    flex-wrap:wrap;
    flex-direction: row;
    justify-content: space-around;
    margin-top:-20px;
    box-shadow: 2px 2px 100px 50px #3e39b8;
    width:102%;
    padding-right:15px;
    margin-left: -20px;
     min-height:85px;
    padding-top: 15px;
    background-color:#3e39b8;
    z-index: 10;
}

.three {
    display: flex;
    flex-wrap:wrap;
    flex-direction: row;
    justify-content: space-around;
    margin-top:-20px;
    box-shadow: 2px 2px 100px 50px #3e39b8;
    width:102%;
    padding-right:15px;
    margin-left: -10px;
     height:85px;
    padding-top: 15px;
    background-color:#3e39b8;
    z-index: 10;
}
.two > div {
    padding: 10px;
    border-radius:5px;
    background-color:#0d0630;
    width:6%;
    height:50px;
    text-align: center;
}

.two > div:hover {
    background-color:rgb(240, 110, 184);
    box-shadow: 2px 2px 50px 15px rgb(240, 110, 184);
}

/*footer*/
.footer {
    height:500px;
    width:100%;
    font-size:1.5rem;
}

    /*start media queries*/
            @media all and (max-width: 768px) {
                h1 {
                    
                }
                .navig{
                    margin-top:40px;
             height:125px;
                }
                #gif10 {
                    margin-top:100px;
                    margin-left:-450px;
                }
                #gif1 {
                    margin-top:50px;
                    margin-left:px;
                }
                .giftext1{
                    margin-left:0px;
                    margin-top:35px;
                }
                .giftext2{
                    margin-top:160px;
                    width:101%;
                    margin-left:-175px;
                    margin-right:auto;
                    border-radius: 0px;
                    background-color:rgba(240, 110, 184,1);
                }
                 .giftext3{
                    margin-left:0px;
                    margin-top:65px;
                }
                .giftext4{
                    margin-top:405px;
                    width:101%;
                    margin-left:50px;
                    margin-right:auto;
                    border-radius: 0px;
                    background-color:rgba(240, 110, 184,1);
                }
                .navbar {
                    margin-top:-20px;
                    height:150px;
                }
                .navbar > div:nth-child(1){
                    display:none;
                }
                .navbar > div:nth-child(2){
                    width:600px;
                    margin-left:15px;
                }
                
                .endy {
                    margin-left:100px;
                }
                .one {
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-end;
                    margin-right:75px;
                    margin-top:15px;
}
                .two{
                    min-height:175px;
                    margin-top:150px;
                    margin-left:-10px;
                }
                  .three{
                    margin-top:150px;
                    margin-left:-10px;
                      min-height:175px;
                }
                
                .two > div {
                    width:10%;
                    border-radius:5px;
                    margin:5px;
                    background-color:#0d0630;
                    text-align: center;
                }
                .two > div img {
                    width:75%;
                    height:100%;
                }
                .three > div img {
                    width:75%;
                }
                .blob{
                    margin-top:170px;
                }

            }
                            @media all and (max-width: 600px) {
                                .giftext1 h2{
                                    font-size:1.8rem;
                                }                                #gif1 {
                            margin-top:190px;
                            margin-left:-10px;
                        }
                                 .giftext1{
                            margin-left:-30px;
                            margin-top:100px;
                        }
                                 .giftext2{
                                width:100%;
                            margin-left:-270px;
                            margin-top:300px;
                                     height:auto;
                                     z-index: 12;
                        }
                                        .giftext3{
                            margin-left:-30px;
                            margin-top:60px;
                        }
                                 .giftext4{
                                width:100%px;
                            margin-left:-10px;
                            margin-top:450px;
                                     height:auto;
                                     z-index: 12;
                        }
                                .navbar{
                                 height:200px;
                                    margin-top:-10px;
                                }
                                .endy {
                                    margin-top:10px;
                            margin-left:10px;
                                    width:450px;
                                        z-index: 11;
                        }
                                 .navbar > div:nth-child(2){
                                     width:300px;
                                     margin-top:0px;
                                        line-height: 2.4rem;
                        }
                                #gif10 {
                                    margin-top: 190px;
                                    margin-left:-500px;
                                }
                                .two {
                                    margin-left:-10px;
                                    width:102%;
                                    margin-top:280px;
                                    min-height:150px;
                                    padding-bottom: 10px;
                                }
                                 .three {
                                    margin-left:-10px;
                                    width:102%;
                                    margin-top:500px;
                                    height:250px;
                                    flex-direction: column;
                                    justify-content: space-around;
                                    padding-bottom: 10px;
                                }
                    
                                .two > div {
                                    width:10%;
                                    margin:5px;
                                }
                                .blob {
                                    margin-top: 225px;
                                    display:flex;
                                    flex-direction: column;
                                    height: 800px;
                                }
                                .hello{
                                    margin-top:15px;
                                    width: 75%;
                                    margin-left: auto;
                                    margin-right: auto;
                                }
                                .one{
                                    margin-left:auto;
                                    margin-right: auto;
                                }
                            }